card

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read more

<div class="card">
  <div class="body">
    <img class="img" src="..." alt="..." />
    <h3 class="title">Heading</h3>
    <p class="text">
      Lorem ipsum <span class="link">dolor</span> sit amet, consectetur
      adipiscing elit.
    </p>
    <button class="btn w-full secondary">Read more</button>
  </div>
</div>

moving img tag outside body class for another styling

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read more

<div class="card">
  <img class="img" src="..." alt="..." />
  <div class="body">
    <h3 class="title">Heading</h3>
    <p class="text">
      Lorem ipsum <span class="link">dolor</span> sit amet, consectetur
      adipiscing elit.
    </p>
    <button class="btn w-full secondary">Read more</button>
  </div>
</div>

usage

section import

@use "~" as * with (
  $base-components: true,
);

Individual Import

@use "~" as * with (
  $components: (
    base: (
      card: ture,
    ),
  ),
);

mixin

@use "~" as * with (
  $a-var: "",
);

@include cardBase();