Card

The Card component provides a reusable pattern for card in the interface.

Meta first

Eyebrow

Heading

This is the meta (after title)

Wed 10 Jun 2026

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

This is the meta (before title)

123 AVC Heading

Wed 10 Jun 2026

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-uid="6a28eaeb0b32a" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-svg c-image--cover" data-uid="6a28eaeb0b411" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="/assets/img/component.svg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0b68e" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0b650" data-component="group">
    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__eyebrow u-margin__bottom--2 c-typography__variant--meta" data-uid="6a28eaeb0b54d" data-component="typography">
    <span>Eyebrow</span>
</span>        
         
                <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0b593" data-component="typography">
    Heading
</h2>        
        
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="6a28eaeb0b5ec" data-component="typography">
    This is the meta (after title)
</span>
</div>
</div>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="6a28eaeb0b929" data-component="typography">
    <!-- icon.blade.php -->
    <span class="c-icon c-icon--date-range c-icon--material c-icon--material-date_range material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" data-material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0b81f" data-component="icon">
                    </span>
        <time class="c-date" data-date="2026-06-10T04:41:15" datetime="2026-06-10T04:41:15" data-uid="6a28eaeb0b8e2" data-component="date">Wed 10 Jun 2026 </time>
</span>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0b98d" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
        
            </div>
</div>
    </div>
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-uid="6a28eaeb0b9eb" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-svg c-image--cover" data-uid="6a28eaeb0ba60" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="/assets/img/component.svg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="6a28eaeb0bb0a" data-component="typography">
    This is the meta (before title)
</span>    <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0bbd2" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0bb90" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0bb59" data-component="typography">
    123 AVC Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="6a28eaeb0bcac" data-component="typography">
    <!-- icon.blade.php -->
    <span class="c-icon c-icon--date-range c-icon--material c-icon--material-date_range material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" data-material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0bc2b" data-component="icon">
                    </span>
        <time class="c-date" data-date="2026-06-10T04:41:15" datetime="2026-06-10T04:41:15" data-uid="6a28eaeb0bc74" data-component="date">Wed 10 Jun 2026 </time>
</span>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0bcf7" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
        
            </div>
</div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'eyebrow' => 'Eyebrow',
            'color' => 'primary',
            'heading' => 'Heading',
            'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'meta' => "This is the meta (after title)",
            'date' => date('Y-m-d H:i:s')
        ])
        @endcard
    </div>
    <div class="o-grid-4@md">
        @card([
            'color' => 'primary',
            'heading' => '123 AVC Heading',
            'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'meta' => "This is the meta (before title)",
            'metaFirst' => true,
            'date' => date('Y-m-d H:i:s')
        ])
        @endcard
    </div>
</div>

Only slot

Here we've only sent data to the slot and nothing with the parameters.

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
  <div class="o-grid-4@md">
        <!-- card.blade.php -->
<div class="c-card c-card--panel c-card--highlight c-card--ratio-16-9" data-uid="6a28eaeb0bd8f" data-component="card">
    <div class="c-card__paint-container">
                        <div class="c-card__header">
            <!-- typography.blade.php -->
            <h2 id="" class="c-typography c-typography__variant--h2" data-uid="5f7c265caf00d">
              Heading
            </h2><!-- typography.blade.php -->
            <h4 id="" class="c-typography c-typography__variant--h4" data-uid="5f7c265caf43a">
              SubHeading
            </h4><!-- typography.blade.php -->
          </div>
            <div class="c-card__body">
              <!-- typography.blade.php -->
              <p id="" class="c-typography c-typography__variant--p" data-uid="5f7c265caf970">
                Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
              </p>
            </div>
            </div>
</div>
  </div>
</div>


<div class="o-grid">
  <div class="o-grid-4@md">
    @card([
        'classList' => [
            'c-card--panel',
            'c-card--highlight'
        ]
    ])
        <div class="c-card__header">
            <!-- typography.blade.php -->
            <h2 id="" class="c-typography c-typography__variant--h2" data-uid="5f7c265caf00d">
              Heading
            </h2><!-- typography.blade.php -->
            <h4 id="" class="c-typography c-typography__variant--h4" data-uid="5f7c265caf43a">
              SubHeading
            </h4><!-- typography.blade.php -->
          </div>
            <div class="c-card__body">
              <!-- typography.blade.php -->
              <p id="" class="c-typography c-typography__variant--p" data-uid="5f7c265caf970">
                Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
              </p>
            </div>
    @endcard
  </div>
