STYLE GUIDE

Layout

var(--width-1-4)

var(--width-1-4)

var(--width-1-4)

var(--width-1-4)

var(--width-2-4)

var(--width-2-4)

var(--width-3-4)

var(--width-1-4)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-1-6)

var(--width-2-6)

var(--width-3-6)

var(--width-2-6)

var(--width-4-6)

var(--width-1-6)

var(--width-5-6)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-1-12)

var(--width-2-12)

var(--width-3-12)

var(--width-4-12)

var(--width-2-12)

var(--width-6-12)

var(--width-6-12)

var(--width-5-12)

var(--width-7-12)

var(--width-8-12)

var(--width-4-12)

var(--width-9-12)

var(--width-3-12)

var(--width-10-12)

var(--width-2-12)

var(--width-11-12)

var(--width-1-12)

Spacing

$spacing-size-1

$spacing-size-2

$spacing-size-3

$spacing-size-4

$spacing-size-5

$spacing-size-6

$spacing-size-8

$spacing-size-10

$spacing-size-12

$spacing-size-16

$spacing-size-20

$spacing-size-24

$spacing-size-32

$spacing-size-40

$spacing-size-48

$spacing-size-56

$spacing-size-64

Radii

var(--radius-none)

var(--radius-xxs)

var(--radius-xs)

var(--radius-sm)

var(--radius-md)

var(--radius-lg)

var(--radius-xl)

var(--radius-2xl)

var(--radius-3xl)

var(--radius-4xl)

var(--radius-full)

Text Sizes

var(--text-2xs):

The quick brown fox jumps over the lazy dog

var(--text-xs):

The quick brown fox jumps over the lazy dog

var(--text-sm):

The quick brown fox jumps over the lazy dog

var(--text-base):

The quick brown fox jumps over the lazy dog

var(--text-lg):

The quick brown fox jumps over the lazy dog

var(--text-xl):

The quick brown fox jumps over the lazy dog

var(--text-2xl):

The quick brown fox jumps over the lazy dog

var(--text-3xl):

The quick brown fox jumps over the lazy dog

var(--text-2xs):

The quick brown fox jumps over the lazy dog

var(--text-xs):

The quick brown fox jumps over the lazy dog

var(--text-sm):

The quick brown fox jumps over the lazy dog

var(--text-base):

The quick brown fox jumps over the lazy dog

var(--text-lg):

The quick brown fox jumps over the lazy dog

var(--text-xl):

The quick brown fox jumps over the lazy dog

var(--text-2xl):

The quick brown fox jumps over the lazy dog

var(--text-3xl):

The quick brown fox jumps over the lazy dog

var(--text-2xs):

The quick brown fox jumps over the lazy dog

var(--text-xs):

The quick brown fox jumps over the lazy dog

var(--text-sm):

The quick brown fox jumps over the lazy dog

var(--text-base):

The quick brown fox jumps over the lazy dog

var(--text-lg):

The quick brown fox jumps over the lazy dog

var(--text-xl):

The quick brown fox jumps over the lazy dog

var(--text-2xl):

The quick brown fox jumps over the lazy dog

var(--text-3xl):

The quick brown fox jumps over the lazy dog

Abstract Colors

Base

--color-white

--color-black

Gray

--color-gray-25

--color-gray-50

--color-gray-100

--color-gray-200

--color-gray-300

--color-gray-400

--color-gray-500

--color-gray-600

--color-gray-700

--color-gray-800

--color-gray-900

--color-gray-950

Brand

--color-brand-25

--color-brand-50

--color-brand-100

--color-brand-200

--color-brand-300

--color-brand-400

--color-brand-500

--color-brand-600

--color-brand-700

--color-brand-800

--color-brand-900

--color-brand-950

Warning

--color-warning-25

--color-warning-50

--color-warning-100

--color-warning-200

--color-warning-300

--color-warning-400

--color-warning-500

--color-warning-600

--color-warning-700

--color-warning-800

--color-warning-900

