CDS UI Component Library

By: Brett Ciranni

This is a multipurpose CSS component library, based on Bootstrap 5.

Typography

The Typography consists of Heading Styles and Body Styles with corresponding specs.

Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Specs

Open Sans ExtraBold

font-size: 32px

line-height: 40px

Open Sans ExtraBold

font-size: 24px

line-height: 30px

Open Sans ExtraBold

font-size: 20px

line-height: 24px

Open Sans ExtraBold

font-size: 16px

line-height: 20px

Open Sans ExtraBold

font-size: 14px

line-height: 18px

Body Styles

Paragraph

Paragraph Bold

Small

Specs

Open Sans Regular

font-size: 14px

line-height: 22px

Open Sans Bold

font-size: 14px

line-height: 22px

Open Sans Regular

font-size: 12px

line-height: 16px

Colors

The colors in this palette have been optimized to be more accessible. When combining them, be mindful about the contrast ratio to ensure a more accessible experience.

Blue 800 (#033160)

Blue 600 (#0972D3)

Blue 300 (#B5D6F4)

Red 600 (#D91515)

Red 300 (#EA7158)

Yellow 600 (#7B5F04)

Yellow 300 (#B2911C)

Green 600 (#1A7302)

Green 200 (#A2E2A7)

Grey 900 (#000716)

Grey 300 (#D1D5DB)

Grey 100 (#FBFBFB)

Buttons

Buttons are a global component with the following states: Default, Hover, Active and Focus. They exist in large format, medium format, and small format.

Large Buttons

Medium Buttons

Small Buttons

Cards

Card Examples

Three Card Examples are being provided that exist within the Cloudscape Design System.

Container Title (#) Info

Item Title

Label for Key

Value

Label for Key

Value

Card Title (With Image)

Description Text

Alerts

The Cloudscape Design System makes use of 4 Alert categories, those being Success, Error, Info, and Warning. There are also different forms and design styles for alerts which are represented for the successes and can be adapted to fit the others.

Success

This is a success message.

This is another success message.

This is a success message.

This is another success message.

Header Description

Alert Description

Header Description

Alert Description

Header Description

Alert Description

Header Description

Alert Description

Error

This is an error message.

Info

This is an info message.

Warning

This is a warning message.

Carousel

The Carousel does not officially exist within the Cloudscape Design System, but I have structured it with relevant content that relates to the CloudScape Design System.

Cloudscape Design System

Cloudscape Design System, is an open source solution from AWS for building intuitive, engaging, and inclusive user experiences at scale. Cloudscape consists of an extensive set of guidelines to create web applications, along with the design resources and front-end components to help streamline implementation.

Configurable Dashboard

Gives control to the user to show/hide, delete, move, change the size of, and add items to a dashboard.

Product detail page

An example of patterns and components used for content rich interfaces, in the context of a product detail page.

Navigation

The Navigation consists of the sidebar and topbar navigation. For the sidebar, the initial state is closed, which is represented by a hamburger menu icon. The opened sidebar navigation module is displayed underneath. Underneath the sidebar navigation is the topbar navigation module.