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

Heading

This is the meta (after title)

SubHeading

2024-11-21 06:31:25

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

This is the meta (before title)

123 AVC Heading

SubHeading

2024-11-21 06:31:25

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--primary c-card--has-image c-card--ratio-4-3" data-uid="673ed3bde6a16">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde6bf6">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde6bb1">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde6af8">
    Heading
</h2>
        <!-- typography.blade.php   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="673ed3bde6b52">
    This is the meta (after title)
</span>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde6c45">
    SubHeading
</h3>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="673ed3bde6d78">
    <!-- 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="673ed3bde6d34">
                    </span>
    2024-11-21 06:31:25
</span>    <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde6dd4">
    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--primary c-card--has-image c-card--meta-first c-card--ratio-4-3" data-uid="673ed3bde6e21">
    <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   original: span -->
<span class="c-typography c-typography__variant--meta" data-uid="673ed3bde6e95">
    This is the meta (before title)
</span>    <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde6f41">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde6f11">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde6ee2">
    123 AVC Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde6f80">
    SubHeading
</h3>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="673ed3bde6fff">
    <!-- 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="673ed3bde6fc9">
                    </span>
    2024-11-21 06:31:25
</span>    <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde703e">
    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--default c-card--image-first c-card--ratio-4-3" data-uid="673ed3bde7297">
        <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

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--default c-card--has-image c-card--ratio-4-3" data-uid="673ed3bde7546">
    <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 class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" js-toggle-trigger="673ed3bde753c" aria-label="expand_more" type="button" data-uid="673ed3bde75eb">   
     <span class="c-button__label">         
                    <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="673ed3bde762b">
                    </span>
            </span>
        
        
    </span> </button>        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde76e5">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde76ba">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde768a">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde7721">
    SubHeading
</h3>        <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="673ed3bde753c">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde775e">
    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

21 Nov

Heading

SubHeading

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

123 AVC Heading

SubHeading

2024-11-21 06:31:25

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--default c-card--has-image c-card--has-datebadge c-card--ratio-4-3" data-uid="673ed3bde7963">
    <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 class="c-datebadge c-card__datebadge c-datebadge--md" data-uid="673ed3bde7a05">
    <div class="c-datebadge__daymonth">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="673ed3bde7a39">
    21
</span>            <!-- typography.blade.php   original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="673ed3bde7a74">
    Nov
</span>    </div>
    </div><div class="c-card__body">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde7b26">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde7afa">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde7acb">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde7b64">
    SubHeading
</h3>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde7ba1">
    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--primary c-card--has-image c-card--ratio-4-3" data-uid="673ed3bde7be2">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde7caa">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde7c7f">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde7c53">
    123 AVC Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde7ce5">
    SubHeading
</h3>    <!-- typography.blade.php   original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="673ed3bde7d60">
    <!-- 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="673ed3bde7d2b">
                    </span>
    2024-11-21 06:31:25
</span>    <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde7d9c">
    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>

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. 

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- card.blade.php -->
<div class="c-card c-card--highlight c-card--default c-card--has-image c-card--has-footer c-card--ratio-4-3" data-uid="673ed3bde800f">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde80e6">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde80bd">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde808e">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde8120">
    SubHeading
</h3>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde815c">
    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="673ed3bde8003">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="673ed3bde81b2">   
     <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="673ed3bde81e9">   
     <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

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--default c-card--has-image c-card--action c-card--ratio-4-3" href="https://helsingborg.se" data-uid="673ed3bde844e">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde8524">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde84f5">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde84c6">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde8562">
    SubHeading
</h3>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde859f">
    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

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--default c-card--has-image c-card--has-footer c-card--ratio-4-3" data-observe-resizes="" data-uid="673ed3bde87ad">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde8871">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde8848">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde881c">
    Heading
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde88ab">
    SubHeading
</h3>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde88e4">
    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="673ed3bde87a1">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="673ed3bde892d">   
     <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="673ed3bde8962">   
     <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="673ed3bde8998">
    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

Heading


Warning: The parameter "backgroundColor" is not recognized in the component "icon" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231

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--default c-card--has-image c-card--has-footer c-card--ratio-4-3" data-uid="673ed3bde8bbd">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde8dc5">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde8c61">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde8c32">
    Heading
</h2>
</div>    <!-- inlineCssWrapper.blade.php -->
    <div class="c-inlinecsswrapper  u-rounded--full u-detail-shadow-3" style="background-color: #eee; display: flex;" data-uid="673ed3bde8d7f">
        <br />
<b>Warning</b>:  The parameter <b>"backgroundColor"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<!-- 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="673ed3bde8cfb">
                    </span>
    </div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde8e15">
    SubHeading
</h3>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde8e52">
    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="673ed3bde8bb0">
                            <button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="673ed3bde8e9e">   
     <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="673ed3bde8ed4">   
     <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

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--default c-card--has-image c-card--ratio-4-3" data-uid="673ed3bde9103">
    <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 class="c-button c-card__title-expand-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" js-toggle-trigger="673ed3bde90f8" aria-label="expand_more" type="button" data-uid="673ed3bde9177">   
     <span class="c-button__label">         
                    <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="673ed3bde91af">
                    </span>
            </span>
        
        
    </span> </button>        <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde9261">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde9237">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde9209">
    TEST
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde929b">
    SubHeading
</h3>        <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="673ed3bde90f8">
        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde92d6">
    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--default c-card--image-first c-card--ratio-4-3" data-uid="673ed3bde94e4">
        <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--default c-card--image-first c-card--ratio-4-3" data-uid="673ed3bde9514">
        <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

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.

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--default c-card--has-image c-card--action c-card--ratio-4-3" href="https://helsingborg.se" data-uid="673ed3bde9574">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde9644">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde961a">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde95ee">
    Flat UI Cards
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde967d">
    SubHeading
</h3>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde96b7">
    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--default c-card--has-image c-card--action c-card--ratio-4-3" href="https://helsingborg.se" data-observe-resizes="" data-uid="673ed3bde96f0">
    <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">
                <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="673ed3bde97a9">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="673ed3bde9781">
    <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="673ed3bde9758">
    Flat UI Cards
</h2>
</div>
</div>    <!-- typography.blade.php   original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="673ed3bde97e1">
    SubHeading
</h3>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="673ed3bde982b">
    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 - -
subHeading string - -
meta string - Small text below title, in meta style.
metaFirst false boolean - -
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 - -
postId false boolean - ID of a post
postType string - -
icon false boolean - An array with the same specification as the icon component
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