Skip to content

Content item horizontal

kodiakhq[bot] edited this page Dec 7, 2021 · 12 revisions

Core Layout component

Content item horizontal is a component for displaying basic text elements and CTAs in a horizontally-distributed column layout.

component--content-item-horizontal

image This component is technically not related to the core Content item.


Table of contents

Dependencies (4)

Used by (2)

Back links (5)

Content block horizontal (4)

  • Content item horizontal components in the children container of
  • the Content item horizontal
  • Content item horizontal uses the component directly as is, and can...
  • See Content item horizontal for more

Tabs extended media (1)

  • its content using the Content item horizontal

Resources



1. Eyebrow

optional string

Static text element that displays a secondary header for the pattern.


Back to top


2. Heading

required string

Static text element that displays a primary header for the pattern.


Back to top


3. Media

optional component

The media here is can be an Image with caption or a Video.

Alignment modifiers
values description
3.0.1 right Aligns the media right, and content left. default
3.0.2 left Aligns media left, and content right.
3.0.3 thumbnail Sets the smaller size image off to the side. Hides any caption, and eyebrow 1
3.0.4 feature Media takes full width of component to grab attention.

image See Image with caption and Video for more details.


Right / left examples
left / right example
Thumbnail example
thumbnail example
Featured example
featured example


Back to top


4. Copy

required markdown

Static text element that displays body copy for the pattern using markdown.

image See Markdown utility for more details.


Back to top


5. Link list

optional component

Link list is used here to display CTAs.

Set modifiers
name value
5.0.1 heading false
5.0.2 layout vertical
5.0.3 columns 1
5.0.4 CTA style text

If not explicitly stated, additional modifiers should be allowed to pass through at adopters discretion.

image See Link list for more details.


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