Card Teaser

General

Card Image Title

Blog Post Headline Goes Here and Is Two Lines Long

23 July 2015 | by Name Lastname

Lorem ipsum dolor sit amet, consectetur adipiscing semper. Maecenas nulla lectus, viverra a augue...

Read More
Card Image Title

Blog Post Headline Goes Here and Is Two Lines Long

23 July 2015 | by Name Lastname

Lorem ipsum dolor sit amet. Maecenas nulla lectus, viverra a augue...

Read More
Card Image Title

Blog Post Headline Goes Here and Is Two Lines Long

23 July 2015 | by Name Lastname

Lorem ipsum dolor sit amet, consectetur adipiscing semper. Maecenas nulla lectus, viverra a augue...

Read More

Cards can be used universally throughout the site for multiple content purposes.

  • Images should be wrapped in a .card__image element.
  • All content (title, post info, description, and link) should be wrapped in a .card__content element.
  • Title should be given .card__headline.
  • Post information should be wrapped in .card__meta, with .card__date and .card__author inside, if applicable.
  • If a button link is used, it should have class .card__btn.

Headline Only

Off-white background color

Notes

Cards are wrapped in a .card__container container set to flexbox. For a default output, wrap each .card within a .card__wrap. This defaults to 3 cards/row on desktop, 2/row on mobile-tablet viewports, and 1/row on mobile viewports. For alternative output, utilize row column classes.

Minimum dimensions for card images are 500 x 238.