</div>

Card with a collapsible body

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-uid="6a28eaeb0be11" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb0be76" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0c09f" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0bf52" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0bf1c" data-component="typography">
    Heading
</h2>
</div>    <button class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button--md c-button__toggle c-button--icon-only" js-toggle-trigger="6a28eaeb0be04" data-toggle-icon="close" aria-pressed="false" aria-label="expand_more" type="button" data-uid="6a28eaeb0c009" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28eaeb0c055" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>
</div>            <div class="c-card--collapse" data-js-toggle-class="c-card--collapse" data-js-toggle-item="6a28eaeb0be04">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0c0f3" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p></div>
         </div>
        
            </div>
</div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'collapsible' => true,
            'heading' => 'Heading',
            'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT']
        ])
        @endcard
    </div>
</div>

Card images

The images can be set to cover 100% of the width or if you wish set padded to true to keep the image in the middle. You can also set a background color which can be seen in the example with padding.

Jun 10

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

123 AVC Heading

Wed 10 Jun 2026

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--has-datebadge c-card--ratio-16-9" data-uid="6a28eaeb0c186" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-1&ixid=eyjhchbfawqiojeymdd9&w=1000&q=80 c-image--cover" data-uid="6a28eaeb0c1ec" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md c-datebadge--light" data-uid="6a28eaeb0c2d4" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="6a28eaeb0c3ae" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="6a28eaeb0c30e" data-component="typography">
    Jun
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="6a28eaeb0c343" data-component="typography">
    10
</span>
    </div>
</div>            <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0c475" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0c440" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0c40a" data-component="typography">
    Heading
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0c4c0" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
        
            </div>
</div>
    </div>
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-uid="6a28eaeb0c50f" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-svg c-image--cover" data-uid="6a28eaeb0c572" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="/assets/img/component.svg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0c67b" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0c647" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0c612" data-component="typography">
    123 AVC Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="6a28eaeb0c74c" data-component="typography">
    <!-- icon.blade.php -->
    <span class="c-icon c-icon--date-range c-icon--material c-icon--material-date_range material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" data-material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0c6cd" data-component="icon">
                    </span>
        <time class="c-date" data-date="2026-06-10T04:41:15" datetime="2026-06-10T04:41:15" data-uid="6a28eaeb0c714" data-component="date">Wed 10 Jun 2026 </time>
</span>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0c7a4" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
        
            </div>
</div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'heading' => 'Heading',
            'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => [
                'src' => 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'square' => true
            ],
            'date' => date('Y-m-d H:i:s'),
            'dateBadge' => true
        ])
        @endcard
    </div>
    <div class="o-grid-4@md">
        @card([
            'color' => 'primary',
            'heading' => '123 AVC Heading',
            'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'date' => date('Y-m-d H:i:s')
        ])
        @endcard
    </div>
</div>

Card with date badge

Cards with date badges can be used to show the date of the card.

Jun 10

With image

lorem ipsum dolor sit amet, consectetur adipiscing elit

Jun 10

With Placeholder

lorem ipsum dolor sit amet, consectetur adipiscing elit

Jun 10

Without image

lorem ipsum dolor sit amet, consectetur adipiscing elit

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--has-datebadge c-card--ratio-16-9" data-uid="6a28eaeb0c83d" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-1&ixid=eyjhchbfawqiojeymdd9&w=1000&q=80 c-image--cover" data-uid="6a28eaeb0c8a0" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md c-datebadge--light" data-uid="6a28eaeb0c94b" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="6a28eaeb0c9df" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="6a28eaeb0c97c" data-component="typography">
    Jun
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="6a28eaeb0c9ae" data-component="typography">
    10
</span>
    </div>
</div>            <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0ca94" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0ca61" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0ca2d" data-component="typography">
    With image
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0cade" data-component="typography">
    lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>         </div>
        
            </div>
