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.

Image and heading order

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 href="" id="62becae03adfc" class="c-card c-card--default c-card--ratio-4-3" data-uid="62becae03adf5">
    <div class="c-card__image c-card__image--secondary">
    <div class="c-card__image-background c-card__image-background--padded" style="background-image:url('/assets/img/component.svg');"></div>
</div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03b034" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03b02e">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03b0e9" class="c-typography c-typography__variant--h4" data-uid="62becae03b0e5">
    SubHeading
</h4>            <!-- typography.blade.php  -->
<p id="62becae03b197" class="c-typography c-typography__variant--p" data-uid="62becae03b193">
    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 href="" id="62becae03b208" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="62becae03b203">
    <div class="c-card__image c-card__image--secondary">
    <div class="c-card__image-background c-card__image-background--padded" style="background-image:url('/assets/img/component.svg');"></div>
</div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03b2db" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03b2d6">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03b34f" class="c-typography c-typography__variant--h4" data-uid="62becae03b34b">
    SubHeading
</h4>            <!-- typography.blade.php  -->
<p id="62becae03b3c1" class="c-typography c-typography__variant--p" data-uid="62becae03b3bd">
    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' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ]
        ])
        @endcard
    </div>
    <div class="o-grid-4@md">
        @card([
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            'imageFirst' => true,
            '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
            ]
        ])
        @endcard
    </div>
</div>

Only slot

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

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 href="" id="62becae03b65a" class="c-card c-card--panel c-card--highlight c-card--default c-card--ratio-4-3" data-uid="62becae03b655">
    
    <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">
  <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__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>

Card with a collapsible body

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 href="" id="62becae03ba7b" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="62becae03ba76">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
</div><div class="c-card__body">
    <button id="62becae03bed8" class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="62becae03ba68" type="button" aria-pressed="false" data-uid="62becae03bed2">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becae03c006" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becae03bffe">
                    expand_more
            </i>
            </span>
        
        
    </span>
</button>    <!-- typography.blade.php  -->
<h2 id="62becae03c107" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03c102">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03c22e" class="c-typography c-typography__variant--h4" data-uid="62becae03c229">
    SubHeading
</h4>            <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="62becae03ba68">
    <!-- typography.blade.php  -->
<p id="62becae03c2ad" class="c-typography c-typography__variant--p" data-uid="62becae03c2a9">
    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'],
            'imageFirst' => true,
            'dropdown' => [
                'items' => [['text' => 'test', 'link' => 'https://helsingborg.se']],
                'buttonColor' => 'white'
            ]
        ])
        @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.

1 Jul

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

date_range 2022-07-01 12:22:24

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 href="" id="62becae03c810" class="c-card c-card--default c-card--ratio-4-3" data-uid="62becae03c80b">
    <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><!-- datebadge.blade.php -->
<div id="62becae03da80" class="c-datebadge u-position--absolute u-margin--2 c-datebadge--md" data-uid="62becae03da7a">
    <div class="c-datebadge__daymonth">
        <!-- typography.blade.php  -->
<span id="62becae03de3d" class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="62becae03de38">
    1
</span>        <!-- typography.blade.php  -->
<span id="62becae03dead" class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="62becae03dea9">
    Jul
</span>    </div>
    </div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03df51" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03df4d">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03dfbf" class="c-typography c-typography__variant--h4" data-uid="62becae03dfbb">
    SubHeading
</h4>            <!-- typography.blade.php  -->
<p id="62becae03e2e4" class="c-typography c-typography__variant--p" data-uid="62becae03e2de">
    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 href="" id="62becae03e384" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="62becae03e380">
    <div class="c-card__image c-card__image--secondary">
    <div class="c-card__image-background c-card__image-background--padded" style="background-image:url('/assets/img/component.svg');"></div>
</div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03e4be" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03e4b9">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03e52e" class="c-typography c-typography__variant--h4" data-uid="62becae03e52a">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<span id="62becae03e638" class="c-typography c-card__date c-typography__variant--meta" data-uid="62becae03e635">
    <!-- icon.blade.php -->
    <i id="62becae03e5de" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62becae03e5d8">
                    date_range
            </i>
    2022-07-01 12:22:24