--color-warning-950

Semantic Colors

Background

--color-bg-primary

--color-bg-secondary

--color-bg-brand-solid

--color-bg-disabled_subtle

Foreground

--color-fg-primary

--color-fg-secondary

--color-fg-tertiary

--color-fg-quinary

--color-fg-disabled

--color-fg-placeholder

--color-fg-white

Border

--color-border-primary

--color-border-secondary

--color-border-tertiary

--color-border-disabled_subtle

Button

--color-button-primary-bg

--color-button-primary-bg-hover

--color-button-primary-bg-active

--color-button-primary-shadow-focus

--color-button-primary-fg

--color-button-primary-border

--color-button-secondary-bg

--color-button-secondary-bg-hover

--color-button-secondary-bg-active

--color-button-secondary-shadow-focus

--color-button-secondary-fg

--color-button-secondary-border

--color-button-tertiary-bg

--color-button-tertiary-bg-hover

--color-button-tertiary-bg-active

--color-button-tertiary-shadow-focus

--color-button-tertiary-fg

--color-button-tertiary-border

--color-button-disabled-bg

--color-button-disabled-fg

--color-button-disabled-border

Input

--color-input-border

--color-input-border-hover

--color-input-shadow-focus

--color-input-disabled-bg

--color-input-disabled-fg

Utility Gray

--color-util-gray-50

--color-util-gray-100

--color-util-gray-200

--color-util-gray-300

--color-util-gray-400

--color-util-gray-500

--color-util-gray-600

--color-util-gray-700

Utility Brand

--color-util-brand-50

--color-util-brand-100

--color-util-brand-200

--color-util-brand-300

--color-util-brand-400

--color-util-brand-500

--color-util-brand-600

--color-util-brand-700

Utility Warning

--color-util-warning-50

--color-util-warning-100

--color-util-warning-200

--color-util-warning-300

--color-util-warning-400

--color-util-warning-500

--color-util-warning-600

--color-util-warning-700

Shadows

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Text Elements

Bold

Italic

Underline

~~Deleted~~

Inserted

~~Strikethrough~~

Small

Text _Sub

Text ^Sup

Abbr.

Highlighted

Kbd

${code}

In hic fugit nostrum Bold exercitationem aut nam quaerat occaecati. Cumque quo explicabo. Mollitia fugiat Italic unde mollitia dolor consequatur incidunt. Quod debitis aliquam Underline ipsum quis sed qui aut.

Quis dicta et incidunt ~~Deleted~~ mollitia quo vel omnis. Voluptas quibusdam vitae voluptates Inserted aspernatur mollitia amet. Id rem magnam at ~~Strikethrough~~ harum a quidem velit maiores. Accusamus autem dolorem Small voluptatem fuga cumque_Sub maxime labore^Sup ut. Aliquid iure sed id incidunt necessitatibus.

Eum beatae Kbd doloremque est harum veniam veniam ${code} ducimus. Et dignissimos praesentium placeat link voluptatum eum non. Qui iste dolorum voluptate omnis omnis veniam.

<hr />

<ul>

Aliquam lobortis lacus eu libero ornare facilisis.
Nam et magna at libero scelerisque egestas.
- Proin ultricies turpis et volutpat vehicula.
Suspendisse id nisl ut leo finibus vehicula quis eu ex.
Proin ultricies turpis et volutpat vehicula.

<ol>

Aliquam lobortis lacus eu libero ornare facilisis.
Nam et magna at libero scelerisque egestas.
- Proin ultricies turpis et volutpat vehicula.
Suspendisse id nisl ut leo finibus vehicula quis eu ex.
Proin ultricies turpis et volutpat vehicula.

.list-style-none

Aliquam lobortis lacus eu libero ornare facilisis.
Nam et magna at libero scelerisque egestas.
- Proin ultricies turpis et volutpat vehicula.
Suspendisse id nisl ut leo finibus vehicula quis eu ex.
Proin ultricies turpis et volutpat vehicula.

<pre>

