title: Card
name: card
wrapper: col-md-6
variants:
  - name: link
    title: Full Link
  - name: inside-links
    title: Inside Links
notes: |
  The card component is the component to use for all the card-looking elements. Classes can extend it to adapt its look and feel based on the needs.

  A card can be a full link or not, see examples below.

  Use `.card-header` inside a `.card-body` to display meta info (See [press release](/#/content-types/news)) like **Category** + **date** spread out left and right.

  Add `.card-distinction` to the `.card` wrapper to display a red ribbon in the card body.

  Use `.card-info` to display meta information separated by `›`. **It must only contain `<span>` elements.**
  With the `.card-info-bordered` modifier, add a border to top and bottom of this area. Add the `.card-info-border-sm` modifier to reduce the inner padding.

  Use `.card-overlay` and `.card-img-overlay` to have a full image card.

  You can reduce the padding in the card body by adding the `.card-sm` class to the card.