ESLint Components

Components used across this site.

Card

The card component is used to create blog post listings. To use the component, call the card() macro and provide the parameters required:

  • title
  • teaser text
  • author name
  • category
  • reading time
  • date

Usage

<!-- import the macro -->
{ % from 'components/card.macro.html' import card % }

<!-- use the macro -->
{ { card({
title: "The post title",
teaser: "This is a short description to demo what the card component will look like in the pattern library.",
authorName: "Happy McPerson",
category: "Sponsorships",
readingTime: "5 min",
date: "02-03-2020",
url: "/component-library/card"
}) } }

Example: Default card

The post title
5 min read

The post title

This is a short description to demo what the card component will look like in the pattern library.