</span>    <!-- typography.blade.php  -->
<p id="62becae03e6ad" class="c-typography c-typography__variant--p" data-uid="62becae03e6a9">
    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([
            'heading' => 'Heading',
            'subHeading' => 'SubHeading', 
            'imageFirst' => true,
            '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>

Buttons

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

<div class="o-grid">
    <div class="o-grid-4@md">
        <!-- card.blade.php -->
<div href="" id="62becae03ea95" class="c-card c-card--highlight c-card--default c-card--image-first c-card--has-footer c-card--ratio-4-3" data-uid="62becae03ea90">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
</div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03eb83" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03eb7e">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03ebf3" class="c-typography c-typography__variant--h4" data-uid="62becae03ebef">
    SubHeading
</h4>            <!-- typography.blade.php  -->
<p id="62becae03ec68" class="c-typography c-typography__variant--p" data-uid="62becae03ec64">
    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([
            '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'],
            'imageFirst' => true,
            'dropdown' => [
                'items' => [['text' => 'test']],
                'buttonColor' => 'white'
            ],
            '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.

<div class="o-grid">
    <div class="o-grid-4@md">
        <!-- card.blade.php -->
<a href="https://helsingborg.se" id="62becae03ef30" class="c-card c-card--default c-card--image-first c-card--action c-card--ratio-4-3" data-uid="62becae03ef2b">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
</div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03f021" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03f01d">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03f088" class="c-typography c-typography__variant--h4" data-uid="62becae03f084">
    SubHeading
</h4>            <!-- typography.blade.php  -->
<p id="62becae03f0fc" class="c-typography c-typography__variant--p" data-uid="62becae03f0f9">
    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'],
            'imageFirst' => true,
            'link' => "https://helsingborg.se"
        ])
        @endcard
    </div>
</div>

Container Aware

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

<!-- card.blade.php -->
<div href="" id="62becae03f46e" class="c-card c-card--default c-card--image-first c-card--has-footer c-card--ratio-4-3" data-observe-resizes="" data-uid="62becae03f469">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
</div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03f568" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03f563">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03f5de" class="c-typography c-typography__variant--h4" data-uid="62becae03f5da">
    SubHeading
</h4>            <!-- typography.blade.php  -->
<p id="62becae03f652" class="c-typography c-typography__variant--p" data-uid="62becae03f64e">
    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>
@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'],
    'imageFirst' => true,
    'dropdown' => [
        'items' => [['text' => 'test']],
        'buttonColor' => 'white'
    ],
    'buttons' => [
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
        ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
    ],
    'containerAware' => true

])
@endcard

Card has action

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

<div class="o-grid">
    <div class="o-grid-4@md">
        <!-- card.blade.php -->
<div href="" id="62becae03f947" class="c-card c-card--default c-card--image-first c-card--has-footer c-card--ratio-4-3" data-uid="62becae03f942">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
</div><div class="c-card__body">
        <!-- typography.blade.php  -->
<h2 id="62becae03fa33" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03fa2f">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae03faa5" class="c-typography c-typography__variant--h4" data-uid="62becae03faa1">
    SubHeading
</h4>            <!-- typography.blade.php  -->
<p id="62becae03fb16" class="c-typography c-typography__variant--p" data-uid="62becae03fb12">
    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([
            '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'],
            'imageFirst' => true,
            "hasAction" => true,
            'dropdown' => [
                'items' => [['text' => 'test']],
                'buttonColor' => 'white'
            ],
            'buttons' => [
                    ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!'],
                    ['type' => 'filled', 'color' => 'primary', 'text' => 'Lets go!']
                ]
        ])
        @endcard
    </div>
</div>

Hightlight Card

A modifier to highlight the card.

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 href="" id="62becae03fdfd" class="c-card c-card--highlight c-card--default c-card--image-first c-card--ratio-4-3" data-uid="62becae03fdf9">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://www.w3schools.com/w3css/img_lights.jpg');"></div>
</div><div class="c-card__body">
    <button id="62becae03ff30" class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="62becae03fdec" type="button" aria-pressed="false" data-uid="62becae03ff29">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62becae03ff90" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becae03ff8b">
                    expand_more
            </i>
            </span>
        
        
    </span>
</button>    <!-- typography.blade.php  -->
<h2 id="62becae03fff4" class="c-typography c-card__heading c-typography__variant--h3" data-uid="62becae03fff1">
    TEST
</h2>    <!-- typography.blade.php  -->
<h4 id="62becae040049" class="c-typography c-typography__variant--h4" data-uid="62becae040046">
    SubHeading
</h4>            <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="62becae03fdec">
    <!-- typography.blade.php  -->
<p id="62becae0400b6" class="c-typography c-typography__variant--p" data-uid="62becae0400b2">
    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'],
        'imageFirst' => true,
        'dropdown' => [
            'items' => [['text' => 'test', 'link' => 'https://helsingborg.se']],
            'buttonColor' => 'white'
        ],
        'classList' => [
          'c-card--highlight'
        ]
    ])
    @endcard
  </div>
</div>

Accent

Gives the card a more plain styling with accent colors

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 href="" id="62becae040383" class="c-card c-card--accented c-card--default c-card--ratio-4-3" data-uid="62becae04037f">
    
    <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 href="" id="62becae0403fa" class="c-card c-card--accented c-card--default c-card--ratio-4-3" data-uid="62becae0403f6">
    
    <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>

Blade component parameters

Key Default value Type Available values Description
heading string - -
subHeading string - -
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.
padded false boolean - -
imageFirst false boolean - -
dropdown false boolean - Array with the dropdown parameters as items as an array, direction: top, right, bottom, left, position: top, bottom
image false boolean - A url to a image.
toggleItem string - -
toggleClass string - -
collapsible false boolean - -
hidden string - -
paddedImage string - -
color default string - -
tags NULL - -
link string - A hyperlink to another location.
ratio 4:3 string - The ratio of the image
date false boolean - Preformatted date
dateBadge false boolean - Display date as a badge. Requires image to be set.
hasFooter false boolean - Inidcate if the card has a footer section.
hasPlaceholder false boolean - -
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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Card/card.json