</div>
    </div>
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--has-datebadge c-card--svg-background c-card--ratio-16-9" data-uid="6a28eaeb0cb2b" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
    <figure class="c-image c-card__image c-image--cover c-image--is-placeholder c-image--is-placeholder" data-uid="6a28eaeb0cb9a" data-component="image">
                    <div class="c-image__placeholder" aria-label="">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--broken-image c-icon--material c-icon--material-broken_image material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-xxl" data-material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0cbf7" data-component="icon">
                    </span>
          </div>
            </figure>

</div>
<div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md c-datebadge--light" data-uid="6a28eaeb0cc6d" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="6a28eaeb0ccfe" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="6a28eaeb0cc9d" data-component="typography">
    Jun
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="6a28eaeb0cccf" data-component="typography">
    10
</span>
    </div>
</div>            <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0cdb2" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0cd7f" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0cd4c" data-component="typography">
    With Placeholder
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0cdfc" data-component="typography">
    lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>         </div>
        
            </div>
</div>
    </div>
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-datebadge c-card--ratio-16-9" data-uid="6a28eaeb0ce4a" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md c-datebadge--light" data-uid="6a28eaeb0cebc" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="6a28eaeb0cf56" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="6a28eaeb0ceeb" data-component="typography">
    Jun
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="6a28eaeb0cf1c" data-component="typography">
    10
</span>
    </div>
</div>            <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0d00d" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0cfd9" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0cfa6" data-component="typography">
    Without image
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0d056" data-component="typography">
    lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>         </div>
        
            </div>
</div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'heading' => 'With image',
            'content' => 'lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'image' => [
                'src' => 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'square' => true
            ],
            'date' => date('Y-m-d H:i:s'),
            'dateBadge' => true
        ])
        @endcard
    </div>
    <div class="o-grid-4@md">
        @card([
            'heading' => 'With Placeholder',
            'content' => 'lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'image' => null,
            'date' => date('Y-m-d H:i:s'),
            'dateBadge' => true,
            'hasPlaceholder' => true
        ])
        @endcard
    </div>
    <div class="o-grid-4@md">
        @card([
            'heading' => 'Without image',
            'content' => 'lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'image' => null,
            'date' => date('Y-m-d H:i:s'),
            'dateBadge' => true
        ])
        @endcard
    </div>
</div>

Buttons

You can configure a card with buttons that will be rendered in the footer.

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--highlight c-card--has-image c-card--has-footer c-card--ratio-16-9" data-uid="6a28eaeb0d0e5" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb0d148" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0d24f" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0d21d" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0d1e8" data-component="typography">
    Heading
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0d29a" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
<div class="c-card__footer" data-js-toggle-class="u-display--none" data-js-toggle-item="6a28eaeb0d0d6">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0d30c" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>                        <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0d35c" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>        
            </div>
</div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'collapsible' => false,
            'heading' => 'Heading',
            'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
            'buttons' => [
                    ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
                    ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
                ],
                "classList" => [
                    "c-card--highlight"
                    ]
        ])
        @endcard
    </div>
</div>

Linked card

Links whole card.

Heading

Linked card is not compatible with either dropdown or buttons. Markup will break if used togheter.

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<a class="c-card c-card--has-image c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" aria-label="Heading - Linked card is not compatible with either dropdown or buttons." data-uid="6a28eaeb0d404" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb0d46d" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0d578" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0d545" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0d50e" data-component="typography">
    Heading
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0d5c2" data-component="typography">
    Linked card is not compatible with either dropdown or buttons. Markup will break if used togheter.
</p>         </div>
        
            </div>
</a>
    </div>
</div>


<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'heading' => 'Heading',
            'content' => 'Linked card is not compatible with either dropdown or buttons. Markup will break if used togheter.',
            'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
            'link' => "https://getmunicipio.com"
        ])
        @endcard
    </div>
</div>

Container Aware

Enables container awareness on the component (adjusts layout depending on available space).

Heading

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Heading

Resize the preview above to see the card's container aware feature.

