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

Cards act as an entry point to a specific subject or user flow; they provide summaries of information pooled together and presented in a digestible way.

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.