lib components / Structure

Content

Wrap this invisible container around one or multiple components. Use it to control the padding, position, and alignment of the components.

Examples Properties Guidelines Notable Changes

import { Content } 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 content component is the deepest nested structure component (read the structure component guide for more information). Therefore, it should not be wrapped around other structure components. It should be wrapped around one or multiple “medium” components, such as a text-container. The following sections showcase how to use the content component to control the padding, position, and alignment of such components.

#Default

As you can see in the example below, the default property settings of the content component result in $space--medium (1rem/16px) padding on all sides.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content>
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat
		tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#Padding

Use the padding property to adjust the amount of padding around the component(s) wrapped inside the content component. If you don’t want top and/or bottom padding, make use of the noPaddingTop and noPaddingBottom properties. These three properties can be used together.

#Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content padding="large">
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat
		tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#Medium (default)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content padding="medium">
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat
		tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content padding="small">
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat
		tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#None

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content padding="none">
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat
		tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#No padding top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content noPaddingTop>
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat
		tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#No padding bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content noPaddingBottom>
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat
		tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#Centered

Use the centered property to position the wrapped component(s) in the horizontal center of the page.

#Small

A property value of small limits the width of the wrapped component(s) to a maximum of 37.5rem (600px).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content centered="small">
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus
		volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#Medium

A property value of medium limits the width of the wrapped component(s) to a maximum of 56.25rem (900px).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Example styling

CodeHTML output

<Content centered="medium">
	<Paragraph>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus
		volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
	</Paragraph>
</Content>

#Flex container

The content component offers the same layout options as the parent element, or flex container, of a CSS flexbox. That means you can use its flexDirection, flexWrap, justifyContent, alignItems, alignContent and gap properties to control the positioning and alignment of the component(s) wrapped inside a content component. The three examples below showcase how these properties enable you to achieve different layouts.

#Example A

H1

H2

H3

H4

H5

H6

Example styling

CodeHTML output

<Content justifyContent="space-between" alignItems="baseline">
	<H1>H1</H1>
	<H2>H2</H2>
	<H3>H3</H3>
	<H4>H4</H4>
	<H5>H5</H5>
	<H6>H6</H6>
</Content>

#Example B

H1

H2

H3

H4

H5

H6

Example styling

CodeHTML output

<Content flexDirection="column" alignItems="flex-end">
	<H1>H1</H1>
	<H2>H2</H2>
	<H3>H3</H3>
	<H4>H4</H4>
	<H5>H5</H5>
	<H6>H6</H6>
</Content>

#Example C

This example uses the gap property to get equal spacing between the children elements. The default value of gap is medium, but it can also be xxSmall, xSmall, small and large.

H1

H2

H3

H4

H5

H6

Example styling

CodeHTML output

<Content gap>
	<H1>H1</H1>
	<H2>H2</H2>
	<H3>H3</H3>
	<H4>H4</H4>
	<H5>H5</H5>
	<H6>H6</H6>
</Content>

#Flex item

The content component behaves like a CSS flexbox child element, or flex item, when wrapped inside a Content.Layout component. That means you can use its flex property to control the size of a content component, as shown in example A. You can also use the alignSelf property to override the default cross-axis alignment (or the one specificied by the alignItems property of the Content.Layout component) for an individual content component, as shown in example B.

#Example A

flex: 1

flex: 2

Example styling

CodeHTML output

<Content.Layout>
	<Content flex="1">
		<Paragraph>flex: 1</Paragraph>
	</Content>
	<Content flex="1">
		<Paragraph>flex: 1</Paragraph>
	</Content>
	<Content flex="2">
		<Paragraph>flex: 2</Paragraph>
	</Content>
</Content.Layout>

#Example B

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque magna massa, elementum ac odio ut, consequat blandit massa. Sed posuere placerat mauris, nec vulputate risus faucibus a. Vestibulum id lacus tincidunt, blandit nulla a, semper nisi. Aliquam sit amet gravida felis. Suspendisse potenti. Nam in sollicitudin nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Example styling

