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 id="61efa7aec43f2" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec43ed">
    <div id="61efa7aec417a" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec4177">
    <!-- card.blade.php -->
<div href="" id="61efa7aec3e14" class="c-card c-card--default c-card--ratio-4-3" data-uid="61efa7aec3e0f">
    <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="61efa7aec3fb9" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec3fb6">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec404a" class="c-typography c-typography__variant--h4" data-uid="61efa7aec4047">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec40e4" class="c-typography c-typography__variant--p" data-uid="61efa7aec40e0">
    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 id="61efa7aec43aa" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec43a7">
    <!-- card.blade.php -->
<div href="" id="61efa7aec41cd" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="61efa7aec41ca">
    <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="61efa7aec428b" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec4289">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec42f1" class="c-typography c-typography__variant--h4" data-uid="61efa7aec42ee">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec4354" class="c-typography c-typography__variant--p" data-uid="61efa7aec4351">
    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>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
    @endgrid

    @grid([])
        @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
    @endgrid
@endgrid

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.

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

<div id="61efa7aec47aa" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec47a5">
    <div id="61efa7aec4761" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec475e">
    <!-- card.blade.php -->
<div href="" id="61efa7aec470d" class="c-card c-card--panel c-card--highlight c-card--default c-card--ratio-4-3" data-uid="61efa7aec4707">
    
    <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>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
    @endgrid
@endgrid

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 id="61efa7aec54f9" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec54f5">
    <div id="61efa7aec54ad" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec54ab">
    <!-- card.blade.php -->
<div href="" id="61efa7aec4ae7" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="61efa7aec4ae4">
    <div class="c-card__image c-card__image--white">
    <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="61efa7aec51e70.11350485" class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="61efa7aec4ad7" type="button" aria-pressed="false" data-uid="61efa7aec5202">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efa7aec52cb" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa7aec52c6">
                    expand_more
            </i>
        
                    
            
    </span>
</button>    <!-- typography.blade.php  -->
<h2 id="61efa7aec535e" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec535b">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec53cc" class="c-typography c-typography__variant--h4" data-uid="61efa7aec53c9">
    SubHeading
</h4>        <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="61efa7aec4ad7">
    <!-- typography.blade.php  -->
<p id="61efa7aec5434" class="c-typography c-typography__variant--p" data-uid="61efa7aec5431">
    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>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
    @endgrid
@endgrid

Card images

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.

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.

<div id="61efa7aec5d57" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec5d52">
    <div id="61efa7aec5aee" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec5aeb">
    <!-- card.blade.php -->
<div href="" id="61efa7aec58ec" class="c-card c-card--default c-card--ratio-4-3" data-uid="61efa7aec58e8">
    <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  -->
<h2 id="61efa7aec59ce" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec59cb">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec5a35" class="c-typography c-typography__variant--h4" data-uid="61efa7aec5a33">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec5a98" class="c-typography c-typography__variant--p" data-uid="61efa7aec5a95">
    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 id="61efa7aec5d10" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec5d0e">
    <!-- card.blade.php -->
<div href="" id="61efa7aec5b38" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="61efa7aec5b35">
    <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="61efa7aec5bf3" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec5bf1">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec5c5b" class="c-typography c-typography__variant--h4" data-uid="61efa7aec5c59">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec5cbe" class="c-typography c-typography__variant--p" data-uid="61efa7aec5cbb">
    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>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
            ]
        ])
        @endcard
    @endgrid

        
    @grid([])
        @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
    @endgrid
@endgrid

Buttons

Heading

SubHeading

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

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

<div id="61efa7aec689a" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec6896">
    <div id="61efa7aec684f" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec684c">
    <!-- card.blade.php -->
<div href="" id="61efa7aec60fd" class="c-card c-card--highlight c-card--default c-card--image-first c-card--ratio-4-3" data-uid="61efa7aec60f9">
    <div class="c-card__image c-card__image--white">
    <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="61efa7aec61e3" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec61df">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec624d" class="c-typography c-typography__variant--h4" data-uid="61efa7aec624b">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec62b4" class="c-typography c-typography__variant--p" data-uid="61efa7aec62b1">
    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="61efa7aec60eb">
                        <button id="61efa7aec676d7.14494021" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efa7aec677d">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Lets go!
            </span>
        
                    
            
    </span>
</button>                    <button id="61efa7aec67d16.26028516" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efa7aec67e9">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Lets go!
            </span>
        
                    
            
    </span>
</button>         
        
    </div>
    
</div>
</div>
</div>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
    @endgrid
@endgrid

Linked card

Links whole card.

<div id="61efa7aec6e14" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec6e10">
    <div id="61efa7aec6dcc" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec6dc9">
    <!-- card.blade.php -->
<a href="https://helsingborg.se" id="61efa7aec6bbf" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="61efa7aec6bbb">
    <div class="c-card__image c-card__image--white">
    <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="61efa7aec6ca5" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec6ca2">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec6d10" class="c-typography c-typography__variant--h4" data-uid="61efa7aec6d0d">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec6d76" class="c-typography c-typography__variant--p" data-uid="61efa7aec6d73">
    Linked card is not compatible with either dropdown or buttons. Markup will break if used togheter.
