The action widget is used to provide a menu of available actions within a widget or application.
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.
Annotations are used to highlight important or insightful information within a large text passage.
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.
The Callout — quote is a typographic pattern that is used to highlight an impactful client statement or user testimonial.
Callout — with media is used to feature a high value media asset such as a customer story.
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.
The Card is a clickable UI item that is used to present content in a concise and readable way.
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 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 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.
A card is a flexible-sized container that groups related blocks of content and information into one understandable unit.
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 is used for introducing page content, similar to Content block – simple but it has added ability to include subsections.
Content block — simple is typically used for the introductory section on a page.
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 is used to present information with images in a group setting.
Content group — horizontal can be used to present important areas of interest relating to your topic, such as products or solutions.
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 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 is to present a group of information, each with a supporting pictogram.
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.
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.
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.