lib components / Structure

Content.Layout

Wrap this invisible component around content components. Use it to control their padding, alignment, and positioning. It also makes content components behave responsively.

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.Layout component is meant to be wrapped around content components. It ensures that the space between itself and the content components is the same as the space between the individual content components. Furthermore, you can use the Content.Layout component to adjust the padding, alignment, and positioning of the content components. Lastly, the Content.Layout component adds responsive behavior to the content components. You can find examples of all these features below.

#Default

Here you see a Content.Layout component with default property settings wrapped around two content components. If you resize the browser window, you'll see how the Content.Layout component makes the content components behave responsively. Specifically, when the browser window width is $layout--large (62rem/992px) or smaller, the content components stack on top of each other.

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.Layout>
	<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. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
</Content.Layout>

#Padding

Use the Content.Layout component's padding property to adjust the padding of both the content components and the Content.Layout component itself. You can use a content component’s padding property to override the padding set by the Content.Layout component.

#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.Layout padding="large">
	<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. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
</Content.Layout>

#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.Layout padding="medium">
	<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. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
</Content.Layout>

#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.Layout padding="small">
	<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. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
</Content.Layout>

#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.Layout padding="none">
	<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. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
</Content.Layout>

#Centered

Use the centered property to position the Content.Layout component in the horizontal center of the page.

#Small

A property value of small limits the width of the Content.Layout component 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.Layout centered="small">
	<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. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
</Content.Layout>

#Medium

A property value of medium limits the width of the Content.Layout component 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.Layout centered="medium">
	<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. Nunc hendrerit sem eu lectus
			volutpat tincidunt. Aenean interdum consectetur iaculis. Cras sit amet erat ante.
		</Paragraph>
	</Content>
</Content.Layout>

#Flex container

The Content.Layout component offers the same Content.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 content components. The two examples below showcase how these properties enable you to achieve different Content.Layouts.

#Example A

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum eu sodales nibh, tempor imperdiet dui. Integer eu condimentum odio. Mauris aliquet euismod tortor, sit amet scelerisque magna pellentesque in.

Integer eu iaculis odio, quis cursus dui. Mauris consectetur, ante at rhoncus accumsan, sem turpis aliquet lorem, a cursus nibh neque vel magna. Fusce ultrices mattis sem, et volutpat purus fringilla non. Phasellus eleifend odio ipsum, id hendrerit nunc lacinia blandit. Nam iaculis sem at lectus luctus, nec dictum mi tempus.

Nunc risus lorem, commodo vitae ante vitae, volutpat consequat erat. Duis convallis vulputate odio eu sodales.

Example styling

CodeHTML output

<Content.Layout flexDirection="column" alignItems="flex-end">
	<Content>
		<Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Vestibulum eu sodales nibh, tempor imperdiet dui. Integer eu condimentum odio. Mauris
			aliquet euismod tortor, sit amet scelerisque magna pellentesque in.
		</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Integer eu iaculis odio, quis cursus dui. Mauris consectetur, ante at rhoncus accumsan, sem
			turpis aliquet lorem, a cursus nibh neque vel magna. Fusce ultrices mattis sem, et volutpat
			purus fringilla non. Phasellus eleifend odio ipsum, id hendrerit nunc lacinia blandit. Nam
			iaculis sem at lectus luctus, nec dictum mi tempus.
		</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Nunc risus lorem, commodo vitae ante vitae, volutpat consequat erat. Duis convallis
			vulputate odio eu sodales.
		</Paragraph>
	</Content>
</Content.Layout>

#Example B

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum eu sodales nibh, tempor imperdiet dui. Integer eu condimentum odio. Mauris aliquet euismod tortor, sit amet scelerisque magna pellentesque in.

Nunc risus lorem, commodo vitae ante vitae, volutpat consequat erat. Duis convallis vulputate odio eu sodales.

Example styling

CodeHTML output

