Cards

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images,
should be placed on them in a way that clearly indicates hierarchy.

Meta first

ALT

Heading

SubHeading This is the meta (after title)
2025-01-18 01:56:07

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

ALT
This is the meta (before title)

123 AVC Heading

SubHeading
2025-01-18 01:56:07

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="678b0a371fa41">
    <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="678b0a371fafe">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="/assets/img/component.svg" 
    alt="ALT"
    
/>                    </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="678b0a371fd20">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a371fce8">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a371fbfd">
    Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a371fc3c">
    SubHeading
</span>        
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="678b0a371fc90">
    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="678b0a371fe97">
    <!-- 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" material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0a371fe4e">
                    </span>
    2025-01-18 01:56:07
</span>    <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a371feea">
    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 class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-uid="678b0a371ff48">
    <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="678b0a371ffa1">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="/assets/img/component.svg" 
    alt="ALT"
    
/>                    </figure>
    </div>
<div class="c-card__body">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="678b0a372002b">
    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="678b0a3720100">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a37200d0">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a3720071">
    123 AVC Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a372009f">
    SubHeading
</span>
</div>
</div>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="678b0a3720185">
    <!-- 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" material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0a372014c">
                    </span>
    2025-01-18 01:56:07
</span>    <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a37201c6">
    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">
    <div class="o-grid-4@md">
        @card([
            'color' => 'primary',
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            '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',
            'subHeading' => 'SubHeading', 
            '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

Heading

SubHeading

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="678b0a372024a">
        <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 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

ALT

Heading

SubHeading

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="678b0a37202ba">
    <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="678b0a3720319">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a3720518">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a372040b">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a37203a7">
    Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a37203db">
    SubHeading
</span>
</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" target="_top" js-toggle-trigger="678b0a37202af" data-toggle-icon="close" aria-pressed="false" aria-label="expand_more" type="button" data-uid="678b0a372048e">   
     <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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="678b0a37204d3">
                    </span>
            </span>
        
        
    </span> </button>
</div>        <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="678b0a37202af">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3720561">
    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([
            'collapsible' => true,
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            '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

ALT
18 Jan

Heading

SubHeading

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

ALT

123 AVC Heading

SubHeading
2025-01-18 01:56:07

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="678b0a37205e4">
    <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="678b0a372063c">
            <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"
    
/>                    </figure>
    </div>
<div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md" data-uid="678b0a3720714">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="678b0a372074c">
    18
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="678b0a372077c">
    Jan
</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="678b0a3720852">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3720822">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a37207c6">
    Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a37207f3">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3720895">
    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 class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--has-image c-card--ratio-16-9" data-uid="678b0a37208da">
    <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="678b0a3720930">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="/assets/img/component.svg" 
    alt="ALT"
    
/>                    </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="678b0a3720a48">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3720a15">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a37209b8">
    123 AVC Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a37209e6">
    SubHeading
</span>
</div>
</div>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="678b0a3720ae0">
    <!-- 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" material-symbol="date_range" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0a3720a98">
                    </span>
    2025-01-18 01:56:07
</span>    <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3720b25">
    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">
    <div class="o-grid-4@md">
        @card([
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            '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',
            'subHeading' => 'SubHeading', 
            '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

ALT
18 Jan

With image

SubHeading

lorem ipsum dolor sit amet, consectetur adipiscing elit

18 Jan

With Placeholder

SubHeading

lorem ipsum dolor sit amet, consectetur adipiscing elit

18 Jan

Without image

SubHeading

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-observe-resizes="" data-uid="678b0a3720bb6">
    <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="678b0a3720c13">
            <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"
    
/>                    </figure>
    </div>
<div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md" data-uid="678b0a3720ca8">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="678b0a3720cd9">
    18
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="678b0a3720d0b">
    Jan
</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="678b0a3720de6">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3720db4">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a3720d54">
    With image
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a3720d83">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3720e2b">
    lorem ipsum dolor sit amet, consectetur adipiscing elit
</p> </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-observe-resizes="" data-uid="678b0a3720e75">
    <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-a11y-error="Alt text is missing" data-uid="678b0a3720ed6">
                    <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" material-symbol="broken_image" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0a3720f41">
                    </span>
          </div>
            </figure>
</div>
<div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md" data-uid="678b0a3720fb1">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="678b0a3720fe1">
    18
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="678b0a3721013">
    Jan
</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="678b0a37210eb">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a37210bc">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a372105c">
    With Placeholder
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a372108b">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3721130">
    lorem ipsum dolor sit amet, consectetur adipiscing elit
</p> </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-observe-resizes="" data-uid="678b0a372117c">
    <div class="c-card__body">
    <!-- datebadge.blade.php -->
<div class="c-datebadge c-card__datebadge c-datebadge--md" data-uid="678b0a37211e6">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="678b0a3721212">
    18
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="678b0a3721245">
    Jan
</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="678b0a3721332">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a37212ff">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a372128e">
    Without image
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a37212cf">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3721376">
    lorem ipsum dolor sit amet, consectetur adipiscing elit
</p> </div>    
    </div>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'heading' => 'With image',
            'subHeading' => 'SubHeading', 
            '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,
            'containerAware' => true
        ])
        @endcard
    </div>
    <div class="o-grid-4@md">
        @card([
            'heading' => 'With Placeholder',
            'subHeading' => 'SubHeading', 
            'content' => 'lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'image' => null,
            'date' => date('Y-m-d H:i:s'),
            'dateBadge' => true,
            'hasPlaceholder' => true,
            'containerAware' => true
        ])
        @endcard
    </div>
    <div class="o-grid-4@md">
        @card([
            'heading' => 'Without image',
            'subHeading' => 'SubHeading', 
            'content' => 'lorem ipsum dolor sit amet, consectetur adipiscing elit',
            'image' => null,
            'date' => date('Y-m-d H:i:s'),
            'dateBadge' => true,
            'containerAware' => true
        ])
        @endcard
    </div>
</div>

Buttons

ALT

Heading

SubHeading

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="678b0a37213fd">
    <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="678b0a3721459">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a3721584">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3721552">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a37214ed">
    Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a372151f">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a37215c9">
    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" js-toggle-class="u-display--none" js-toggle-item="678b0a37213f1">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="678b0a3721629">   
     <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" target="_top" type="filled" aria-label="Lets go!" data-uid="678b0a3721665">   
     <span class="c-button__label">                 
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>    
    </div>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'collapsible' => false,
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            '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

ALT

Heading

SubHeading

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://helsingborg.se" data-uid="678b0a37216f2">
    <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="678b0a3721749">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a3721867">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3721837">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a37217d7">
    Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a3721808">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a37218a8">
    Linked card is not compatible with either dropdown or buttons. Markup will break if used togheter.
</p> </div>    
    </a>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            '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://helsingborg.se"
        ])
        @endcard
    </div>
</div>

Container Aware

ALT

Heading

SubHeading

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-observe-resizes="" data-uid="678b0a3721925">
    <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="678b0a3721979">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a3721a9a">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3721a6a">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a3721a05">
    Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a3721a34">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3721adc">
    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" js-toggle-class="u-display--none" js-toggle-item="678b0a3721919">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="678b0a3721b2b">   
     <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" target="_top" type="filled" aria-label="Lets go!" data-uid="678b0a3721b66">   
     <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="678b0a3721ba5">
    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',
        'subHeading' => 'SubHeading', 
        '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!']
        ],
        'containerAware' => true

    ])
    @endcard