<!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--has-footer c-card--ratio-16-9" data-uid="6a28eaeb0d64e" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb0d6af" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0d7ca" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0d796" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0d760" data-component="typography">
    Heading
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0d815" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
<div class="c-card__footer" data-js-toggle-class="u-display--none" data-js-toggle-item="6a28eaeb0d640">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0d870" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>                        <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0d8b1" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>        
            </div>
</div>
<br/>
    <!-- card.blade.php -->
<div class="c-card c-card--has-footer c-card--ratio-16-9" data-uid="6a28eaeb0d8fd" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0d9d6" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0d9a4" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0d970" data-component="typography">
    Heading
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0da1f" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
<div class="c-card__footer" data-js-toggle-class="u-display--none" data-js-toggle-item="6a28eaeb0d8f1">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0da7d" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>                        <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0dabd" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>        
            </div>
</div>
    <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--meta" data-uid="6a28eaeb0dafe" data-component="typography">
    Resize the preview above to see the card's container aware feature.
</p>

@card([
    'collapsible' => false,
    'heading' => 'Heading',
    'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
    'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
    'buttons' => [
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
    ],
])
@endcard
<br/>
@card([
    'collapsible' => false,
    'heading' => 'Heading',
    'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
    'buttons' => [
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
    ],
])
@endcard
@typography([
    'variant' => 'meta'
])
    Resize the preview above to see the card's container aware feature.
@endtypography

Inset Inherit

Demonstrate inset inheritance on the component & subcomponents (adjusts padding depending on available space).

Accordion heading

Heading

Resize the preview above to see the card and nested accordion inherit the inset spacing.

<!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--has-footer c-card--ratio-16-9" data-uid="6a28eaeb0dd06" data-component="card">
    <div class="c-card__paint-container">
                        <div class="c-card__header">
        <h3 class="c-card__heading">Heading</h3>
    </div>


        <!-- accordion.blade.php -->
    <div class="c-accordion" js-expand-container id="id_6a28eaeb0dbc7" data-uid="6a28eaeb0dbd2" data-component="accordion">
                    <div class="c-accordion__section">

                <button class="c-accordion__button" role="button" aria-label="Accordion heading" aria-controls="c-accordion__aria-id_6a28eaeb0dbc7-0" aria-expanded="false" js-expand-button>
                    <span class="c-accordion__button-wrapper" tabindex="-1">
                        

                        Accordion heading
                        
                        

                            <!-- icon.blade.php -->
    <span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0dc25" data-component="icon">
                    </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-id_6a28eaeb0dbc7-0" aria-hidden="true">
                    
                    <p>

                    Accordion content should keep the same inset rhythm as the rest of the card when the container grows.

                    </p>

                    
                </div>

            </div>
                    <div class="c-accordion__section">

                <button class="c-accordion__button" role="button" aria-label="Accordion heading" aria-controls="c-accordion__aria-id_6a28eaeb0dbc7-1" aria-expanded="false" js-expand-button>
                    <span class="c-accordion__button-wrapper" tabindex="-1">
                        

                        Accordion heading
                        
                        

                            <!-- icon.blade.php -->
    <span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0dc73" data-component="icon">
                    </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-id_6a28eaeb0dbc7-1" aria-hidden="true">
                    
                    <p>

                    Accordion content should keep the same inset rhythm as the rest of the card when the container grows.

                    </p>

                    
                </div>

            </div>
                    <div class="c-accordion__section">

                <button class="c-accordion__button" role="button" aria-label="Accordion heading" aria-controls="c-accordion__aria-id_6a28eaeb0dbc7-2" aria-expanded="false" js-expand-button>
                    <span class="c-accordion__button-wrapper" tabindex="-1">
                        

                        Accordion heading
                        
                        

                            <!-- icon.blade.php -->
    <span class="c-icon c-accordion__icon c-icon--keyboard-arrow-down c-icon--material c-icon--material-keyboard_arrow_down material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" data-material-symbol="keyboard_arrow_down" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0dcba" data-component="icon">
                    </span>

                    </span>
                </button>

                <div class="c-accordion__content" id="c-accordion__aria-id_6a28eaeb0dbc7-2" aria-hidden="true">
                    
                    <p>

                    Accordion content should keep the same inset rhythm as the rest of the card when the container grows.

                    </p>

                    
                </div>

            </div>
            </div>
            </div>
