SLI Unified Design System

Component library demo

Buttons

Button Variants

Outline Variants

Sizes

States

Badges

Standard Badges

Primary Secondary Success Danger Warning Info

Soft Badges

Primary Secondary Success Danger

Pill Badges

Primary 99+ 5

Status & Lane Badges

Status Badges

Open Exploring Deciding Bet Killed Paused Completed

Lane Badges

Shaping Tech Debt Scope Bug Enhancement

Alerts

Avatars

JD
AB
CD
EF
GH

Avatar Stack

JD
AB
CD
+5

Cards

Card Title

This is a basic card with a header and body.

Elevated Card

This card has a more prominent shadow.

Total Revenue
$24,500
12.5%

Accent Sections

Shaping 3

Content goes here

In Scope 5

Content goes here

Tech Debt 2

Content goes here

Settings List

Team Members 3 members
JD
John Doe john@example.com
Admin
JS
Jane Smith jane@example.com
Pending
BJ
Bob Johnson bob@example.com
Member

Spinners

Icons

Sizes

xs
sm
md
lg
xl
2xl
3xl

Color Variants

primary
secondary
success
danger
warning
info
muted
dark
white

Icon Circles

Sizes

Color Variants

Solid Background

Icon Squares

sm
default
lg

Animations

Spin
Pulse
Bounce

Common Icons

home
arrow-left
arrow-right
arrow-up
arrow-down
chevron-right
chevron-down
bars
plus
trash
edit
save
check
times
ellipsis-v
search
download
check-circle
exclamation-circle
exclamation-triangle
info-circle
spinner
ban
star
heart
bell
bookmark
cog
user
envelope
chart-line
table
file-alt
folder
database
eye
lock
shopping-cart
tag
calendar

Utility Classes

Spacing

.u-p-md .u-mb-md

Flexbox

Left Center Right

Text

Muted text

Bold primary text

This is truncated text that will be cut off with an ellipsis