</div>
@typography([
    'variant' => 'meta'
])
    Drag the container above, to see the card's container aware feature.
@endtypography

Card has action

ALT

Heading

SubHeading

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="678b0a3721c1d">
    <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="678b0a3721c72">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a3721ea0">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3721d5e">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a3721cff">
    Heading
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a3721d2e">
    SubHeading
</span>
</div>        <!-- inlineCssWrapper.blade.php -->
    <div class="c-inlinecsswrapper  u-rounded--full u-detail-shadow-3" style="background-color: #eee; display: flex;" data-uid="678b0a3721e2f">
        <!-- 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" material-symbol="settings" style="color:#000;stroke:#000;" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="678b0a3721db8">
                    </span>
    </div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3721eea">
    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" js-toggle-class="u-display--none" js-toggle-item="678b0a3721c0e">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="678b0a3721f40">   
     <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" target="_top" type="filled" aria-label="Lets go!" data-uid="678b0a3721f80">   
     <span class="c-button__label">                 
                    <span class="c-button__label-text ">
                Lets go!
            </span>
        
    </span> </button>         
        
    </div>    
    </div>
    </div>
</div>
<div class="o-grid">
    <div class="o-grid-4@md">
        @card([
            'collapsible' => false,
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            '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', 'backgroundColor' => '#eee', 'customColor' => '#000', 'size' => 'md'],
        ])
        @endcard
    </div>
