Typography
Fonts
Bai Jamjuree
Inter
Headings
Element
Element
Element
Element
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Example Ordered List
- Example Ordered List
- Example Unordered List
- Example Unordered List
Color
Background
Black
Light Gray
Blue Gradient
White
Text
Black
White
Components
Buttons
Default
Secondary
Text Link
Default Light
Secondary Light
Text Link Light
Forms
Thank you for your submission!
Thank you for your submission!
Card
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Prevent Style Clean Up
Utilities
Margin
Top
Bottom
Other
Padding
Top
Bottom
Other
Alignment
Visibility
Display
Size
Images
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;
object-fit: cover;
Accessibility
Grid
Rows + Columns
Columns need to be nested within a "row" and a direct child of a "container". All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.
Gutterless Columns
To remove all padding from columns, use the "col-no-gutters" class preceded by the initial class of "col".
Static Columns
To shrink a column to the width of it's children, use the "col-static" class preceded by the initial class of "col".
Wrapping Columns
If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.
Grid - Desktop
To define our 12 column grid, all classes must precede with the initial class of "col"
Grid - Tablet (Breakpoint)
Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"
Grid - Mobile Landscape (Breakpoint)
Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"
Grid - Mobile Portrait (Breakpoint)
Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"
Align-Start
To align columns from the top, combine a class of "align-start" preceded by the class of "row"
Align-Center
To align columns from the center, combine a class of "align-center" preceded by the class of "row"
Align-End
To align columns from the bottom, combine a class of "align-end" preceded by the class of "row"
Justify-Center
To align columns from the right, combine a class of "justify-center" preceded by the class of "row"
Justify-End
To align columns from the right, combine a class of "justify-end" preceded by the class of "row"
Justify-Between
To evenly space columns between each-other, combine a class of "justify-between" preceded by the class of "row"
Justify-Around
To evenly space columns around each-other, combine a class of "justify-around" preceded by the class of "row"
Column Reordering
To individually reorder columns, combine a class of "col-first", "col-last", "col-sm-first", or "col-sm-last" preceded by the by class of "col"