Carbon Design System - Reusable components for Webflow

Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Disclaimer: This components library is an ongoing open-source project and is not associated with IBM carbon design system officially. It only borrows from the existing design system and makes it easier to work with certain components in Webflow.

Overview

Components are one of the key building blocks of the design system. Each component has been designed and coded to solve a specific UI problem, such as presenting a list of options, enabling submission of a form, providing feedback to the user, and so on. All of the components in Carbon have been designed to work harmoniously together, as parts of a greater whole.

In this open-source kit, we have included a lot of custom HTML components directly from the Carbon Design System Components guide to make it easy to build enterprise user interfaces in Webflow at speed.

Accordion

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Breadcrumb



Buttons

Checkbox

Checkbox (input + label)
Checkbox (label > input)

Content switcher

Data table

Name Protocol Port Rule Attached Groups Status
Load Balancer 1 HTTP 80 Round Robin Maureen's VM Groups Testing a really long text here Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active
Load Balancer 5 HTTP 80 Round Robin Maureen's VM Groups Active

Single date picker

Invalid date format.

Range date picker

Dropdown

File uploader

Account photo

Only .jpg and .png files. 500kb max file size.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!

color.jpeg

File size exceeds limit.

500 kb max file size. Select a new file and try again.

color.jpeg

Form

Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)

List

  1. Ordered List level 1
    1. Ordered List level 2
    2. Ordered List level 2
  2. Ordered List level 1
  3. Ordered List level 1

Modal

Notification

Number input

Invalid number
Invalid number
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Invalid number

Pagination

1 – 10 of 40 items

Progress indicator

  • First step

    Optional

  • Overflow Ex.1

  • Overflow Ex. 2 Multi Line

  • Fourth step

  • Fifth step

Radio button

Radio button label
Radio button label

Search

Slider

Structured list with selection

Column1
Column2

Tabs

Content for first tab goes here.

Tag

Red Magenta Purple Blue Cyan Teal Green Gray Cool-Gray Warm-Gray

Text input

Validation message here
Optional helper text goes here
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Optional helper text goes here

Toggle

Tooltip

Tooltip label
Tooltip label
Tooltip label

Organised by Jmsbaduor