Content Block

Import#

import { ContentBlock } from '@volue/wave-react';

Background#

Goal of the Content Block layout is to create a centered 'block' of content within any container, capping its width to preserve a reasonable measure and adding equal spacing on either side. Whenever you wish some content to be horizontally centered and want to make sure that the content area doesn’t span the entire width of a container until in smaller viewports, the Content Block is your friend.

Examples#

Default configuration#

To contain any piece of content, wrap it in the ContentBlock component.

Maximum width#

Use the max property to adjust the maximum width of the ContentBlock. By default, the max-width of the content is set to roughly 60 characters (60ch). This is to ensure a range of characters per line comfortable for reading.

Example below shows multiple nested ContentBlock with different max configurations. Check the API reference for a list of available named widths.

Centering the children#

In some cases, the ContentBlock can include naturally small elements like buttons. You can use the centerContent prop to center any children regardless their width.

API Reference#