</p>
    </div>
    
</a>
</div>
</div>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
    @endgrid
@endgrid

Container Aware

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.

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

<!-- card.blade.php -->
<div href="" id="61efa7aec7121" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-observe-resizes="" data-uid="61efa7aec711d">
    <div class="c-card__image c-card__image--white">
    <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="61efa7aec720a" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec7206">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec7275" class="c-typography c-typography__variant--h4" data-uid="61efa7aec7272">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec72e8" class="c-typography c-typography__variant--p" data-uid="61efa7aec72e5">
    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="61efa7aec710f">
                        <button id="61efa7aec73990.76605029" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efa7aec73ab">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Lets go!
            </span>
        
                    
            
    </span>
</button>                    <button id="61efa7aec74005.15076214" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efa7aec740c">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Lets go!
            </span>
        
                    
            
    </span>
</button>         
        
    </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

Heading

SubHeading

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

chevron_right

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

<div id="61efa7aec7b7d" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec7b79">
    <div id="61efa7aec7b34" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec7b32">
    <!-- card.blade.php -->
<div href="" id="61efa7aec77d6" class="c-card c-card--default c-card--image-first c-card--action c-card--ratio-4-3" data-uid="61efa7aec77d2">
    <div class="c-card__image c-card__image--white">
    <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="61efa7aec78bd" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec78b9">
    Heading
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec7926" class="c-typography c-typography__variant--h4" data-uid="61efa7aec7924">
    SubHeading
</h4>        <!-- typography.blade.php  -->
<p id="61efa7aec798c" class="c-typography c-typography__variant--p" data-uid="61efa7aec7989">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>
        <!-- icon.blade.php -->
    <i id="61efa7aec79d8" class="c-icon c-card__action c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa7aec79d4">
                    chevron_right
            </i>
    </div><div class="c-card__footer" js-toggle-class="u-display--none" js-toggle-item="61efa7aec77c4">
                        <button id="61efa7aec7a6b7.86966166" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efa7aec7a7a">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Lets go!
            </span>
        
                    
            
    </span>
</button>                    <button id="61efa7aec7ac88.85074624" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" aria-pressed="false" data-uid="61efa7aec7ad3">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Lets go!
            </span>
        
                    
            
    </span>
</button>         
        
    </div>
    
</div>
</div>
</div>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
    @endgrid
@endgrid

Hightlight 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.

A modifier to highlight the card.

<!-- card.blade.php -->
<div href="" id="61efa7aec7def" class="c-card c-card--highlight c-card--default c-card--image-first c-card--ratio-4-3" data-uid="61efa7aec7dec">
    <div class="c-card__image c-card__image--white">
    <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="61efa7aec7ed46.42821683" class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="61efa7aec7dde" type="button" aria-pressed="false" data-uid="61efa7aec7ee3">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efa7aec7f36" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa7aec7f33">
                    expand_more
            </i>
        
                    
            
    </span>
</button>    <!-- typography.blade.php  -->
<h2 id="61efa7aec7fbb" class="c-typography c-card__heading c-typography__variant--h3" data-uid="61efa7aec7fb8">
    TEST
</h2>    <!-- typography.blade.php  -->
<h4 id="61efa7aec8033" class="c-typography c-typography__variant--h4" data-uid="61efa7aec8030">
    SubHeading
</h4>        <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="61efa7aec7dde">
    <!-- typography.blade.php  -->
<p id="61efa7aec809a" class="c-typography c-typography__variant--p" data-uid="61efa7aec8097">
    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>
@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

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.

Gives the card a more plain styling with accent colors

<div id="61efa7aec8528" class="c-grid c-grid__container c-grid__container__gap__col--5 c-grid__container__gap__row--5" style="grid-template-columns: repeat(auto-fit, minmax(300px, 400px));" data-uid="61efa7aec8523">
    <div id="61efa7aec843e" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec843b">
    <!-- card.blade.php -->
<div href="" id="61efa7aec83eb" class="c-card c-card--accented c-card--default c-card--ratio-4-3" data-uid="61efa7aec83e7">
    
    <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 id="61efa7aec84e2" class="c-grid c-grid__container__gap__col--0 c-grid__container__gap__row--0" data-uid="61efa7aec84df">
    <!-- card.blade.php -->
<div href="" id="61efa7aec8497" class="c-card c-card--accented c-card--default c-card--ratio-4-3" data-uid="61efa7aec8495">
    
    <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>
@grid([
    "container" => true,
    "columns" => "auto-fit",
    "min_width" => "300px",
    "max_width" => "400px",
    "col_gap" => 5,
    "row_gap" => 5
])
    @grid([])
        @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
    @endgrid


    @grid([])
        @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
    @endgrid
@endgrid

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.
hasAction false boolean - Adds indicator that the card has an action (i.e. a link)
ratio 4:3 string - The ratio of the image
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