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 (18)

CTA (1)

• Content block

Content block accordion (1)

• Content block accordion is made up of a Content block with

Content block cards (1)

• the Card group inside the Content block children

Content block horizontal (3)

• Content block provides us the visual consistency of our other...
• See Content block for more
• or more_** within the Content block

Content block media (1)

• ...Content block media is a decorator of the Content block,

Content block mixed groups (1)

• ...block mixed groups component leverages the Content block

Content block simple (1)

• ...Content block simple is a decorator of the Content block,

Content group cards (1)

• a Content block. It includes a section heading with any number...

Content group pictograms (1)

• Content block. It includes Content group with any number...

Content group (1)

• 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

Lead space block (1)

• Content block

Link list (1)

• of a main Content block

Writing functional specs (3)

• Check out Content block to see how it leverages the anatomy
• See the example below to see how Content block was abstracted
• _An example using 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 utility helps lay the main content and the Aside ⁵ 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