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 class="c-card c-card--default c-card--has-image c-card--ratio-4-3" data-uid="6628027a0c6cb">
<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="6628027a0c953">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a0c8f7">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a0c85c">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a0c9bc">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a0ca24">
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--default c-card--has-image c-card--image-first c-card--ratio-4-3" data-uid="6628027a0ca70">
<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="6628027a0cb66">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a0cb37">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a0cb03">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a0cba8">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a0cbea">
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
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="6628027a0d10b">
<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&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>
@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--image-first c-card--ratio-4-3" data-uid="6628027a0d5ea">
<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="6628027a0d5db" aria-label="expand_more" type="button" data-uid="6628027a0db7f">
<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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="expand_more" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6628027a0dbf4">
</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="6628027a0dcc5">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a0dc92">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a0dc5a">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a0dd0f">
SubHeading
</h3> <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="6628027a0d5db">
<!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a0dd58">
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
23
Apr
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--default c-card--has-image c-card--has-datebadge c-card--ratio-4-3" data-uid="6628027a0e32c">
<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="6628027a0e840">
<div class="c-datebadge__daymonth">
<!-- typography.blade.php original: span -->
<span class="c-typography c-datebadge__date c-typography__variant--h1" data-uid="6628027a0e962">
23
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-datebadge__month c-typography__variant--h4" data-uid="6628027a0e9a1">
Apr
</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="6628027a0ea82">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a0ea4f">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a0ea19">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a0eac7">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a0eb0a">
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--default c-card--has-image c-card--image-first c-card--ratio-4-3" data-uid="6628027a0eb53">
<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="6628027a0ec29">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a0ebfc">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a0ebcc">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a0ec69">
SubHeading
</h3> <!-- typography.blade.php original: span -->
<span class="c-typography c-card__date c-typography__variant--meta" data-uid="6628027a0f227">
<!-- icon.blade.php -->
<span class="c-icon c-icon--date-range c-icon--material c-icon--material-date_range material-symbols-outlined material-symbols-outlined--filled c-icon--size-sm" material-symbol="date_range" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="6628027a0f1de">
</span>
2024-04-23 18:48:26
</span> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a0f276">
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
<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--image-first c-card--has-footer c-card--ratio-4-3" data-uid="6628027a0fa48">
<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="6628027a0fb49">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a0fb16">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a0fadd">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a0fb8e">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a0fbd3">
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="6628027a0fa37">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="6628027a10131">
<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="6628027a1018c">
<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'],
'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
<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--image-first c-card--action c-card--ratio-4-3" href="https://helsingborg.se" data-uid="6628027a10626">
<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="6628027a10728">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a106f5">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a106bd">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a1076f">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a107b5">
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
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--has-image c-card--image-first c-card--has-footer c-card--ratio-4-3" data-observe-resizes="" data-uid="6628027a10d19">
<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="6628027a10e19">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a10de6">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a10dae">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a10e5e">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a10ea3">
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="6628027a10cf9">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="6628027a10f3d">
<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="6628027a10f7f">
<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
])
@endcardCard has action
<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--image-first c-card--has-footer c-card--ratio-4-3" data-uid="6628027a11704">
<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="6628027a11800">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a117ce">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a11797">
Heading
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a1184a">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a1188e">
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="6628027a116f4">
<button class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="filled" aria-label="Lets go!" data-uid="6628027a11935">
<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="6628027a11975">
<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'],
'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
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--image-first c-card--ratio-4-3" data-uid="6628027a11f53">
<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="6628027a11f43" aria-label="expand_more" type="button" data-uid="6628027a1200a">
<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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="expand_more" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="6628027a1204f">
</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="6628027a12124">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a120f3">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a120bb">
TEST
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a12168">
SubHeading
</h3> <div class="c-card--collapse" js-toggle-class="c-card--collapse" js-toggle-item="6628027a11f43">
<!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a121ad">
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
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="6628027a12617">
<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="6628027a1265e">
<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&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>
@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
<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--image-first c-card--action c-card--ratio-4-3" href="https://helsingborg.se" data-uid="6628027a12b27">
<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="6628027a12c28">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a12bf5">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a12bbd">
Flat UI Cards
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a12c7c">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a12cc1">
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--image-first c-card--action c-card--ratio-4-3" href="https://helsingborg.se" data-observe-resizes="" data-uid="6628027a12d06">
<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="6628027a12de1">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="6628027a12db2">
<!-- typography.blade.php original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="6628027a12d82">
Flat UI Cards
</h2>
</div>
</div> <!-- typography.blade.php original: h3 -->
<h3 class="c-typography c-typography__variant--h4" data-uid="6628027a12e22">
SubHeading
</h3> <!-- typography.blade.php original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="6628027a12e63">
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'],
'imageFirst' => true,
'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'],
'imageFirst' => true,
'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. |