Content block

Core Layout component

The Content block is a reusable core component used to help you build more complex patterns by placing them within the Carbon 2x grid or a Content section. Many of the options available at this level are optional providing you with more flexibility.

---

Table of contents

• 1. Heading
• 2. Copy
• 3. Children
• 4. CTA
• 5. Aside
  • 5.3 Layout

Dependencies (5)

• Data model
• Markdown utility
• Link list
• Layout
• CTA

Used by (11)

• Content block accordion
• CTA block
• Card section offset
• Content block cards
• Content block horizontal
• Content block media
• Content block mixed groups
• Content block segmented
• Content block simple
• Lead space block
• Logo grid

Back links (13)

CTA (1)

• ...to action. It should only be used once within a Content block

Content block accordion (2)

• Content block accordion is made up of a Content block with an Accordion as its child. The
• with an Accordion as its child. The Content block headline provides the content with an...

Content block cards (1)

• ...to display the Card group inside the Content block children

Content block media (1)

• ...Content block media is a decorator of the Content block, which includes a number of Content group...

Content block mixed groups (1)

• ...block mixed groups component leverages the Content block as the overall container, and allows only a few...

Content block simple (1)

• ...Content block simple is a decorator of the Content block, which includes a single Content item,...

Content group cards (1)

• ...component that can be used multiple within a Content block. It includes a section heading with any number...

Content group pictograms (1)

• ...pictograms component can be used within a Content block. It includes Content group with any number...

Content group (1)

• ...is a component that can be used inside of Content block level component. It can have 1 or more children,...

Content section (1)

• ...Is this an H2 even when it has a child of Content block that is also an H2, or is it more of an either...

Lead space block (1)

• ...component and consists of an H1 above a Content block

Link list (1)

• ...meant to be used off to the side of a main Content block

Resources

• r1: Box folder

---

1. Heading

optional string

An optional short String of text to indicate a change in topic at an H2 heading level.

Back to top

2. Copy

optional markdown

An optional String of text formatted using the Markdown utility. It provides the component with a high level overview of its content.

Only include

All other options should be ignored.

	props	description
2.1	*italic*	The italic option should be included.
2.2	<p>new line</p>	The new line paragraph feature should be included.

See Markdown utility for more information.

Back to top

3. Children

optional container

An optional container area that child components, and other content types can be passed into.

Example

Back to top

4. CTA

optional component

An optional CTA that allows a user to navigate to related content.

Properties and values

	props	values
4.1	type	All types
4.2	style	All styles except for card

See CTA for more information.

Back to top

5. Aside

optional container

An optional secondary container for child components, and other content types. The content provided in this container should be secondary supporting content towards the component's main content.

Logic

	condition	description
5.1	aside === true	If aside is true and contains children then Layout [5.3] is used to wrap content.
5.2	aside === false	If the aside is not provided or missing children than Layout [5.3] is NOT included.

Example

5.3 Layout

built-in component

If rendered the Layout component helps lay the main content and the Aside ^[5] container next to each other properly within the Carbon 2x grid.

Properties and values

	props	values
5.3.1	type	8-4
5.3.2	nested	true

See Layout for more information.

Back to top