Theme

ColorDeck

src/components/ColorDeck/index.tsx

This component isn't supposed to be used as a React component and is only used to preview project colors and their names.

  • profileAvatarYellow
  • profileAvatarAmberYellow
  • profileAvatarLime
  • profileAvatarGreen
  • profileAvatarBlue
  • profileAvatarIndigio
  • profileAvatarViolet
  • profileAvatarDeepPurple
  • profileAvatarPurple
  • profileAvatarRose
  • white
  • black
  • gray200
  • gray300
  • gray400
  • gray500
  • gray600
  • gray800
  • overlayBlack70
  • overlayGray20050
  • ctaPrimary
  • ctaSecondary
  • brandYellow
  • brandRed
  • brandOrange
  • textLinkBrand
  • textLinkStandaloneHover
  • textLinkStandaloneBorder
  • statusSuccessTint
  • statusSuccess
  • statusWarningTint
  • statusWarning
  • statusAlertTint
  • statusAlert
  • statusInProgressTint
  • statusInProgress
  • statusNewTint
  • statusNew
  • inputBorder
  • inputBorderDisabled
  • ctaPrimaryHover
  • ctaPrimaryLight
  • ctaPrimaryDark
  • ctaSecondaryHover
  • ctaSecondaryLight
  • ctaSecondaryDarker
  • textActive
  • textPlaceholder
  • textDisabled
  • exampleHighlight
  • exampleBorder

Grid

src/components/Grid/index.tsx

Spacer

src/components/Spacer/index.tsx

Spacer is used to add some whitespace between adjacent components.

This is 50pxbetween the text

Full Width:

This is 50pxbetween the text

If you don't want to add vertical space, add the noHeight prop which will add 1px height, but width will still apply.

This is 50pxbetween the text without any height spacing

If you want the spacer size to match the text, add matchText prop:

This is 1.3embetween the text without any height spacing

For visual debugging, the debug prop would be useful since it adds background color to the spacer.

This is 16pxbetween the text with a nice orange color to help with the visualization.

UI Parts

PageTitle

src/components/PageTitle/index.tsx

Lozenge

src/components/Lozenge/index.tsx

Examples:

Subtle

DefaultSuccessWarningAlertIn ProgressNew

DefaultSuccessWarningAlertIn ProgressNew

Bold

DefaultSuccessWarningAlertIn ProgressNew

DefaultSuccessWarningAlertIn ProgressNew

Outline

DefaultSuccessWarningAlertIn ProgressNew

DefaultSuccessWarningAlertIn ProgressNew

Icons

src/components/Icons/index.tsx

Examples:

placeholder-square
placeholder
account
calendar
globe
email
cart
star
```jsx padded
video
courses
conferences
podcast
articles
publications
webcast
performance-resources
masters
certifications
alert
tooltip
bookmark
bookmark-fill
notification
notification-active
visibility-on
visibility-off
lock-on
lock-off
edit
filter
filter-asc
filter-desc
magnify
reply
settings
comment
share
download

Controls:

checkmark
in-progress
close
download
subtract
add
arrow-right
caret-left
caret-right
caret-up
caret-down
caret-left-small
caret-right-small
caret-up-small
caret-down-small
ellipsis
external
hamburger-nav

Social:

linkedin
twitter
facebook
instagram
pinterest

Overriding size or color

Divider

src/components/Divider/index.tsx

Examples:







Avatar

src/components/Avatar/index.tsx

Examples:

Default

Size

Image

R

Colors

JS

Thumbnail

src/components/Thumbnail/index.tsx

Examples:

Some alt text
src/components/Banners/Banner/index.tsx

Examples:

This is the header/title text

Your public profile is on, which means all ATD members will see the following infomation:
Your public profile is on, which means all ATD members will see the following infomation:
Your public profile is on, which means all ATD members will see the following infomation:
Your public profile is on, which means all ATD members will see the following infomation:

Stat

src/components/Stat/index.tsx

Examples:

Following
250

Stats

src/components/Stats/index.tsx

Examples:

Following
250
Followers
20
Groups
14

ProgressBar

src/components/ProgressBar/index.tsx

12 of 25 Activities Completed

LinearProgressBar

src/components/LinearProgressBar/index.tsx

Examples:

Small
Medium
Large

Toggle

src/components/Toggle/index.tsx

Examples:

Default - Medium - Default Label - Toggled Off
Default - Medium - Default Label - Toggled On
Default - Medium - Left Label
Default - Medium - Right Label
Default - Small - Default Label
Default - Small - Left Label
Default - Small - Right Label
Default - Medium - Default - On/Off Label
Error
Disabled

CTAs

TextLink

src/components/CTA/TextLink/index.tsx

Button

src/components/CTA/Button/index.tsx

ButtonDropdown

src/components/CTA/ButtonDropdown/index.tsx

ButtonFilter

src/components/CTA/ButtonFilter/index.tsx

ButtonNav

src/components/CTA/ButtonNav/index.tsx

Tag

src/components/CTA/Tag/index.tsx

Examples:

Basic TagBasic Tag

IconCTA

src/components/CTA/IconCTA/index.tsx

IconCTAList

src/components/CTA/IconCTAList/index.tsx

HeaderNavLink

src/components/HeaderNavLink/index.tsx
Header Group Title

HeaderLink

src/components/HeaderLink/index.tsx

Form

InputText

src/components/Forms/InputText/index.tsx

Examples:

Default

This is helper text.

Default with Text Masking
Error

This is error text.

Disabled
ReadOnly

InputPassword

src/components/Forms/InputPassword/index.tsx

Examples:

Default

This is helper text

Error

This is an error text

Disabled
Read-Only

InputTextArea

src/components/Forms/InputTextArea/index.tsx

Examples:

Default

This is helper text

Error

This is error text

Disabled
Read-Only

InputAvatar

src/components/Forms/InputAvatar/index.tsx

InputRadio

src/components/Forms/InputRadio/index.tsx

Examples:

Default - Size: Medium
Default - Label Placement: Left
Default - Label Placement: Default
Default - Size: Small
Error
Disabled

InputCheckbox

src/components/Forms/InputCheckbox/index.tsx

Examples:

Default - Size: Medium
Default - Label Placement: Left
Default - Label Placement: Default
Default - Size: Small
Error
Disabled

InputSelect

src/components/Forms/Select/index.tsx

Examples:

Default
Select placeholder

This is helper text.

Error
Select placeholder

This is error text.

Disabled
Select placeholder

This is helper text.

Read-Only
Select placeholder

This is helper text.

InputCheckboxGroup

src/components/Forms/InputCheckboxGroup/index.tsx

Examples:

Default - Column - Default Label
Checkbox legend(required)

This is helper text

Default - Column - Left Label
Checkbox legend(required)

This is helper text

Default - Column - Right Label
Checkbox legend(required)

This is helper text

Default - Row - Default Label
Checkbox legend(required)

This is helper text

Default - Row - Left Label
Checkbox legend(required)

This is helper text

Default - Row - Right Label
Checkbox legend(required)

This is helper text

Error
Checkbox legend

This is error text

Disabled
Checkbox legend

InputHelperText

src/components/Forms/InputHelperText/index.tsx

Examples:

Default

Helper Text

Error

Helper Text

Disabled

Helper Text

InputLabel

src/components/Forms/InputLabel/index.tsx

Examples:

Default
Error
Disabled

InputLabelControl

src/components/Forms/InputLabelControl/index.tsx

InputTinyMCE

src/components/Forms/InputTinyMCE/index.tsx

Examples:

Default

This is helper text

Default with Max Character limit

This is helper text

0 / 1500

Error

This is error text

Disabled
Read-Only

InputWrapper

src/components/Forms/InputWrapper/index.tsx

Examples:

Small Margin

This is helper text.

Medium Margin

Content Containers

Box

src/components/Box/index.tsx

Examples:

Variant 'Default'

Box title

Edit topics
Box subtitle
Content
i am the footer

Variant 'Profile'

full name
Edit

Profile Name

  • IconText
  • IconText

Variant 'Simple'

Simple

Edit
Box submodule subtitle
Content
i am the footer

Variant 'transparent'

Transparent

Edit
Content
i am the footer

Variant 'subModule'

My Topics

Edit
Box submodule subtitle
Content
i am the footer

Variant 'reduced'

Professional Plus

Variant 'Benefit'

Benefit

1 LEFT
Edit
Content

Card

src/components/Card/index.tsx

Example:

Vertical (default)

Upcoming date alert

Title

Subtitle/Lead-inDescription/URLByline/production dateTitle
Author Name
Author Name

Sign up for a free Webinar!

This week only, we're giving you free access to our most popular webinar. Sign up today!
ContentLabel

Horizontal

Upcoming date alert

Title

Subtitle/Lead-inDescription/URLByline/production date
Author Name
Author Name

Table

src/components/Table/index.tsx
Sort By:Title: A to Z
Title
Status
DetailsEarnedActions
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1
Instructional Design CertificateCertificate Program
In progress
On Demand
Online
CEU: 0.0 / 0.1
SHRM: 0.0 / 0.1
HRCI: 0.0 / 0.1

Accordion

src/components/Accordion/index.tsx

Examples:

All closed

This is the first panel content

Second panel content here

Third panel content here

Default expanded

First panel title

This is the first panel content

Second panel content here

Third panel content here

Accordion Menu

Navigation

ContextMenu

src/components/ContextMenu/index.tsx

SectionMenu

src/components/SectionMenu/index.tsx

Pagination

src/components/Pagination/index.tsx

Examples:

Utility

Modal

src/components/Modal/index.tsx

SnackbarComponent

src/components/Snackbar/index.tsx

Composed Sections

Header

src/components/Header/index.tsx

Footer

src/components/Footer/index.tsx

Checklist

src/components/Checklist/index.tsx

Building Personal Capability

Developing Professional Capability

Impacting Organizational Capability

Carousel

Carousel

src/components/Carousel/index.tsx

Compelling virtual
Presentations II

ATD Styleguide