lib components / Structure

Grid and Grid.Section

Use these components to control the size of cards and display them in a responsive grid.

import { Grid } 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.

#Example

Use the Grid.Section component to control the size of cards. Wrap it around one or more cards and use its size property to set a desired size. The Grid.Section component also adds space between cards and makes them responsive, by automatically adjusting their width on smaller viewports.

The Grid component lays out cards in a grid. To use it, all you need to do is wrap it around Grid.Section components. In the example below, you can see both components doing their thing.

Full (default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Fourth A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Fourth B

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Two thirds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Example styling

CodeHTML output

<Grid>
	<Grid.Section>
		<Card>
			<Card.Header>Full (default)</Card.Header>
			<Content>
				<TextContainer article>
					<Paragraph>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit.
						Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur
						efficitur justo non egestas.
					</Paragraph>
				</TextContainer>
			</Content>
		</Card>
	</Grid.Section>
	<Grid.Section size="half">
		<Card>
			<Card.Header>Half</Card.Header>
			<Content>
				<TextContainer article>
					<Paragraph>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit.
						Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur
						efficitur justo non egestas.
					</Paragraph>
				</TextContainer>
			</Content>
		</Card>
	</Grid.Section>
	<Grid.Section size="fourth">
		<Card>
			<Card.Header>Fourth A</Card.Header>
			<Content>
				<TextContainer article>
					<Paragraph>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit.
						Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur
						efficitur justo non egestas.
					</Paragraph>
				</TextContainer>
			</Content>
		</Card>
	</Grid.Section>
	<Grid.Section size="fourth">
		<Card>
			<Card.Header>Fourth B</Card.Header>
			<Content>
				<TextContainer article>
					<Paragraph>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit.
						Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur
						efficitur justo non egestas.
					</Paragraph>
				</TextContainer>
			</Content>
		</Card>
	</Grid.Section>
	<Grid.Section size="third">
		<Card>
			<Card.Header>Third</Card.Header>
			<Content>
				<TextContainer article>
					<Paragraph>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit.
						Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur
						efficitur justo non egestas.
					</Paragraph>
				</TextContainer>
			</Content>
		</Card>
	</Grid.Section>
	<Grid.Section size="twothirds">
		<Card>
			<Card.Header>Two thirds</Card.Header>
			<Content>
				<TextContainer article>
					<Paragraph>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit.
						Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur
						efficitur justo non egestas.
					</Paragraph>
				</TextContainer>
			</Content>
		</Card>
	</Grid.Section>
</Grid>

#Properties

#Grid.Section

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Example styling

CodePropsHTML output

Property	Description	Defined
childrenRequired	`\| element \| element[]`Children should likely be `Card`'s but can be anything	YesNo
sizeOptional	`"fourth" \| "full" \| "half" \| "third" \| "threefourths" \| "twothirds" \| "¼" \| "½" \| "¾" \| "⅓" \| "⅔"`Defaults to "full", controls the size of the section	YesNo
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

#Grid

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at odio elit. Donec laoreet massa justo, at sagittis nulla volutpat vitae. Nullam efficitur efficitur justo non egestas.

Example styling

CodePropsHTML output

Property	Description	Defined
childrenOptional	`element`Children should be `Grid.Section` components	YesNo
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

#Guidelines

#Best practices

Use the Grid.Section component to control the size of cards. Wrap it around one or more cards and use its size property to set a desired size.
Don't adjust the spacing between cards or the width of cards based on viewport size. The Grid.Section component takes care of this.
Only use the Grid component in combination with Grid.Section components.

#Do not use when

You only have a single card on a page. The card will (and should) take up the page's full width.
You need to control the size or layout of anything other than a card. Instead, use the content and layout components.

#Accessibility

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

There are no writing guidelines for this component.