lib components / Structure

Card

Use this component to group information, controls and actions about a single topic.

import { Card } from "@siteimprove/fancylib";

Our structure components are strongly interconnected. Make sure to read the structure component guide, to find out which components you need and how to combine them correctly.

#Examples

The card component is the most fundamental building block of our UI. It is used on just about every single page in the platform. It's a flexible and visible container, which purpose is to group information, controls and actions about a single topic. This provides users with a clear and scannable overview of a page's main sections. The following examples showcase the card's default implementation and most important variants.

#Default

Here is an example of the card component in it's most basic form. An empty card wouldn't have made sense, since a card's purpose is to group content. In fact, without the paragraph, the card in the example would have been invisible.

Without this paragraph, this card would disappear.

CodeHTML output

<Card aria-label="A card without a header must have an aria-label">
	<Paragraph>Without this paragraph, this card would disappear.</Paragraph>
</Card>

Cards should almost always have a header. The rare exception is when a card serves as a container for structural or navigational content, that should not be exportable to a dashboard or does not contain data. The page-level variant of our Tabs component is an example of this exception.

To add a header to a card, simply add a Card.Header component as the first child, as shown in the example below. If you look at the example's HTML output, you'll see that the text inside the Card.Header is automatically turned into an H2 heading. You can put a different heading, such as an H3 inside the Card.Header. However, this generally only makes sense when a card is placed inside another card, which is a rare occurrence.

The example's HTML output also shows that the card's aria-labelledby property automatically points to the card header. If you don't add a header to a card, you need to provide the card with an aria-label yourself, using either its aria-label or aria-labelledby property.

Card header

Check out this example's HTML output. The text above explains why.

Example styling

CodeHTML output

<Card>
	<Card.Header>Card header</Card.Header>
	<Content>
		<TextContainer article>
			<Paragraph>Check out this example's HTML output. The text above explains why.</Paragraph>
		</TextContainer>
	</Content>
</Card>

Cards can optionally contain a footer. This section is intended for information and actions that relate to the Card as a whole. In most cases, that will be the Action Bar component, which provides users with a set of actions related to the completion of a task.

Add a footer by placing a Card.Footer component inside a Card component as its last child.

Card header

Card content

Card footer

Example styling

CodeHTML output

<Card>
	<Card.Header>Card header</Card.Header>
	<Content>
		<TextContainer article>
			<Paragraph>Card content</Paragraph>
		</TextContainer>
	</Content>
	<Card.Footer>
		<Content>Card footer</Content>
	</Card.Footer>
</Card>

#Padding

A card does not have any padding by default. Whether you need to add padding depends on what you're putting in the card. For instance, (dead link) tables should take up the full width of a card, but a (dead link) chart, (dead link)form, or text-container, should always have padding. You add this padding by using the content and layout components (see example below).

Lorem Ipsum

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Example styling

CodeHTML output

<Card>
	<Card.Header>Lorem Ipsum</Card.Header>
	<Content.Layout padding="large">
		<Content flex="1 1 auto">
			<TextContainer>
				<H3>What is Lorem Ipsum?</H3>
				<Paragraph>
					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
					has been the industry's standard dummy text ever since the 1500s, when an unknown
					printer took a galley of type and scrambled it to make a type specimen book. It has
					survived not only five centuries, but also the leap into electronic typesetting,
					remaining essentially unchanged. It was popularised in the 1960s with the release of
					Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
					publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</Paragraph>
			</TextContainer>
		</Content>
		<Content flex="1 1 auto">
			<TextContainer>
				<H3>Why do we use it?</H3>
				<Paragraph>
					It is a long established fact that a reader will be distracted by the readable content
					of a page when looking at its layout. The point of using Lorem Ipsum is that it has a
					more-or-less normal distribution of letters, as opposed to using 'Content here, content
					here', making it look like readable English. Many desktop publishing packages and web
					page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
					ipsum' will uncover many web sites still in their infancy. Various versions have evolved
					over the years, sometimes by accident, sometimes on purpose (injected humour and the
					like).
				</Paragraph>
			</TextContainer>
		</Content>
	</Content.Layout>
</Card>

#Size

A card's height is determined by the height of its content, which can change due to user action or input. It's not something you actively set.

In contrast, a card's width is something you actively set, when you want to deviate from its default width of 100%. However, you don't use one of the card's properties for this. Instead, you wrap each card in a grid.section and use this component's size property to set the card's size.

These Grid.Section components then need to be wrapped in a grid component, which lays out the cards in a grid. You can see an example of all this below. The guide features more information about how these structure components can be combined.