<Content.Layout flexDirection="row" alignItems="center">
	<Content>
		<Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Vestibulum eu sodales nibh, tempor imperdiet dui. Integer eu condimentum odio. Mauris
			aliquet euismod tortor, sit amet scelerisque magna pellentesque in.
		</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Integer eu iaculis odio, quis cursus dui. Mauris consectetur, ante at rhoncus accumsan, sem
			turpis aliquet lorem, a cursus nibh neque vel magna. Fusce ultrices mattis sem, et volutpat
			purus fringilla non. Phasellus eleifend odio ipsum, id hendrerit nunc lacinia blandit. Nam
			iaculis sem at lectus luctus, nec dictum mi tempus.
		</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Nunc risus lorem, commodo vitae ante vitae, volutpat consequat erat. Duis convallis
			vulputate odio eu sodales.
		</Paragraph>
	</Content>
</Content.Layout>

#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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum eu sodales nibh, tempor imperdiet dui. Integer eu condimentum odio. Mauris aliquet euismod tortor, sit amet scelerisque magna pellentesque in.

Nunc risus lorem, commodo vitae ante vitae, volutpat consequat erat. Duis convallis vulputate odio eu sodales.

Example styling

CodeHTML output

<Content.Layout padding="none" gap>
	<Content>
		<Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Vestibulum eu sodales nibh, tempor imperdiet dui. Integer eu condimentum odio. Mauris
			aliquet euismod tortor, sit amet scelerisque magna pellentesque in.
		</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Integer eu iaculis odio, quis cursus dui. Mauris consectetur, ante at rhoncus accumsan, sem
			turpis aliquet lorem, a cursus nibh neque vel magna. Fusce ultrices mattis sem, et volutpat
			purus fringilla non. Phasellus eleifend odio ipsum, id hendrerit nunc lacinia blandit. Nam
			iaculis sem at lectus luctus, nec dictum mi tempus.
		</Paragraph>
	</Content>
	<Content>
		<Paragraph>
			Nunc risus lorem, commodo vitae ante vitae, volutpat consequat erat. Duis convallis
			vulputate odio eu sodales.
		</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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum eu sodales nibh, tempor imperdiet dui. Integer eu condimentum odio. Mauris aliquet euismod tortor, sit amet scelerisque magna pellentesque in.

Nunc risus lorem, commodo vitae ante vitae, volutpat consequat erat. Duis convallis vulputate odio eu sodales.

CodePropsHTML output

Property	Description	Defined
childrenRequired	`\| element \| element[]`Content element(s) to be displayed insicde the layout container	YesNo
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
paddingOptional	`"large" \| "medium" \| "none" \| "small"`Controls padding of the container (defaults to medium)	YesNo

#Guidelines

#Best practices

In most cases, it’s a good idea to wrap adjacent content components in a Content.Layout component. This will ensure equal spacing between the content components and around the content omponents as a group.
Only wrap Content.Layout components around content components. Use it to control their padding, alignment, and positioning, and to add responsive behavior.
Content.Layout components can be used in various UI contexts, such as (dead link) cards, (dead link) modals, or(dead link) sidepanels.
Use the Content.Layout component's padding property to adjust the padding of both the content components and the Content.Layout component itself.
Use the centered property to horizontally center the wrapped content components and limit their 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 content components.
You can’t use a Content.Layout component to control the size of an individual content component wrapped inside it. You need to use the content component’s flex property instead.
You can’t use a Content.Layout component to control the cross-axis alignment of an individual content components wrapped inside it. You need to use the content component's alignSelf property instead.

Content.Layout

#Examples

#Default

#Padding

#Large

#Medium (default)

#Small

#None

#Centered

#Small

#Medium

#Flex container

#Example A

#Example B

#Example C

#Properties

#Guidelines

#Best practices

#Do not use when

#Accessibility

#Writing

#Notable Changes

#Version 0.0.x