Card

@use '@natachah/vanilla-frontend/scss/components/card'

Syntax

The card is using a <div> or an <article> tag with the class .card.

html

<div class="card">Hello there !</div>

css properties

--card-color
--card-background
--card-border-size
--card-border-style
--card-border-color
--card-border-radius
--card-padding-inline
--card-padding-block
--card-divider-size
--card-divider-style
--card-divider-color

Layout

The card can have a <header> and/or <footer> inside to create a more complexe layout.

<article class="card">
    <header>Header</header>
    <p>Content</p>
    <footer>Footer</footer>
</article>

You also can add a <picture> on the top, center or bottom of a card.

To make the picture full width add the class `.flush``

<div class="card">
    <picture class="flush">
        <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
    </picture>
    <h3>Title of the card</h3>
    <p>Content of the card</p>
</div>

The card is compatible with the components group and list.

To make them full width add the class .flush.

<div class="card" style="--card-border-color:#000">
    <h3>Mycard</h3>
    <p>Content of the card</p>
    <div class="group flush">
        <button>Button A</button>
        <button>Button B</button>
    </div>
    <p>Content of the card</p>
    <ul class="list flush">
        <li>List D</li>
        <li><a>List E</a></li>
        <li><span>List F</span><button>Button</button></li>
        <li><a href="#" role="button">List F</a></li>
    </ul>
</div>

Variants

Outline

You can create an outline variation by enable the option and adding the class .outline.

html

<div class="card outline">Hello there !</div>

scss

@use "@natachah/vanilla-frontend/scss/components/card" with (
    $outline: true
);

Color

You can create some color variation by including the colors classes name into the import and then by adding the class as .{COLOR}.

html

<div class="card primary">Hello there !</div><br>
<div class="card outline primary">Hello there !</div>

scss

@use "@natachah/vanilla-frontend/scss/components/card" with (
    $colors: ('primary'),
    $outline: true
);