Row
row
The row class is the foundation of the flexbox grid system. They are needed in order for the row-col class to work.
row-nested
Use the class combo row row-nested to put a row inside of a row. This is helpful if you want to create sub grids.
row-break
row-justify-end
row-justify-center
row-justify-space-around
row-justify-space-between
row-align-end
row-align-center
row-align-stretch
row-col
Grid
row-col lg-*
row-col md-*
row-col sm-*
row-col xs-*
row-col offset-lg-*
row-col offset-md-*
row-col offset-sm-*
row-col offset-xs-*
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
This is a lead paragraph. A lead is used to call out text and make it prominent.
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus arcu bibendum at varius. Est sit amet facilisis magna etiam tempor. Cursus in hac habitasse platea dictumst quisque sagittis. Neque aliquam vestibulum morbi blandit cursus risus at. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- first item
- section item
- third item
"Blockquote text is slightly bigger and calls out text where you want to."
—Jeffery
![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5098982504c16_Podcast-cover.jpg)
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- first item
- section item
- third item
"Blockquote text is slightly bigger and calls out text where you want to."
—Jeffery
![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5098982504c16_Podcast-cover.jpg)
![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5098982504c16_Podcast-cover.jpg)
![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5098982504c16_Podcast-cover.jpg)
![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5098982504c16_Podcast-cover.jpg)
![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5098982504c16_Podcast-cover.jpg)
This is the blockquote element
unordered list
You can change between ordered and unordered in the settings tab.
- item 1
- item 2
ordered list
You can change between ordered and unordered in the settings tab.
- item 1
- item 2
- item 3
Nested list
- item 1
- item 2
- nested item a
- nested item b
- nested item c
list group
- item 1
- item 2
- item 3
list group flush
- item 1
- item 2
- item 3
Forms
Accordion
Accordion
What is the meaning of life?
What is my favorite fruit?
How does my hair look?
Where is my mind?
Accordion flush
What is the meaning of life?
What is my favorite fruit?
How does my hair look?
Where is my mind?
Alerts
Badges New
Badges New
Badges New
Badges New
Badges New
Badges New
Breadcrumb
Cards
Card-title
Card-subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text LinkText LinkButton TextCard-title
Card-subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text LinkText LinkButton Text![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5093d0d504c1d_Placeholder_600x400.png)
Card-title
Card-subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
![](https://cdn.prod.website-files.com/6247680736c5096866504c0c/6247680736c5093d0d504c1d_Placeholder_600x400.png)
Card-title
Card-subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Slider
Collapse
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Modal
modal-title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- This is a list group
- This is a list group
- This is a list group
Navbar
Horizontal
Vertical
Off canvas
Offcanvas-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Offcanvas-left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Toast
Add border
Remove border
flex order
order-lg-*
order-md-*
order-sm-*
order-xs-*
Shadow
hr width
margin
m-*
mt-*
mr-*
mb-*
ml-*
mx-*
my-*
padding
p-*
pt-*
pr-*
pb-*
pl-*
px-*
py-*
Text
text-center
text-right
text-justify
text-italic
text-bold
text-regular
text-decoration-none
text-strikethrough
text-underline
text-overline
text-uppercase
text-captialize
text-lowercase
text-direction-right
text-superscript
text-subscript
text-muted
text-reset link that's color has been reset
Background
Text color
This is a title
This is some text here
This is a title