Data Display

Cards

Planned

Cards group information into flexible containers to let users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.

Card Title

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in.

Button

Options

Default Card

Use standard style for a footer with buttons and more information.

Header and Footer

Only standard cards have a header and footer. Cards use the heading text style for titles. The size can be customized depending on the use case, but by default, use the h4 heading. The footer has a content area that can hold buttons on the right side and indicators (badges, icons, status lights, etc.) on the left. The footer is always divided from the card body using a small divider.

Card Segments

Another example, with multiple mid-sections:

Scrollable Body

Example with a scrollable main content – and a specified height that’s less than the main content height, so that there's something to scroll for:

Implementation

Button Variants

Variant implementation info

<button class="button">Default</button>
<button class="button" data-type="primary">Primary</button>
<button class="button" data-type="secondary">Secondary</button>
<button class="button" data-type="contrast">Contrast</button>
<button class="button" data-type="clear">Clear</button>
<button class="button" data-type="negative">Negative</button>

Sizes

Size Implementation info

<button class="button" data-size="sm">Small</button>
<button class="button">Medium</button>
<button class="button" data-size="lg">Largw</button>

Do you want larger text on button-lg too? Then add the t-lg text utility:

<a class="button button-primary button-lg" href="#/">Normal text</a>
<a class="button button-primary button-lg t-lg" href="#/">Large text</a>

Note: using t-lg will work for icon fonts, but not for SVG icons. If you want your SVG icon to be larger then you need to make it larger directly, or apply a CSS scale transform to it.

Example using icons at 24px and 36px size:

(24px equates to the default single line height in Carbon. 36px equates to the t-lg size, that is 150% larger.)

Full Width

Buttons are normally inline elements. However, if you want a button to be a block element, simply add block layout utility class. Alternatively, using w-100% utility class will expand the button to the full width of its containing element – achieving the same look.

Hyperlink 
<button class="button" data-type="primary" data-display="block">Block button</button>
<a class="button" role="button" href="#/" data-type="primary" data-display="block">Hyperlink</a>

States

`:disabled` or `disabled` / Normal / `:hover` / `:active` or `active`

<button class="button" disabled>Default disabled</button>
<button class="button">Default</button>
<button class="button active">Default active</button>

<!-- Or -->

<a class="button disabled" href="javascript:void(0)">Default disabled</a>
<a class="button">Default</a>
<a class="button active">Default active</a>

With Icons

Add SVG or icon-font icons from anywhere. (These docs demonstrate SVG icons using [iconic icons](https://iconic.app/)). For SVG icons, set the height to match your line height (1.5rem = 24px). And within the SVG itself, set `stroke="currentColor"` to that it inherits the UI element text color.

<button class="button">
  <!-- Icon -->
  OK
</button>

Icon Only

Add icon-button to get icon only buttons with bespoke styles.

<button class="icon-button">
  <!-- Icon -->
</button>

Information Tab

Checklist

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).

All Color Schemes

Works properly across all color schemes (light, dark).

Accessible Contrast for Text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible Contrast for UI Components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Defined Options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).

Defined Behaviors

Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing Guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization Guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard Interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design Tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI Kit

Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.