:root {
    --font-size: 1rem;
    --line-height: 1.5;
    --font-weight: 400;
    --font-weight-thin: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --icon-size: 2em;
}

<Snippet framework="javascript">

const addOne = (x) => {
    // Add one here
    const result = x + 1;
    return result;
}

Buttons

Default:

Hover:

Focus:

Disabled:

Aria Disabled:

Inputs

Input Fields

Stacked

.input-field

Text:

Textarea:

Checkbox:

Radio:

Switch:

Select:

.input-field.input-error

Text:

Textarea:

Checkbox:

Radio:

Switch:

Select:

Inline

.input-field.inline

Text:

Textarea:

Checkbox:

Radio:

Switch:

Select:

.input-field.inline.input-error

Text:

Textarea:

Checkbox:

Radio:

Switch:

Select:

Icons

<Icon name="eye" />

info

warning

creditCard

lightBulb

enterprise

collapseCategories

search

arrowUp

arrowRight

arrowDown

arrowLeft

return

link

mapPin

chevronUp

chevronRight

chevronDown

chevronLeft

replaydemo

takeControl

playCircle

download

executableProgram

eye

code

tick

check

cross

plunker

stackblitz

codesandbox

maximize

minimize

idea

sun

moon

flash

movement

zoomArea

colorPalette

newTab

module

sort

escape

pageResult

codeResult

headingResult

listBoxes

figmaCommunity

copy

play

pause

communityEnterprise

tutorials

concepts

alarm

terminal

pricingFeatures

support

edit

github

twitter

xLogo

youtube

linkedin

email

blog

stackoverflow

stackoverflowMonochrome

zendesk

zendeskMonochrome

chartsBar

chartsColumn

chartsLine

chartsArea

chartsScatter

chartsBubble

chartsPie

chartsDonut

chartsCombination

chartsHistogram

chartsHeatmap

chartsRangeArea

chartsRangeBar

chartsBoxPlot

chartsErrorBar

chartsWaterfall

chartsRadar

chartsRadarArea

chartsRadialGauge

chartsSankey

chartsChord

chartsNightingale

chartsRadialColumn

chartsRadialBar

chartsTreemap

chartsSunburst

chartsIcicle

chartsFunnel

chartsConeFunnel

chartsPyramid

chartsLinearGauge

chartsMap

chartsCandlestick

chartsOHLC

Span with icon Link with icon

Styled span with icon Styled link with icon

Alerts

I am a note: Earum unde dolores sed similique ut dignissimos voluptatum iure quia. Nam reiciendis doloribus. Blanditiis temporibus ducimus. Vel aspernatur sed quia quis id maxime rerum numquam adipisci. Laudantium vel dolorum non.

I am a warning: Consequatur porro amet sunt omnis optio ipsam ad ut. Nobis porro quo sunt. Natus ut quia et ea autem. Eaque consequatur est harum libero ipsa sit consequatur pariatur sit.

I am an idea: Labore tempore nihil aspernatur et repudiandae et vel. Autem illum deserunt accusantium suscipit laboriosam magni totam corrupti aut. Repellat omnis nihil accusamus eius laboriosam. Consequatur sit velit quas officiis delectus.

I am a success: Quisquam voluptatem dolorem quia rerum. Voluptas consequatur est harum libero ipsa sit consequatur pariatur. Eaque nobis porro quo sunt natus ut quia et ea autem.

Tables

<table>

#	Year	Month	Day	Hour	Minute
1	2023	January	24^th	12	42
2	1997	October	3^rd	09	12
2	2096	March	31^st	18	55

<table class="small-header no-zebra">

#	Year	Month	Day	Hour	Minute
1	2023	January	24^th	12	42
2	1997	October	3^rd	09	12
2	2096	March	31^st	18	55

<table class="stack> / table { @incldue stack-table(); }

#	Year	Month	Day	Hour	Minute
1	2023	January	24^th	12	42
2	1997	October	3^rd	09	12
2	2096	March	31^st	18	55