Styleguide
-
Icon
* [String] name - Icon name: Options: close, search * [Array] modifiers - Adds a BEM modifier class. Options (px): 24, 32 * [Array] classes - Adds a class for each item * [Array] attributes - Adds attribute for each item * [Array] href - Adds href for each item -
Colors
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum -
Button
Unstyled buttons
LinkButton alpha
LinkButton beta
LinkButton gamma
LinkButton lg
LinkButton xl
LinkButton block
Link -
Button link
-
Link more
-
Link underline
-
Typography
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumIpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem IpsumLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque purus felis, hendrerit id velit non, pretium tristique mi. Donec tempus lorem ante, eu tempor libero semper at. In lacinia cursus sapien, ut laoreet tortor consequat.Donec tempus lorem ante, eu tempor libero semper at. In lacinia cursus sapien, ut laoreet tortor consequat a.
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
“Nearly 20 years ago I became a distributor for Merritt Aluminum Products Company. I’ve learned to completely trust their processes. Merritt’s reputation in the industry is a company that will always do what is fair and that is the type of customer service I receive. The premium, high quality products Merritt manufactures keeps customers coming in my door.”
John W., Elite Truck Accessories -
Alerts
Used to return feedback to user actions with a color that conveys the state of the feedback.
Add
.alert--infoclass for warning alert.A simple info alert message with example link.Add
.alert--errorclass for error alert.A simple error alert message with example link.Add
.alert--successclass for info alert.A simple success alert message with example link. -
Badges
.badge1 2 3 99 999 123456 Forms
-
Tables
# Name Rank Handle 1 Ahab Captain @ahab 2 Ishmael Crewman @ishmael 3 Starbuck Chief Mate @starbuck 4 Moby Dick The Whale @mobyDick -
Collapse
Build with Bootstrap 4.6 collapse. Check the docs for instructions on how to use.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, porro? Atque ut nam maiores at mollitia hic ipsa! Neque aliquam quos fugit, vero consectetur quod voluptas dignissimos doloribus natus voluptates.
-
Select2
Build with Select2 library. Check the docs for details.
Our Select2 doesn't have CSS style some of the features that Select2 normally has:
- We don't have support for selects with multiple attribute.
- We don't have support for RTL.
- We don't have support for clearable selections.
- We don't have support for the searchbox.
- We don't have support for option groups.
If you need some of these options you need to add that CSS in order to style them.
Check the example below on the HTML required to init the library on your select elements.