</div>

Hightlight Card

ALT

TEST

SubHeading

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="678b0a3722010">
    <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="678b0a372206d">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a372224f">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a3722169">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a3722102">
    TEST
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a3722136">
    SubHeading
</span>
</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" target="_top" js-toggle-trigger="678b0a3722003" data-toggle-icon="close" aria-pressed="false" aria-label="expand_more" type="button" data-uid="678b0a37221b8">   
     <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" material-symbol="expand_more" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="678b0a37221fc">
                    </span>
            </span>
        
        
    </span> </button>
</div>        <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="678b0a3722003">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a372229b">
    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([
        'collapsible' => true,
        'heading' => 'TEST',
        'subHeading' => 'SubHeading', 
        '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

Heading

SubHeading

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

Heading

SubHeading

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="678b0a372231d">
        <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 class="o-grid-4@md">
        <!-- card.blade.php -->
<div class="c-card c-card--accented c-card--ratio-16-9" data-uid="678b0a3722356">
        <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 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

ALT

Flat UI Cards

SubHeading

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

ALT

Flat UI Cards

SubHeading

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://helsingborg.se" data-uid="678b0a37223c8">
    <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="678b0a3722421">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a372254c">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a372251c">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a37224b5">
    Flat UI Cards
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a37224e9">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a3722591">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p> </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://helsingborg.se" data-observe-resizes="" data-uid="678b0a37225d8">
    <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="678b0a372263a">
            <img
    loading="lazy" 
    class="c-image__image" 
    src="https://www.w3schools.com/w3css/img_lights.jpg" 
    alt="ALT"
    
/>                    </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="678b0a372275d">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="678b0a372272c">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="678b0a37226c9">
    Flat UI Cards
</h2>        
                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__sub-heading u-margin__y--0 c-typography__variant--h6" data-uid="678b0a37226fa">
    SubHeading
</span>
</div>
</div>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="678b0a37227a2">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p> </div>    
    </a>
  </div>
</div>
<div class="o-grid">
  <div class="o-grid-4@md">
    @card([
        'heading' => 'Flat UI Cards',
        'subHeading' => 'SubHeading', 
        '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://helsingborg.se"
    ])
    @endcard
  </div>
  <div class="o-grid-12@md">
    @card([
        'heading' => 'Flat UI Cards',
        'subHeading' => 'SubHeading', 
        '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'
        ],
        'containerAware' => true,
        'link' => "https://helsingborg.se"
    ])
    @endcard
  </div>
</div>

Blade component parameters

Key Default value Type Available values Description
heading string - The card heading
subHeading string - A subheading below the heading, explaining more stuff.
meta string - Small text below title, in meta style.
content string - The card content
buttons [] array - Array with buttons that has parameters like href, text and attributeList.
image false boolean - A url to an image.
ratio 16:9 string - The ratio of the image
collapsible false boolean - If the content should be collapsible.
tags NULL - A tags array
link string - A hyperlink to another location.
date false boolean - Preformatted date
dateBadge false boolean - Display date as a badge. Requires image to be set.
hasPlaceholder false boolean - If the card should have a placeholder, if the image is missing.
icon false boolean - An array with the same specification as the icon component
color default string - The background color of the image.
metaFirst false boolean - If the meta should be displayed before the heading.
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Card/card.json