Cards

This section contains information about the Card component and components that use it.

For information about NovaCards, refer to the Homepage documentation.

`card` vs `cards` vs `cards[Wrapper]`

Card component

At the base, we have a card component. It represents a single card, with featured media, and various content (title, timestamp, byline, etc.).

Card component (opens in a new tab) in the Style Guide.

Cards component

Cards is a generic component that accepts an array of card component, and offers some additional layout patterns, such as call to action buttons and various heading and description options.

Cards component (opens in a new tab) in the Style Guide.

Cards[Wrapper] components

Components that are formatted as cards-[wrapper] act as faux higher-order-components (i.e. cards-module-a, cards-feature, cards-widget, etc.).

By wrapping specific and contextual uses of cards in a cards-[wrapper] component we can offer additional encapuslation (defaults.json, styles, etc.). In general, you won't use a cards component directly, instead opting for a wrapped version.

For example, we can modify all the image ratios in cards-river, affecting all archives and homepage block uses, while avoiding regressions/conflicts with unrelated components.

Style Guide examples,

Understanding `Card` Props

The cards component supports props called defaultCardProps and cardProps.

`defaultCardProps`

The values of this object need to conform to the props of a card component.

These values will be merged into each card rendered, and will be treated as a set of default props.

This allows us to configure card properties such as title size, image ratio, card orientation, card sizing, etc. at once. It also works for nested components.

Here we set the card layout to lg and the image's aspect ratio to oneByOne. These will override the defaults in any card defaults.

{
	"rowOfCards": {
		"defaultCardProps": {
			"layoutSize": "lg",
			"image": {
				"aspectRatio": "oneByOne"
			}
		}
	}
}

`cardProps`

This props is an array of objects which are mapped to each card index, acting as the defaultCardProps only at that index.

In this example, we're disabling the image by default for all cards, except the first one (with an index of 0). For that first item, we're overriding the defaults with xl and enabling the image.

This is useful when you need to apply modifications to specific indexes.

{
	"rowOfCards": {
		"cardProps": [
			{
				"layoutSize": "xl",
				"image": {}
			},
			{} // We could keep going and modify index 1
			{} // We could keep going and modify index 2, etc.
		],
		"defaultCardProps": {
			"layoutSize": "lg",
			"image": null
		}
	}
}

Common tasks

How do I apply borders between cards?

See /components/cards/mixins.scss for mixins such as borders() and pipes().

See more on borders.

How do I flip the media position on the card component?

See the mediaPosition prop on the cards component.

Borders Colors