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();