Typography
Body text
Lorem ipsum (regular link) dolor sit amet, consectetur adipisicing 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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.text--small
Lorem ipsum (regular link) dolor sit amet, consectetur adipisicing 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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Links
Headings
H1. tag with trailing text
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
H2. tag with trailing text
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
H3. tag with trailing text
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
H4. tag with trailing text
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
H5. tag with trailing text
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
H6. tag with trailing text
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Abbreviations
attr
HTML
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lists
Unstyled
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Inline
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Inline inverted
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Breakout background
Add .breakout-bg class to break out of the .container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum turpis at ante viverra egestas. Suspendisse potenti. Quisque non viverra dui, vel laoreet velit. Cras justo nibh, vulputate nec bibendum sit amet, tempor eu arcu.
Sed pharetra lobortis placerat. Phasellus fermentum suscipit nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dignissim bibendum nunc, vitae mollis mauris aliquet a
Maecenas venenatis mi sed tincidunt lacinia. Nunc mollis, mi in aliquam egestas, ante justo iaculis felis, in imperdiet enim sem in lectus. Cras nec volutpat libero. Duis ac dolor dui. Aliquam venenatis tempus odio, at condimentum massa scelerisque quis. Mauris id libero in velit hendrerit cursus. Nunc volutpat consectetur consectetur. Mauris eget sapien aliquet, luctus quam eu, gravida purus.
Tables
Add class modifier .table--responsive to get responsive table
Alerts
- This alert needs your attention, but it's not super important.
With links inside
Buttons
Button variants
.btn--primary
.btn--secondary
Link buttons
.btn--link
.btn--lg
Circle buttons
.btn--circle
.btn--circle-lg
Button Disabled
.disabled
Button Loading
.loading
Block level button
.btn--block
Button with icon
Large buttons with icon
Circle buttons with icon
Large circle buttons with icon
Block buttons with icon
.btn--icon-left
Collapse
Accordion
Forms
Form groups
Form grid
Radio buttons and checkbox
Inline checkbox
Inline radio
Readonly
Readonly plain text
Form validation
Cards
Some quick example text to build on the card title and make up the bulk of the card's content.
99.99 KnSome quick example text to build on the card title and make up the bulk of the card's content.
99.99 KnSome quick example text to build on the card title and make up the bulk of the card's content.
99.99 KnBanners
Banner title
Banner linkBoxes
Box title
Aenean vitae justo sodales lorem tristique laoreet at vel velit. Sed a orci vel sem vehicula molestie non id felis. In hendrerit pellentesque ex a tincidunt. Sed et eros aliquam, interdum nibh at, tincidunt risus. Etiam elit turpis, porta quis mi sed, vulputate pulvinar diam. Donec ipsum felis, rutrum et arcu id, lacinia dapibus magna. Sed elementum sollicitudin lectus ac blandit.
Box title
Aenean vitae justo sodales lorem tristique laoreet at vel velit. Sed a orci vel sem vehicula molestie non id felis. In hendrerit pellentesque ex a tincidunt. Sed et eros aliquam, interdum nibh at, tincidunt risus. Etiam elit turpis, porta quis mi sed, vulputate pulvinar diam. Donec ipsum felis, rutrum et arcu id, lacinia dapibus magna. Sed elementum sollicitudin lectus ac blandit.
Box title
Aenean vitae justo sodales lorem tristique laoreet at vel velit. Sed a orci vel sem vehicula molestie non id felis. In hendrerit pellentesque ex a tincidunt. Sed et eros aliquam, interdum nibh at, tincidunt risus. Etiam elit turpis, porta quis mi sed, vulputate pulvinar diam. Donec ipsum felis, rutrum et arcu id, lacinia dapibus magna. Sed elementum sollicitudin lectus ac blandit.
Box with header
Box with no transition
Box header
Box header
Slider
Our sliders are built with Swiper.
Slider with arrows
Slider with scrollbar
Slider with max width
We are using slider modifier class .slider--alpha to set max width of slider
Slider with arrows up
We are using slider modifier class .slider--beta to change position slider arrows
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
List-Group
- Lorem ipsum
- Dapibus ac facilisis in 2
- Morbi leo risus 3
- Porta ac consectetur ac 4
- Vestibulum at eros 99
- Lorem ipsum
- Dapibus ac facilisis in 2
- Morbi leo risus 3
- Porta ac consectetur ac 4
- Vestibulum at eros 99
Navs
.nav--inv
.flex-column
.font-weight-bold
.text-uppercase
.justify-content-center
.justify-content-end
.justify-content-between
Navs icons
Accolades
Tabs
Duis finibus rhoncus dui vitae tempus. Cras sed risus turpis. Etiam hendrerit suscipit dapibus. Sed interdum quam lorem, vel vulputate velit gravida sit amet. Suspendisse bibendum, sem vitae faucibus sodales, turpis tortor facilisis risus, quis sodales tellus leo a mauris. Nam vitae nunc lacus. Sed eget dapibus libero. Nam quis vulputate purus. Quisque gravida magna in diam semper, quis convallis ex pharetra. Proin tempus faucibus enim, vel fringilla magna lacinia vitae.
Prosciutto pork loin strip steak beef ribs ham pork belly tail jerky tenderloin drumstick. Bacon leberkas hamburger, chuck ball tip filet mignon ham hock pork loin strip steak shank. Short loin landjaeger beef ribs rump shank, strip steak t-bone pancetta shankle. Pork loin spare ribs leberkas capicola beef ribs meatloaf meatball tail strip steak salami alcatra turkey jerky ham hock.
Picanha turducken kielbasa ea ut in jowl chicken velit irure sint minim exercitation prosciutto. Nisi consectetur pancetta in ground round ball tip frankfurter in ad ea cupim tongue bresaola. Magna buffalo aliquip irure ham hock picanha ad dolore swine veniam capicola pastrami landjaeger nulla. Bresaola ea buffalo aliqua ham hock pastrami fatback. Minim tempor turducken cupim occaecat, leberkas et in biltong venison.
Pagination
Page pagination
Post pagination