Skip to main contentCarbon Design System

Component index

These components are developed and maintained by members of the IBM Carbon community and are currently only accessible to IBMers. They may change over time, and they may be incomplete or experimental. For support, please contact the contributors listed on each page.

Action widget

The action widget is used to provide a menu of available actions within a widget or application.

Annotation

Annotations are used to highlight important or insightful information within a large text passage.

Call-to-action section

CTA (call-to-action) section is used to communicate actions that users can take at key points in your narrative, such as at the bottom of an important section or page where the user is ready to progress to subsequent stages in the journey.

Callout - quote

The Callout — quote is a typographic pattern that is used to highlight an impactful client statement or user testimonial.

Callout - with media

Callout — with media is used to feature a high value media asset such as a customer story.

Card

A card is a flexible-sized container that groups related blocks of content and information into one understandable unit.

Card

The Card is a clickable UI item that is used to present content in a concise and readable way.

Card link

The Card link is a card that acts as a CTA (call-to-action), typically used at the end of a section of a page.

Card section - images

Card section — images is a collection of card components with images that, together, occupy a full-width section with a left-column header. This pattern is typically used for presenting resources or links.

Card section - simple

Card section — simple is a collection of text-based cards presented in a full-width section with a left-column header. This pattern is typically used for presenting resources or links.

Cards

A card is a flexible-sized container that groups related blocks of content and information into one understandable unit.

Catalog / marketplace

The catalog series of components work together to support the ‘catalog’ UX pattern (to come), with a series of tiles to display resources in a friendly, browsable way, as well as a wrapper to support and control the layout and features that can be used to support things like searching and filtering.

Content block - segmented

Content block – segmented is used for introducing page content, similar to Content block – simple but it has added ability to include subsections.

Content block - simple

Content block — simple is typically used for the introductory section on a page.

Content block - with cards

Content block — with cards is used to present small self-contained pieces of information as cards. Use this when the cards are part of the main narrative, as opposed to secondary links or resources.

Content block - with media

Content block — with media is used to present information with images in a group setting.

Content group - horizontal

Content group — horizontal can be used to present important areas of interest relating to your topic, such as products or solutions.

Content group - simple

Content group — simple is an alternative form of a narrative pattern where the content is broken up into smaller pieces to make it more digestible.

Content group - with cards

Content group — with cards is used to present information through a group of cards with each acting as a call to action that drives to additional or supporting destinations.

Content group - with pictograms

Content group — with pictograms is to present a group of information, each with a supporting pictogram.

Data table

The data table provides a compact layout for viewing and managing large quantities of data while extending Carbon capabilities in a large number of areas.

Enhanced data table

EnhancedDataTable is meant to be used in place of the carbon DataTable. It is intended to make working with the DataTable much simpler and provide a more consistent experience.

Error boundary

ErrorBoundary is a component used to prevent JS code from crashing React. The component will catch any JS errors thrown from any React components rendered as children and show a generic error message in it’s place.

Expressive modal

The Expressive modal uses the Carbon modal and only deviates to increase readability and usability within expressive moments.

Feature card

The Feature card is used to emphasize a piece of information, indicate significant progression or highlight an important next step.