</div>
<br/>
    <!-- card.blade.php -->
<div class="c-card c-card--has-footer c-card--ratio-16-9" data-uid="6a28eaeb0dd49" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0de2b" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0ddf7" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0ddc1" data-component="typography">
    Heading
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0de75" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
<div class="c-card__footer" data-js-toggle-class="u-display--none" data-js-toggle-item="6a28eaeb0dd3f">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0decf" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>                        <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0df1e" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>        
            </div>
</div>
    <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--meta" data-uid="6a28eaeb0df62" data-component="typography">
    Resize the preview above to see the card and nested accordion inherit the inset spacing.
</p>

@card([
    'collapsible' => false,
    'heading' => 'Heading',
    'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
    'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
    'buttons' => [
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
    ],
])
    <div class="c-card__header">
        <h3 class="c-card__heading">Heading</h3>
    </div>


    @accordion([
        'list' => [
            [
                'heading' => 'Accordion heading',
                'content' => 'Accordion content should keep the same inset rhythm as the rest of the card when the container grows.'
            ],
            [
                'heading' => 'Accordion heading',
                'content' => 'Accordion content should keep the same inset rhythm as the rest of the card when the container grows.'
            ],
            [
                'heading' => 'Accordion heading',
                'content' => 'Accordion content should keep the same inset rhythm as the rest of the card when the container grows.'
            ]
        ]
    ])
    @endaccordion
@endcard
<br/>
@card([
    'collapsible' => false,
    'heading' => 'Heading',
    'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components. Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
    'buttons' => [
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
    ],
])
@endcard
@typography([
    'variant' => 'meta'
])
    Resize the preview above to see the card and nested accordion inherit the inset spacing.
@endtypography

Card has action

Adds visual effect to indicate that the card has an action attached (i.e. a link)

Heading

aaaa Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--has-footer c-card--ratio-16-9" data-uid="6a28eaeb0dfe5" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb0e049" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb0e202" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb0e122" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb0e0ec" data-component="typography">
    Heading
</h2>
</div>        <div class="c-element u-display--flex   u-rounded--full u-detail-shadow-3 u-aspect-ratio--1-1" style="background-color: transparent;" data-uid="6a28eaeb0e1c8" data-component="element">
        <!-- icon.blade.php -->
    <span class="c-icon c-card__icon c-icon--settings c-icon--material c-icon--material-settings material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="settings" style="color:#000;stroke:#000;" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6a28eaeb0e185" data-component="icon">
                    </span>
    </div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb0e24f" data-component="typography">
    aaaa Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
<div class="c-card__footer" data-js-toggle-class="u-display--none" data-js-toggle-item="6a28eaeb0dfd6">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb0e2aa" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>                        <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="6a28eaeb115d1" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>        
            </div>
</div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'collapsible' => false,
            'heading' => 'Heading',
            'content' => ' aaaa Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
            'buttons' => [
                ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
                ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
            ],
            'icon' => ['icon' => 'settings', 'customColor' => '#000', 'size' => 'md'],
        ])
        @endcard
    </div>
</div>

Hightlight Card

A modifier to highlight the card.

TEST

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
  <div class="o-grid-4@md">
        <!-- card.blade.php -->
<div class="c-card c-card--highlight c-card--has-image c-card--ratio-16-9" data-uid="6a28eaeb1167b" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb116e7" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb118ab" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb117c8" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb1178f" data-component="typography">
    TEST
</h2>
</div>    <button class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button--md c-button__toggle c-button--icon-only" js-toggle-trigger="6a28eaeb1166b" data-toggle-icon="close" aria-pressed="false" aria-label="expand_more" type="button" data-uid="6a28eaeb11822" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--expand-more c-icon--material c-icon--material-expand_more material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="6a28eaeb11864" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>
</div>            <div class="c-card--collapse" data-js-toggle-class="c-card--collapse" data-js-toggle-item="6a28eaeb1166b">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb118fa" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p></div>
         </div>
        
            </div>
</div>
  </div>