CodeHTML output

<Content.Layout alignItems="flex-start">
	<Content>
		<Paragraph>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque magna massa, elementum ac
			odio ut, consequat blandit massa. Sed posuere placerat mauris, nec vulputate risus faucibus
			a. Vestibulum id lacus tincidunt, blandit nulla a, semper nisi. Aliquam sit amet gravida
			felis. Suspendisse potenti. Nam in sollicitudin nisi.
		</Paragraph>
	</Content>
	<Content alignSelf="flex-end">
		<Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Paragraph>
	</Content>
</Content.Layout>

#Properties

Some property values are not supported by IE11. These are noted in the table below. When you use one of these values, check how bad it looks in IE11. It's up to a designer to decide whether it's acceptable or not. If not, tweak the design or check if a different (IE11 supported) property value achieves a satisfactory result.

H1

H2

H3

H4

H5

H6

Example styling

CodePropsHTML output

Property	Description	Defined	Value
idOptional	`string`Custom id to be applied to the containing element	YesNo
centeredOptional	`"medium" \| "small"`Sets max-width (600px for small, 900px for medium) and margin: auto	YesNo
gapOptional	`"large" \| "medium" \| "small" \| "xSmall" \| "xxSmall"`Controls the gap between items	YesNo
alignItemsOptional	`"baseline" \| "center" \| "first baseline" \| "flex-end" \| "flex-start" \| "last baseline" \| "stretch"`Controls alignment of items on cross axis. Not supported by IE11: first-baseline and last-baseline	YesNo
justifyContentOptional	`"center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"`Controls space between and around items on main axis. Not supported by IE11: space-evenly	YesNo
alignContentOptional	`"baseline" \| "center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"`Controls space between and around items on cross axis (effect only visible when items wrap across multiple lines). Not supported by IE11: baseline, space-evenly, and stretch	YesNo
flexDirectionOptional	`"column" \| "row"`Controls direction of main axis	YesNo
flexWrapOptional	`"nowrap" \| "wrap"`Controls whether items can wrap across multiple lines or not	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
childrenOptional	`element`	YesNo
paddingOptional	`"compact" \| "large" \| "medium" \| "none" \| "small"`Controls padding of container (defaults to medium)	YesNo
alignSelfOptional	`"center" \| "flex-end" \| "flex-start" \| "stretch"`Overrides alignment of item on cross axis (controlled by alignItems property). Not supported by IE11: stretch	YesNo
flexOptional	`string`Controls the size of an item. Shorthand for flex-grow, flex-shrink, and flex-basis (may be specified using one, two, or three values)	YesNo
noPaddingTopOptional	`boolean`Removes top padding	YesNo	truefalse
noPaddingBottomOptional	`boolean`Removes bottom padding	YesNo	truefalse

#Guidelines

#Best practices

Wrap content components around non-structural components, such as a text-container or (dead link) form. Use it to control their padding, position, and alignment.
Cards are not the only component the content component can be used inside of. It can, for instance, also be used inside (dead link) modals or (dead link) sidepanels.
Use the padding, noPaddingTop, and noPaddingBottom properties to control the amount of padding around the wrapped components.
Use the centered property to horizontally center the wrapped component(s) and limit the width to a maximum of either 600 or 900 pixels.
Use the flexDirection, flexWrap, justifyContent, alignItems and alignContent properties to control the positioning and alignment of the wrapped components.
Wrap multiple content components in a Content.Layout component.
When a content component is wrapped inside a Content.Layout component, use its flex property to control its size.
When a content component is wrapped inside a Content.Layout component, use its alignSelf property to override the cross-axis alignment set by the Content.Layout component’s alignItems property.

#Do not use when

You need to add padding around card components. Use the grid and grid.section components instead.
You need to add spacing between text components, such as headings and paragraphs. Use the text-container component instead.