Skip to content

Content item

ibmdotcom-bot edited this page Feb 2, 2022 · 51 revisions

Core Layout component

The Content item component is a commonly used structure and style of content that’s used across many patterns consisting of a heading, media, copy, and CTA. Because of its type size and spacing it is typically used lower in a page's hierarchy.

content-item--static


Table of contents

Dependencies (4)

Used by (6)

Back links (6)

CTA block (1)

  • Content item or the Link list

Content block simple (1)

  • a single Content item, optional media (Image with caption

Content group simple (1)

  • Content items within the children

Content item horizontal (1)

  • ...component is technically not related to the core Content item

Content section (1)

  • ...consider replacing heading, copy, and CTA with a Content item

Pictogram item (1)

  • ...and a heading, copy, and link via the Content item

Resources



1. Heading

optional string

An optional short String of text to indicate a more focused topic at an H4 level.


Back to top


2. Media

optional component

Provides the adopter with option to use either Image with caption or Video here.

image See Image with caption for more information.

image See Video for more information.


Back to top


3. Copy

optional markdown

An optional String of text formatted using the Markdown utility. It provides the user with detailed content supporting the topic.

Ignored properties

All other options should be included.

props values
3.1 **bold** The bold option should be ignored.

image See Markdown utility for more information.


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 text button

image See CTA for more information.


Back to top


Website guidelines

Publishing guidelines (6)

Functional specs

Layout component (37)
Service (3)
UI component (34)
Utility (5)

Additional components

Carbon component (19)
Design only (9)
Feature flag (3)
Clone this wiki locally