</div>

<div class="o-grid">
  <div class="o-grid-4@md">
    @card([
        'collapsible' => true,
        'heading' => 'TEST',
        'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
        'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
        'classList' => [
          'c-card--highlight'
        ]
    ])
    @endcard
  </div>
</div>

Accent

Gives the card a more plain styling with accent colors

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
  <div class="o-grid-4@md">
        <!-- card.blade.php -->
<div class="c-card c-card--accented c-card--ratio-16-9" data-uid="6a28eaeb11990" data-component="card">
    <div class="c-card__paint-container">
                        <div class="c-card__header">
        <!-- typography.blade.php -->
        <h2 id="" class="c-typography c-typography__variant--h2" data-uid="5f7c265caf00d">
          Heading
        </h2><!-- typography.blade.php -->
        <h4 id="" class="c-typography c-typography__variant--h4" data-uid="5f7c265caf43a">
          SubHeading
        </h4><!-- typography.blade.php -->
      </div>
        <div class="c-card__image c-card__image--secondary">
          <div class="c-card__image-background" style=
          "background-image:url('https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');"></div>
        </div>
        <div class="c-card__body">
          <!-- typography.blade.php -->
          <p id="" class="c-typography c-typography__variant--p" data-uid="5f7c265caf970">
            Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
          </p>
        </div>
            </div>
</div>
  </div>
  <div class="o-grid-4@md">
        <!-- card.blade.php -->
<div class="c-card c-card--accented c-card--ratio-16-9" data-uid="6a28eaeb119d0" data-component="card">
    <div class="c-card__paint-container">
                        <div class="c-card__header">
        <!-- typography.blade.php -->
        <h2 id="" class="c-typography c-typography__variant--h2" data-uid="5f7c265caf00d">
          Heading
        </h2><!-- typography.blade.php -->
        <h4 id="" class="c-typography c-typography__variant--h4" data-uid="5f7c265caf43a">
          SubHeading
        </h4><!-- typography.blade.php -->
      </div>

        <div class="c-card__body">
          <!-- typography.blade.php -->
          <p id="" class="c-typography c-typography__variant--p" data-uid="5f7c265caf970">
            Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
          </p>
        </div>
            </div>
</div>
  </div>
</div>

<div class="o-grid">
  <div class="o-grid-4@md">
    @card([
        'classList' => [

            'c-card--accented'
        ]
    ])
      <div class="c-card__header">
        <!-- typography.blade.php -->
        <h2 id="" class="c-typography c-typography__variant--h2" data-uid="5f7c265caf00d">
          Heading
        </h2><!-- typography.blade.php -->
        <h4 id="" class="c-typography c-typography__variant--h4" data-uid="5f7c265caf43a">
          SubHeading
        </h4><!-- typography.blade.php -->
      </div>
        <div class="c-card__image c-card__image--secondary">
          <div class="c-card__image-background" style=
          "background-image:url('https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80');"></div>
        </div>
        <div class="c-card__body">
          <!-- typography.blade.php -->
          <p id="" class="c-typography c-typography__variant--p" data-uid="5f7c265caf970">
            Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
          </p>
        </div>
    @endcard
  </div>
  <div class="o-grid-4@md">
    @card([
        'classList' => [

            'c-card--accented'
        ]
    ])
      <div class="c-card__header">
        <!-- typography.blade.php -->
        <h2 id="" class="c-typography c-typography__variant--h2" data-uid="5f7c265caf00d">
          Heading
        </h2><!-- typography.blade.php -->
        <h4 id="" class="c-typography c-typography__variant--h4" data-uid="5f7c265caf43a">
          SubHeading
        </h4><!-- typography.blade.php -->
      </div>

        <div class="c-card__body">
          <!-- typography.blade.php -->
          <p id="" class="c-typography c-typography__variant--p" data-uid="5f7c265caf970">
            Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
          </p>
        </div>
    @endcard
  </div>
</div>

Flat UI

Gives the card a flat style

Flat UI Cards

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

Flat UI Cards

Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.

<div class="o-grid">
  <div class="o-grid-4@md">
        <!-- card.blade.php -->
