Components
List of Components
#Boxes
some box title
The goal of this new setup is to make prototyping content to simple and constructive. This whole post is composed of pieces of content — somewhat similar to LEGO bricks — that you can move around and interact with.
#Lists
Horizontal lists
ul.c-list--horizontal
- list-item
- list-item
- list-item
- list-item
ul.c-list.c-list-dividers
- list-item
- list-item
- list-item
- list-item
ul.c-list--horizontal with .c-list--icon
ul.c-list.c-list-has-inline-block-links_space
- Horizontal List with block level links and space
- block level link and space
- block level link and space
ul.c-list.c-list-has-inline-block-links_space.c-list--has-icon
ul.c-list.c-list-has-block-links_space
- Horizontal List with block level links and space
- block level link and space
- block level link and space
Vertical lists
Regular ul
- list-item
- list-item
- list-item
Dotted ul
- Basic ordered list
- List Item
- List Item
ul.c-list--vertical with .c-list--icon with link inside
ul.c-list--vertical with .c-list--icon
Decimal ol
- Basic ordered list
- List Item
- List Item
Bordered top ul
- Basic ordered list
- List Item
- List Item
Bordered bottom ul
- Basic ordered list
- List Item
- List Item
Bordered bottom ul
- Basic ordered list
- List Item
- List Item
Bordered bottom ul & spaced links
#Definition List
- Definition List Title
- Definition list division.
- Kitchen Sink
- Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
- aside
- Defines content aside from the page content
- blockquote
- Defines a section that is quoted from another source
Cards
with Tailwind
Stacked
The Coldest Sunset
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
#photography#travel#winter
Horizontal
Members only
Can coffee make you a better developer?
Yes, of course ! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
Tom Hermans
Aug 18
#Buttons
Learn MoreView All FeaturesWow, Expand only on small viewportExpand only on medium viewportExpand only on large viewportWow, Expand on medium and largerExpand on large and largerExpand on medium and smallerExpand on large and smallerPrimarySecondarySuccessAlertWarningDisabled buttons
DisabledHollow buttons
DisabledDropdown buttons
Accessible button example
Button group
Code examples
Some code to check styling.Some pre code to check styling.