Editorial Card
Editorial cards are cards specifically made for blogs, publications and news. They can have larger sizes with more emphasize on the images.
Table of Contents
Edit this section, Opens in new windowOverview
Editorial cards are cards specifically made for blogs, publications and news. They can have larger sizes with more emphasize on the images.
Usage
Cards are rarely placed alone, but in a collection of cards, like a deck. All cards can be standalone, but when put together, they should be in a list.
Behaviours
Interaction
Primary action
The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a subject.
If you click anywhere in the card, the main link in the title is the active one. Only other links accessible is the tags.
Hover
Focus
Edit this section, Opens in new windowModifiers
List
You can apply the list
-class to cover the container with a narrower card
Specs
Across
You can apply the across
-class to cover the container with a card
Specs
Reverse
You can also reverse across
editorial cards:
Specs
The .if.cards.articles
-container has a margin bottom to push down the content
Breakpoint | Bottom margin |
---|---|
default | 24px |
400px | 32px |
720px | 40px |