ELEMENTS

# Typography

This is a heading h1.

This is a heading h2.

This is a heading h3.

This is a heading h4.

This is a heading h5.
This is a heading h6.

EYEBROW HEADING level 1

EYEBROW HEADING level 2
EYEBROW HEADING level 3

Paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia, aliquid id neque error dignissimos.

Bold. Lorem ipsum dolor sit, amet consectetur adipisicing elit.

The next word is small word so is the next one: something consectetur adipisicing elit.

Disabled text Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit a beatae, ea quia architecto quidem!

Warning text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, quod.

Error text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, quod.

Success text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, quod.

.code { font-family: arial; color: red; }

# Buttons

# Inputs

  • role:all
  • role:all
  • role:all
  • role:all

This is a helper

This is success

This is a warning

This is an error

(optional)

This is a warning

Accept privacy

# Tags

primary
success
warning
danger
info
.
Small
Medium
Large
No icon
Start icon
End icon

# Avatar

# Card

This is a card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, molestiae!

r/ProgrammerHumor

# Table

Filename Type Size Created
airport.jpg image/jpeg 336.6 kB 11 Mar 2022
Mobile illustration - dark.png image/jpeg 336.6 kB 11 Mar 2022
airport.jpg image/jpeg 336.6 kB 11 Mar 2022

# Container

This is a container (background-color for demo only)

COMPONENTS

# Toaster

# Alert

This is a default alert

Some description about the alert sent to the user.

Default color. Some description about the alert sent to the user.

Info. Some description about the alert sent to the user.

Success. Some description about the alert sent to the user.

Warning. Some description about the alert sent to the user.

Danger. Some description about the alert sent to the user.

# Tabs

# Link Navigation

# Inline Links

# Drop List

# List

# Collapsible

  • Advanced Options (optional)

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic repellat molestias repellendus laudantium quam error, accusantium aliquam? Iste veniam iure dicta consequuntur sunt vero facilis eveniet alias cupiditate, unde voluptatem nulla dolores quam, odit error aut similique, libero earum commodi?

  • Advanced Options (optional)

    Epcot is a theme park at Walt="alt" Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

  • Advanced Options (optional)

    Epcot is a theme park at Walt="alt" Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

# Modal

Modal title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quasi ab maxime, expedita impedit natus quas inventore porro quod at?

# Upload Box

Uploading files 3

  • %
  • %
  • %

Uploading files 3

  • %
  • %
  • %

# Tiles

# Session

  • Chrome 98.0 on Mac 10.15

    Current Session

    172.18.0.1 / Unknown

  • Chrome 98.0 on Mac 10.15

    Current Session

    172.18.0.1 / Unknown

# Grid Box

# Pagination

# Console header

# Side Nav

Home

Develop

Manage

Settings