These blocks allow web authors to increase information density with more sophisticated layouts and components that reveal content on demand. These are helpful for building impactful designs, but extreme caution is needed to ensure layouts work nicely across multiple devices and screen sizes.


Advanced Accordion content

Advanced Accordion content 2

Advanced Accordion content 3

Tab one content.

Tab 2 content.

Tab 3 content.

Punctuate a paragraph of text or some other content block with the Advance Content Well, which only shows additional content when clicked.

This is the hidden content that a user sees after clicking.

Use the Advanced Accordion, Advanced Tabbed Content, and the Advanced Content Well blocks to increase information density by hiding content until the user needs it.

Column block

Most blocks offer layout controls, including alignment options and width settings. But the most important block for managing layout is the column block. When using it, be sure to test your layout in various screen sizes to ensure responsive design. Vertical alignment options exist for content inside each column. Controls are also available to break the columns onto separate lines at various screen widths; and you can reverse the stacking order when it makes sense to do so.

Column A

Column B

Column C

By default, columns like the one above stack when the user's device is smaller than 762 pixels wide. Other options: 500px; 620px; 960px; 1280px.

Column A

Column B

Column C

This column is set to ‘wide width'. It stacks in reverse order at 620 pixels.

Group block

The group block combines other blocks into a container that can be used to set background and text colors, adjust the spacing of inner blocks, and control the width of the containing group block itself. Avoid using the related row and stack blocks, as these are difficult to control across mobile, tablet, and desktop environments. Use the columns block instead.

Group example

This shows a group block set to wide-width with inner blocks constricted to 700 pixels in width. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Group example

This shows a group block set to full-width with inner blocks constricted to 1000 pixels in width. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.