title: Card Deck
name: card-deck
variants:
  - name: mini-cards
    title: Mini cards
    notes: When less than 6 mini cards are displayed, the cards are centered in the row.
  - name: duo
    title: Duo
  - name: duo-gray
    title: Duo with gray background
    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
    wrapper: bg-gray-100 py-4 my-4
  - name: single
    title: Single
  - name: single-gray
    title: Single with gray background
    wrapper: bg-gray-100 py-4 my-4
    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
  - name: link-duo
    title: Link Duo
  - name: link-duo-gray
    title: Link Duo with gray background
    wrapper: bg-gray-100 py-4 my-4
    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
  - name: link-single
    title: Link Single
  - name: link-single-gray
    title: Link Single with gray background
    wrapper: bg-gray-100 py-4 my-4
    notes: When wrapped into a container with the class `.bg-gray-100`, the card deck lines will appear darker and cards will get a correct background color / border color to avoid lines touching them.
notes: |
  This component allows you to display multiple cards side by side, in a set of equal width and height. You just have to wrap cards inside of a `.card-deck` component.

  Add the `.card-deck-line` class to the container, when you want to display 1 or 2 cards only, to add a visual touch on desktop helping readability

  Add the `.mini-cards` class to the container to display a row of 6 mini cards.