Card

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

Meta first

Heading

This is the meta (after title)

Tue 28 Apr 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

Tue 28 Apr 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="69f0d112f24e7" 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="69f0d112f25c9" 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="69f0d112f280a" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d112f27cd" 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="69f0d112f26fd" data-component="typography">
    Heading
</h2>        
        
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="69f0d112f2769" 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="69f0d112f2abf" 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="69f0d112f29b3" data-component="icon">
                    </span>
        <time class="c-date" data-date="2026-04-28T15:24:02" datetime="2026-04-28T15:24:02" data-uid="69f0d112f2a78" data-component="date">Tue 28 Apr 2026 </time>
</span>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d112f2b21" 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="69f0d112f2b81" 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="69f0d112f2bed" 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="69f0d112f2c91" 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="69f0d112f2d6a" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d112f2d34" 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="69f0d112f2cfc" 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="69f0d112f2e4d" 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="69f0d112f2dc0" data-component="icon">
                    </span>
        <time class="c-date" data-date="2026-04-28T15:24:02" datetime="2026-04-28T15:24:02" data-uid="69f0d112f2e0b" data-component="date">Tue 28 Apr 2026 </time>
</span>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d112f2e93" 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([
            '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="69f0d112f3366" 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="69f0d112f369b" 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="69f0d112f3714" 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="69f0d112f3964" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d112f3802" 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="69f0d112f37c6" 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="69f0d112f3689" data-toggle-icon="close" aria-pressed="false" aria-label="expand_more" type="button" data-uid="69f0d112f38c8" 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="69f0d112f3916" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>
</div>            <div class="c-card--collapse" data-js-toggle-class="c-card--collapse" data-js-toggle-item="69f0d112f3689">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d112f39bb" 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.

Apr 28

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

Tue 28 Apr 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="69f0d112f3dfe" 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="69f0d112f3e79" 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="69f0d112f3f74" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d112f405a" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d112f3fb3" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d112f3feb" data-component="typography">
    28
</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="69f0d112f4122" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d112f40ee" 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="69f0d112f40b6" 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="69f0d112f419f" 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="69f0d112f41f7" 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="69f0d1130001b" 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="69f0d11300128" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d113000f5" 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="69f0d113000c0" 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="69f0d11300209" 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="69f0d1130017b" data-component="icon">
                    </span>
        <time class="c-date" data-date="2026-04-28T15:24:02" datetime="2026-04-28T15:24:02" data-uid="69f0d113001c7" data-component="date">Tue 28 Apr 2026 </time>
</span>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d11300254" 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.

Apr 28

With image

lorem ipsum dolor sit amet, consectetur adipiscing elit

Apr 28

With Placeholder

lorem ipsum dolor sit amet, consectetur adipiscing elit

Apr 28

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="69f0d1130066c" 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="69f0d113006e5" 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="69f0d1130079a" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d11300839" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d113007d1" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d11300806" data-component="typography">
    28
</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="69f0d113008ff" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d113008c4" 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="69f0d1130088e" 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="69f0d1130094a" 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="69f0d113009a2" 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="69f0d11300a0d" 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="69f0d11300a6c" 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="69f0d11300ae5" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d11300b76" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d11300b15" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d11300b47" data-component="typography">
    28
</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="69f0d11300c2c" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d11300bf9" 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="69f0d11300bc5" 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="69f0d11300c75" 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="69f0d11300cc3" 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="69f0d11300d34" data-component="datebadge">
        <div class="c-element c-datebadge__container" data-uid="69f0d11300dcd" data-component="element">
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--span" data-uid="69f0d11300d63" data-component="typography">
    Apr
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--span" data-uid="69f0d11300d9e" data-component="typography">
    28
</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="69f0d11300e82" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d11300e50" 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="69f0d11300e1b" 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="69f0d11300ecb" 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="69f0d113012c7" 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="69f0d11301341" 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="69f0d11301462" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d1130142a" 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="69f0d113013f0" 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="69f0d113014af" 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="69f0d113012b4">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="69f0d11301525" 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="69f0d11301578" 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="69f0d113019bc" 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="69f0d11301a31" 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="69f0d11301b4e" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d11301b19" 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="69f0d11301ae0" 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="69f0d11301b9b" 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.

Drag the container above, to see the card's container aware feature.

<div style="border: 2px solid; padding: 20px;  width: 70%; resize: horizontal; overflow: auto;">
        <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--has-footer c-card--ratio-16-9" data-uid="69f0d11301fac" 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="69f0d11302028" 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="69f0d1130215b" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d11302113" 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="69f0d113020d8" 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="69f0d113021a8" 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="69f0d11301f99">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="69f0d1130220a" 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="69f0d1130224f" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>        
            </div>
</div>
</div>
    <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--meta" data-uid="69f0d11302295" data-component="typography">
    Drag the container above, to see the card's container aware feature.
</p>

<div style="border: 2px solid; padding: 20px;  width: 70%; resize: horizontal; overflow: auto;">
    @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
</div>
@typography([
    'variant' => 'meta'
])
    Drag the container above, to see the card's container aware feature.
@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="69f0d11302860" 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="69f0d113028de" 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="69f0d11302b7a" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d113029d8" 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="69f0d1130299d" 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="69f0d11302a92" 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="69f0d11302a4a" data-component="icon">
                    </span>
    </div>
</div>            <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d11302be5" 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="69f0d1130284c">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" aria-label="Lets go!" data-uid="69f0d11302c60" 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="69f0d11302cc6" 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="69f0d11303017" 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="69f0d1130309d" 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="69f0d1130328a" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d11303199" 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="69f0d1130315f" 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="69f0d11303003" data-toggle-icon="close" aria-pressed="false" aria-label="expand_more" type="button" data-uid="69f0d113031f8" 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="69f0d11303241" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>
</div>            <div class="c-card--collapse" data-js-toggle-class="c-card--collapse" data-js-toggle-item="69f0d11303003">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69f0d113032dc" 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="69f0d11303703" 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="69f0d11303759" 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="69f0d11303b9c" 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="69f0d11303c1e" 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="69f0d11303d50" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d11303d1a" 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="69f0d11303cdf" 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="69f0d11303d9e" 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="69f0d11303df2" 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="69f0d11303e5a" 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="69f0d11303ff4" data-component="group">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69f0d11303fa1" 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="69f0d11303f4b" 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="69f0d1130407b" 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	-	Size
--c-card--border-radius	var(--border-radius)	range	-	Border Radius
--c-card--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-card--color--surface	var(--color--surface)	color	-	Surface
--c-card--color--primary	var(--color--primary)	color	-	Primary
--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	-	Secondary
--c-card--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--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-300	var(--font-size-300)	range	-	Two steps above base in the type scale. Equivalent to h5.

Similar components

Code Accordion Brand