Design Templates

Getting Started#

Defaults#

Headings#

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Buttons#

Typography#

Default Font size is 26

Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Borders#

Top
Left
Bottom
Right

Shadows#

Colors#

Use "class=bg-"

[class="bg-white"]
[class="bg-white"]
[class="bg-white"]
[class="bg-white"]
[class="bg-white"]
[class="bg-white"]
[class="bg-white"]
[class="bg-white"]

Content#

Web Components#

Forms#

Tables#

Cards#

Usage

Parent div should be
  • class="cards" or
  • class="cards_live" or
  • class="cards_light"
    • Child should have an image and a div with the class of
  • class="btn-[tier] btn-[size]"
    • Use class="span-col-[x]" to determine with

    Card Structure

    Naming classes class="btn-[tier] btn-[size]"
    This is some card content
    class="cards"
    class="cards_light"
    class="cards_live"
    class="cards_live span-col-4"
    This is some card content

    Fix Relationships

    List ways to help

    Fix Relationships

    List ways to help

    Fix Relationships

    List ways to help

    Tabs#

    Heading tab 1

    Panels 1

    Heading tab 2

    Panels 2

    Heading tab 3

    Panels 3

    Heading tab 4

    Panels 4

    Breadcrumbs#

    link1 > link2 > Link3

    Header#

    Design Templates

    Footer#

    Loading Screen#

    Loading Screen

    Utilities#