Cards

Cards are flexible components that let you cleanly display items. Generally, cards should be simple because they will be repeated and they must not be too complicated for users. Each card has a header, body, and footer, it can be vertical or horizontal based on the content and the layout.

Vertical

The card is displayed vertically by default, just add the necessary part and, voilà! we have a vertical card.

Consider using semantic HTML

We can give our card semantic HTML, it is a good practice to use semantic HTML, because it is easier to read and understand both for screen readers and robots.
So we have <header> HTML tag for our the card header and <footer> HTML tag for our card footer. The whole card is wrapped in <article> HTML tag and cards can be inside a parent with <section> HTML tag.

index.html

<article class="card" style="max-width: 320px">
  <header class="card-header">
    <div class="card-badges">
      <a href="#" class="badge style-green">Sundays</a>
      <a href="#" class="badge style-accent">Cards</a>
    </div>

    <img class="card-image" src="https://picsum.photos/200/300" alt="Card image" />
    <h2 class="card-title">Hello, I am a new card</h2>
  </header>

  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis.
  </div>

  <footer class="card-footer">
    <div class="button-group">
      <button class="button bordered style-light-light" aria-label="Like">
        <!-- Like svg ... -->
      </button>
      <button class="button bordered style-light-light" aria-label="Share">
        <!-- Share svg ... -->
      </button>
    </div>

    <a href="#" class="button style-accent push-right">Read more</a>
  </footer>
</article>

Horizontal

By adding the .horizontal class to the .card element, it will be horizontal, also its HTML structure is a little different from vertical.

Limit the card height

It is suggested to set a fixed height or maximum height for the card with the .horizontal class, to prevent the image height affect the height of the card, or you can set a fixed image size.

index.html

<article class="card horizontal" style="max-width: 500px;">
  <header class="card-header">
    <div class="card-badges">
      <a href="#" class="badge style-green">Sundays</a>
      <a href="#" class="badge style-accent">Cards</a>
    </div>
    <img style="height: 200px" class="card-image" src="https://picsum.photos/200/300" alt="Card image" />
  </header>
  <div class="card-right">
    <div class="card-body">
      <h2 class="card-title">Hello, I am a new card</h2>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam
      malesuada erat ut turpis.
    </div>

    <footer class="card-footer">
      <div class="button-group">
        <button class="button bordered style-light-light" aria-label="Like">
          <!-- Like svg ... -->
        </button>
        <button class="button bordered style-light-light" aria-label="Share">
          <!-- Share svg ... -->
        </button>
      </div>

      <a href="#" class="button style-accent push-right">Read more</a>
    </footer>
  </div>
</article>

Sizes

To change the card size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<article class="card size-xs" style="max-width: 200px">...</article>

Colors & customization

You can use color setter helpr classes or change the CSS variables of cards:

--flatify__card-txt-color
--flatify__card-bg-color
--flatify__card-border-color

Here is an example of how to use the variables:

index.html

<article class="card my-custom-card" style="max-width: 320px">...</article>

style.css

.my-custom-card {
  --flatify__card-txt-color: #e6e9ed;
  --flatify__card-bg-color: #d8334a;
  --flatify__card-border-color: #bf263c;
}

We can go further and move the title over the image and use overlay layer for clarifying the title:

index.html

<article class="card my-custom-card" style="max-width: 320px">
  <header class="card-header overlay-layer">
    <div class="card-badges">
      <a href="#" class="badge style-dark-light">Sundays</a>
      <a href="#" class="badge style-dark-light">Cards</a>
    </div>
    <img class="card-image" src="https://picsum.photos/200/300" alt="Card image" />
    <h2 class="card-title">Hello, I am a new card</h2>
  </header>
  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis.
  </div>
</article>

style.css

.my-custom-card {
  --flatify__card-txt-color: #e6e9ed;
  --flatify__card-bg-color: #323133;
  --flatify__card-border-color: #434a54;
  --flatify__overlay-layer-bg-color: linear-gradient(
    40deg,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.08) 50%
  );
  --flatify__overlay-layer-backdrop-filter: blur(5px) brightness(0.75) contrast(0.75);
  --flatify__overlay-layer-priority: 0;
}

.my-custom-card .card-header {
  margin-bottom: 0.5em;
}

.my-custom-card .card-title {
  position: absolute;
  bottom: 0.25em;
  left: 0.75em;
}