<a class="c-card c-card--flat c-card--has-image c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" aria-label="Flat UI Cards - Atoms are the fundemental building blocks." data-uid="6a28eaeb11a4f" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb11ab9" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb11bc6" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb11b92" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb11b5d" data-component="typography">
    Flat UI Cards
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb11c11" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
        
            </div>
</a>
  </div>
  <div class="o-grid-12@md">
        <!-- card.blade.php -->
<a class="c-card c-card--flat c-card--has-image c-card--action c-card--ratio-16-9" href="https://getmunicipio.com" aria-label="Flat UI Cards - Atoms are the fundemental building blocks." data-uid="6a28eaeb11c60" data-component="card">
    <div class="c-card__paint-container">
                <div class="c-card__image-container">
        <!-- image.blade.php -->
     
        <figure class="c-image c-card__image c-image--type-jpg c-image--cover" data-uid="6a28eaeb11cc3" data-component="image">
            <div 
  class="c-image__image-wrapper"
  
>
    <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
></div>                    </figure>
    
</div>
<div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="6a28eaeb11dd5" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6a28eaeb11da3" data-component="group">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="6a28eaeb11d61" data-component="typography">
    Flat UI Cards
</h2>
</div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6a28eaeb11e1f" data-component="typography">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>         </div>
        
            </div>
</a>
  </div>
</div>

<div class="o-grid">
  <div class="o-grid-4@md">
    @card([
        'heading' => 'Flat UI Cards',
        'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
        'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
        'classList' => [
          'c-card--flat'
        ],
        'link' => "https://getmunicipio.com"
    ])
    @endcard
  </div>
  <div class="o-grid-12@md">
    @card([
        'heading' => 'Flat UI Cards',
        'content' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
        'image' => ['src' => 'https://www.w3schools.com/w3css/img_lights.jpg', 'alt' => 'ALT'],
        'classList' => [
          'c-card--flat'
        ],
        'link' => "https://getmunicipio.com"
    ])
    @endcard
  </div>
</div>

API

Parameter	Default	Description
eyebrow		A smaller heading above the primary one
heading		The card heading
subHeading		A subheading below the heading, explaining more stuff.
meta		Small text below title, in meta style.
content		The card content
buttons	[]	Array with buttons that has parameters like href, text and attributeList.
image	false	A url to an image.
ratio	16:9	The ratio of the image
collapsible	false	If the content should be collapsible.
tags		A tags array
link		A hyperlink to another location.
linkText		The text of the link, if not set, the link will not be displayed.
date	false	Preformatted date
dateBadge	false	Display date as a badge. Requires image to be set.
hasPlaceholder	false	If the card should have a placeholder, if the image is missing.
icon	false	An array with the same specification as the icon component
iconBackgroundColor		The background color of the icon
color	default	The background color of the image.
metaFirst	false	If the meta should be displayed before the heading.
headingAboveImage	false	If the headings should be displayed above the image.

CSS API

Variable	Default	Type	Values	Description
--c-card--border-width	var(--border-width)	range	-	Controls the width of card borders and internal dividers.
--c-card--border-radius	var(--border-radius)	range	-	Border Radius
--c-card--space	var(--space)	range	-	Controls padding inside the card and spacing between card elements.
--c-card--color--surface	var(--color--surface)	color	-	Controls the card surface, text contrast, border, and alternate layout colors.
--c-card--color--primary	var(--color--primary)	color	-	Controls highlighted card details, including accent borders and accented header backgrounds.
--c-card--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-card--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-card--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-card--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-card--color--secondary	var(--color--secondary)	color	-	Controls the background shown behind transparent images and SVG illustrations.
--c-card--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-card--color--surface-contrast-muted	var(--color--surface-contrast-muted)	color	-	Derived muted contrast for text and icons on surface backgrounds.
--c-card--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-card--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-card--color--primary-contrast	var(--color--primary-contrast)	color	-	Primary Contrast
--c-card--font-size-200	var(--font-size-200)	range	-	One step above base in the type scale. Equivalent to h6/subtitle.
--c-card--font-size-100	var(--font-size-100)	range	-	Base font size.

Similar components

Code Accordion Brand