Avatar

The Avatar component is used to represent user, and displays the profile picture, initials or icon.

Image Avatar

The .avatar class gives you the default avatar component.

                    
<img class="avatar avatar-xl" src="https://i.pravatar.cc/200" alt="avatar-img" />
<img class="avatar avatar-lg" src="https://i.pravatar.cc/200" alt="avatar-img" />
<img class="avatar" src="https://i.pravatar.cc/200" alt="avatar-img" />
<img class="avatar avatar-sm" src="https://i.pravatar.cc/200" alt="avatar-img" />
<img class="avatar avatar-xs" src="https://i.pravatar.cc/200" alt="avatar-img" />
                    
                

Text Avatar

Use .avatar with a div tag with text for a text avatar.

                    
<div class="avatar avatar-xl">AB</div>
<div class="avatar avatar-lg">AB</div>
<div class="avatar">AB</div>
<div class="avatar avatar-sm">AB</div>
<div class="avatar avatar-xs">AB</div>
                    
                

Square Avatar

Use .avatar-sq modifier class to get a sqaure avatar.

                    
<div class="avatar avatar-sq">AB</div>
<img class="avatar avatar-sq" src="https://i.pravatar.cc/200" alt="avatar-img" />
                    
                

Alert

Alert can be used to provide contextual feedback messages for typical user actions. Use .alert to import the base styles of alert. Combine with modifier classname to get the desired alert type.

Primary Alert

Use .primary for the primary alert. The alert class can be combined with .outlined to get a outlined variant of alert.

                    
<div class="alert primary">A simple primary alert—check it out!</div>
<div class="alert primary outlined">A outlined primary alert—check it out!</div>                        
                    
                

Success Alert

Use .success for the success alert.

                    
<div class="alert success">A simple success alert—check it out!</div>
<div class="alert success outlined">A outlined success alert—check it out!</div>                        
                    
                

Danger Alert

Use .danger for the danger alert.

                    
<div class="alert danger">A simple danger alert—check it out!</div>
<div class="alert danger outlined">A outlined danger alert—check it out!</div>                        
                    
                

Warning Alert

Use .warn for the warning alert.

                    
<div class="alert warn">A simple warning alert—check it out!</div>
<div class="alert warn outlined">A outlined warning alert—check it out!</div>                        
                    
                

Alert with icon

You can also add icons to the alert.

                    
<div class="alert primary icon"><i class="fas fa-info-circle"></i>A primary alert with icon—check it out!</div>
<div class="alert danger icon"><i class="fas fa-exclamation-circle"></i>A danger alert with icon—check it out!</div>                   
                    
                

Badge

Badges are being used to display a notification count or status information. Color badge can be used to show the status of user. The number badge can be used to show the cart or notification count.

Profile Badge

                    
<div class="badge-container">
    <img class="avatar" src="https://i.pravatar.cc/200" alt="avatar-img" />
    <div class="badge bottom right bg-red"></div>
</div>
<div class="badge-container">
    <img class="avatar" src="https://i.pravatar.cc/200" alt="avatar-img" />
    <div class="badge bottom right bg-green"></div>
</div>
<div class="badge-container">
    <div class="avatar">AB</div>
    <div class="badge bottom right bg-yellow"></div>
</div>
                    
                

Number Badge

                    
<div class="badge-container">
    <img class="avatar" src="./assets/cart.svg" alt="avatar-img" />
    <div class="badge bg-red top right">9+</div>
</div>
<div class="badge-container">
    <div class="avatar">AB</div>
    <div class="badge bg-green bottom left">55</div>
</div>
<div class="badge-container">
    <div class="avatar">AB</div>
    <div class="badge bg-yellow bottom right">55</div>
</div>
                    
                

Button

A button is a fundamental UI element that will heavily affect your interaction design. Buttons have the power to compel users to convert, to carry out an action. We have range of buttons and their states. You may use a tag or button element, you need to add respective classes, and you are good to go.

.btn class provides the default style of a button. Use the other classes along with the .btn to get the desired button style

Primary button

                    
<button class="btn primary">Primary Button</button>
<button class="btn primary outlined">Primary Outlined Button</button>
<button class="btn primary">GitHub <i class="fab fa-github"></i></i></button>
<button class="btn primary outlined"><i class="fas fa-search"></i></button>
<button class="btn primary icon-only"><i class="fas fa-search"></i></button>
                    
                

Success button

                    
<button class="btn success">Success Button</button>
<button class="btn success outlined">Success Outlined Button</button>
<button class="btn success">GitHub <i class="fab fa-github"></i></i></button>
<button class="btn success outlined"><i class="fas fa-search"></i></button>
<button class="btn success icon-only"><i class="fas fa-search"></i></button>
                    
                

Danger Button

                    
<button class="btn danger">Danger Button</button>
<button class="btn danger outlined">Danger Outlined Button</button>
<button class="btn danger">GitHub <i class="fab fa-github"></i></i></button>
<button class="btn danger outlined"><i class="fas fa-search"></i></button>
<button class="btn danger icon-only"><i class="fas fa-search"></i></button>
                    
                

Warn button

                    
<button class="btn warn">Warning Button</button>
<button class="btn warn outlined">Warning Outlined Button</button>
<button class="btn warn">GitHub <i class="fab fa-github"></i></i></button>
<button class="btn warn outlined"><i class="fas fa-search"></i></button>
<button class="btn warn icon-only"><i class="fas fa-search"></i></button>
                    
                

Links

                    
<a href="#" class="link primary">Primary link</a>
<a href="#" class="link">Secondary Link</a>
                    
                

Floating Action Button

                    
<button class="btn fab bottom-right primary"><i class="fas fa-search"></i></button>
<a href="#" class="btn fab bottom-left primary"><i class="fas fa-arrow-up"></i></a>
                    
                

Disabled button

                    
<button disabled class="btn primary">Primary Disabled Button</button>
<button disabled class="btn primary outlined">Primary Disabled Outlined Button</button>
<button disabled class="btn primary">GitHub <i class="fab fa-github"></i></i></button>
<button disabled class="btn primary outlined"><i class="fas fa-search"></i></button>
<button disabled class="btn primary icon-only"><i class="fas fa-search"></i></button>
                    
                

Cards

Card are used to show user related data collectively, like product details, social media posts etc,.

Vertical card

                    
<div class="card">
    <div class="card-media">
        <img class="img-responsive img-rounded" src="https://picsum.photos/200" alt="card media" />
    </div>
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
                                    architecto</p>
        <small>lorem ipsum dolor sit amet</small>
    </div>
    <div class="card-footer">
        <button class="btn primary">Primary</button>
        <button class="btn primary outlined">Secondary</button>
    </div>
</div>
                    
                

Vertical card with media margin

                    
<div class="card container">
    <div class="card-media">
        <img class="img-responsive img-rounded" src="https://picsum.photos/200" alt="card media" />
    </div>
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
                                    architecto</p>
        <small>lorem ipsum dolor sit amet</small>
    </div>
    <div class="card-footer">
        <button class="btn primary">Primary</button>
        <button class="btn primary outlined">Secondary</button>
    </div>
</div>
                    
                

Text only card

                    
<div class="card">
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos sint illo perspiciatis, est animi nam totam eaque! Placeat sint cumque modi deleniti expedita quod commodi. Suscipit rem illo a ducimus.
                                Assumenda repellendus accusantium incidunt a nobis,</p>
    </div>
    <div class="card-footer">
        <button class="btn primary">Primary</i></button>
        <button class="btn primary outlined">Secondary</i></button>
    </div>
</div>
                    
                

Horizontal card

                    
<div class="card card-horizontal">
    <div class="card-media">
        <img class="img-responsive img-rounded" src="https://picsum.photos/200" alt="card media"/>
    </div>
    <div>
        <div class="card-body">
            <h3 class="card-title">Card Title</h3>
            <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque dolores architecto</p>
            <small>lorem ipsum dolor sit amet</small>
        </div>
        <div class="card-footer">
            <button class="btn primary">Primary</button>
            <button class="btn primary outlined">Secondary</button>
        </div>
    </div>
</div>
                    
                

Card with shadow

                    
<div class="card shadow">
    <div class="card-media">
        <img class="img-responsive img-rounded" src="https://picsum.photos/200" alt="card media" />
    </div>
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
                                    architecto</p>
        <small>lorem ipsum dolor sit amet</small>
    </div>
    <div class="card-footer">
        <button class="btn primary">Primary</button>
        <button class="btn primary outlined">Secondary</button>
    </div>
</div>
                    
                

Card with badge

                    
<div class="card container badge-container">
    <div class="badge bg-red">Exclusive!</div>
    <div class="card-media">
        <img class="img-responsive img-rounded" src="https://picsum.photos/200" alt="card media" />
    </div>
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
                                    architecto</p>
        <small>lorem ipsum dolor sit amet</small>
    </div>
    <div class="card-footer">
        <button class="btn primary">Primary</button>
        <button class="btn primary outlined">Secondary</button>
    </div>
</div>
                    
                

Card with dismiss

                    
<div class="card dismiss">
    <button class="btn icon-only"><i class="fa fa-times"></i></button>
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos sint illo perspiciatis, est animi nam totam eaque! Placeat sint cumque modi deleniti expedita quod commodi. Suscipit rem illo a ducimus.
                                Assumenda repellendus accusantium incidunt a nobis,</p>
    </div>
    <div class="card-footer">
        <button class="btn primary">Primary</i></button>
        <button class="btn primary outlined">Secondary</i></button>
    </div>
</div>
                    
                

Card with overlay

                
<div class="card container overlay">
    <div class="overlay">Overlay</div>
    <div class="card-media">
        <img class="img-responsive img-rounded" src="https://picsum.photos/200" alt="card media" />
    </div>
    <div class="card-body">
        <h3 class="card-title">Card Title</h3>
        <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
            architecto</p>
        <small>lorem ipsum dolor sit amet</small>
    </div>
    <div class="card-footer">
        <button class="btn primary">Primary</button>
        <button class="btn primary outlined">Secondary</button>
    </div>
</div>
                
            

Card with overlay on hover

            
<div class="ard container overlay onhover">
<div class="overlay">Overlay</div>
<div class="card-media">
    <img class="img-responsive img-rounded" src="https://picsum.photos/200" alt="card media" />
</div>
<div class="card-body">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
        architecto</p>
    <small>lorem ipsum dolor sit amet</small>
</div>
<div class="card-footer">
    <button class="btn primary">Primary</button>
    <button class="btn primary outlined">Secondary</button>
</div>
</div>
            
        

Dropdown

To use Xenon UI dropdowns, You just need to copy the html code given below and fill in your content. Make sure you have added the script tag mentioned in the installation section to your project.

Dropdown interaction are handled using the data attribute. Assign the data-xe-target attribute the id of the dropdown menu to add the interactivity

                    
<div class="dropdown">
    <button class="btn primary dropdown-toggle" data-xe-toggle="dropdown" data-xe-target="example-dropdown">Dropdown</button>
    <ul class="dropdown-menu" id="example-dropdown">
        <li class="dropdown-item">Dropdow menu item 1</li>
        <li class="dropdown-item">Dropdow menu item 2</li>
        <li class="dropdown-item">Dropdow menu item 3</li>
    </ul>
</div>
                    
                

Simplified Grid

The grid items in these examples are images. You can use any elements according to the use case.

Grid 50-50

                    
<div class="grid grid-50-50">
    <img src="https://picsum.photos/720" height="100%" width="100%">
    <img src="https://picsum.photos/720" height="100%" width="100%">
</div>
                    
                

Grid 30-70

                    
<div class="grid grid-30-70">
    <img src="https://picsum.photos/720" height="100%" width="100%">
    <img src="https://picsum.photos/720" height="100%" width="100%">
</div>
                    
                

Grid 20-80

                    
<div class="grid grid-20-80">
    <img src="https://picsum.photos/720" height="100%" width="100%">
    <img src="https://picsum.photos/720" height="100%" width="100%">
</div>
                    
                

Grid 30-40-30

                    
<div class="grid grid-30-40-30">
    <img src="https://picsum.photos/720" height="100%" width="100%">
    <img src="https://picsum.photos/720" height="100%" width="100%">
    <img src="https://picsum.photos/720" height="100%" width="100%">
</div>
                    
                

Grid 20-60-20

                    
<div class="grid grid-20-60-20">
    <img src="https://picsum.photos/720" height="100%" width="100%">
    <img src="https://picsum.photos/720" height="100%" width="100%">
    <img src="https://picsum.photos/720" height="100%" width="100%">
</div>
                    
                

Images

Images can be responsive to fit the parent's width, and also can be customised to have rounded corners or as a circle

Responsive Image

You can add class img-responsive to make your image fit the width of container. It's height will get adjusted by keeping the aspect ratio same.

                    
<img class="img-responsive" src="..."/>
                    
                

Rounded Edges

You can add class img-rounded to give your image rounded edges.

                    
<img class="img-rounded" src="..."/>
                    
                

Circle Image

You can add class img-circle to make your image circle shape.

                    
<img class="img-circle" src="..."/>
                    
                

Input and textarea

Inputs are used in forms to collect user related data. Use input class to input, select or textarea element.

Use invalid to the input elements for invalid input.

Use invalid-feedback for the invalid text feedback.

                    
<div>
<label class="label" for="email-example">Username</label> 
<input class="input" type="text" placeholder="Type something here..."/> 
</div>

<div>
<label class="label" for="email-example">Email</label> 
<input class="input invalid" id="email-example" type="email" placeholder="Input with invalid feedback"/>
<span class="invalid-feedback">Invalid email</span>
</div>

<textarea cols="30" class="input"></textarea>
                    
                

Input with icon

Wrap the .icon-only button along with input tag inside .input-icon class to get a input component with icon button.

                    
                        <div class="input-icon">
                            <button class="btn icon-only"><i class="fa fa-search"></i></button>
                            <input class="input" type="text" placeholder="Type something here..."/>
                        </div>
                        <div class="input-icon">
                            <input class="input" type="text" placeholder="Type something here..."/>
                            <button class="btn icon-only"><i class="fa fa-search"></i></button>
                        </div>
                    
                

Select

                    
<select class="input">
    <option selected disabled>Select</option>
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
</select>
                    
                

Disabled and Read Only input

Using disabled or readonly attribute gives the disabled styles to the input elements. You need not add any another css class for it.

                    
<div>
    <label class="label" for="email-example">Username</label> 
    <input disabled class="input" type="text" placeholder="Type something here..."/> 
</div>

<div>
    <label class="label">Select</label>
    <select disabled class="input">
        <option selected disabled>Select</option>
        <option>Item 1</option>
        <option>Item 2</option>
        <option>Item 3</option>
    </select>
</div>
                    
                

List

Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.

Unordered List with bullets

                    
<ul class="list ul-disc">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>
<ul class="list ul-square">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>
<ul class="list ul-circle">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ul>
                    
                

Ordered List with bullets

                    
<ol class="list ol-number">
    <li>Numbered list item</li>
    <li>Numbered list item</li>
    <li>Numbered list item</li>
    <li>Numbered list item</li>
</ol>
<ol class="list ol-lower-alpha">
    <li>List item with lowercase alphabets</li>
    <li>List item with lowercase alphabets</li>
    <li>List item with lowercase alphabets</li>
    <li>List item with lowercase alphabets</li>
</ol>
<ol class="list ol-upper-alpha">
    <li>List item with uppercase alphabets</li>
    <li>List item with uppercase alphabets</li>
    <li>List item with uppercase alphabets</li>
    <li>List item with uppercase alphabets</li>
</ol>
<ol class="list ol-lower-roman">
    <li>List item with lowercase roman</li>
    <li>List item with lowercase roman</li>
    <li>List item with lowercase roman</li>
    <li>List item with lowercase roman</li>
</ol>
<ol class="list ol-upper-roman">
    <li>List item with uppercase roman</li>
    <li>List item with uppercase roman</li>
    <li>List item with uppercase roman</li>
    <li>List item with uppercase roman</li>
</ol>
<ol class="list ol-number" reversed>
    <li>Reversed list item</li>
    <li>Reversed list item</li>
    <li>Reversed list item</li>
    <li>Reversed list item</li>
</ol>
                    
                

List with no bullets

                    
<ul class="list no-bullets">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
                    
                

Inline list

                    
<ul class="list inline">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
                    
                

Stacked list

                    
<ul class="list stacked">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
                    
                

Modal

Xenon UI has two variants of Modal. You can copy the html code given below to use the modal in your projects. Make sure you have included the script given in the installation section.

The centered class on modal-dialog aligns the modal to the center of the page.

Handling the interactivity

Opening the modals are handled by adding data attribute to that button which will be responsible for opening the modal. The value of data-xe-target attribute should be the id of the modal.

The button should also have data-xe-toggle attribute with "modal" as it's value to attach the click event for opening the modal.

                    
<div class="modal" id="exampleModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h3> Modal Title</h3>
            <button class="btn primary icon-only modal-close"><i class="fa fa-times"></i></button>
        </div>
        <div class="modal-body">
            <h4>Modal body</h4>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
                architecto</p>
            <small>lorem ipsum dolor sit amet</small>
        </div>
        <div class="modal-footer">
            <button class="btn primary">Primary</button>
            <button class="btn primary outlined">Secondary</button>
        </div>
    </div>
</div>
                    
                

                
<!-- Centered Modal -->
<div class="modal" id="centeredModal">
    <div class="modal-dialog centered">
        <div class="modal-header">
            <h3> Modal Title</h3>
            <button class="btn primary icon-only modal-close"><i class="fa fa-times"></i></button>
        </div>
        <div class="modal-body">
            <h4>Modal body</h4>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dolores
                architecto</p>
            <small>lorem ipsum dolor sit amet</small>
        </div>
        <div class="modal-footer">
            <button class="btn primary">Primary</button>
            <button class="btn primary outlined">Secondary</button>
        </div>
    </div>
</div>
                    
                

Navigation bar

Responsive navigation

                    
                        <nav>
                            <div class="nav-section left">
                                <div class="nav-logo">
                                    <a href="/index.html"><img loading="lazy" src="../assets/logo_black.png" alt="logo"/></a>
                                </div>
                                <ul class="nav-menu">
                                    <li class="nav-menu-item"><a class="fw-bold" href="/">Home</a></li>
                                    <li class="nav-menu-item"><a class="fw-bold" href="/">Documentation</a></li>
                                </ul>
                            </div>
                            <div class="nav-section right">
                                <ul class="nav-menu">
                                    <li class="nav-menu-item"><i class="fs-2 fab fa-github"></i><</li>
                                    <li class="nav-menu-item"><i class="fs-2 fab fa-twitter"></i><</li>
                                    <li class="nav-menu-item"><i class="fs-2 fab fa-linkedin"></i><</li>
                                </ul>
                                <div class="nav-menu-resp"><i class="fas fa-bars"></i></div>
                            </div>
                        </nav>
                    
                

Navigation with search

                    
<nav>
    <div class="nav-section left">
        <div class="nav-logo">
            <a href="/index.html"><img loading="lazy" src="../assets/store-logo.png" alt="logo"/></a>
        </div>
        <ul class="nav-menu">
            <li class="nav-menu-item"><a class="fw-bold">Home</a></li>
            <li class="nav-menu-item"><a class="fw-bold">Shop Now</a></li>
        </ul>
    </div>
    <div>
    </div>
    <div class="nav-section right">
        <ul class="nav-menu">
            <div class="input-icon">
                <input class="input" type="text" placeholder="search"/>
                <button class="btn icon-only"><i class="fa fa-search"></i></button>
            </div>
            <li class="nav-menu-item"><a class="fw-bold"><i class="fs-2 fa-solid fa-user"></i></a></li>
            <li class="nav-menu-item"><a class="fw-bold"><i class="fs-2 fa-solid fa-heart"></i></a></li>
            <li class="nav-menu-item"><a class="fw-bold"><i class="fs-2 fa fa-cart-shopping"></i></a></li>
        </ul>
        <div class="nav-menu-resp"><i class="fas fa-bars"></i></div>
    </div>
</nav>
                    
                

Rating

Use .rating to use the styles of rating component.

                    
<div class="rating">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
</div>
                    
                

Toast

Toast Demo

Success toast Error toast Warn toast

                    
<div class="toast success" id="example-success-toast">
    <p class="toast-message">This is a toast</p>
    <div class="toast-controls">
        <button class="btn icon-only"><i class="fa fa-times"></i></button>
    </div>
</div>
<div class="toast error" id="example-error-toast">
    <p class="toast-message">This is a toast</p>
    <div class="toast-controls">
        <button class="btn icon-only">Retry</button>
        <button class="btn icon-only"><i class="fa fa-times"></i></button>
    </div>
</div>
<div class="toast warn" id="example-warn-toast">
    <p class="toast-message">This is a toast</p>
    <div class="toast-controls">
        <button class="btn icon-only"><i class="fa fa-times"></i></button>
    </div>
</div>  
                    
                

Utilities

Documentation and examples for common text utilities to control alignment, weight, and more.

Heading

All HTML headings, <h1> through <h6>, are available.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

                
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
                
            

Font sizes

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

                
<p class="fs-5">Lorem ipsum dolor.</p>
<p class="fs-4">Lorem ipsum dolor.</p>
<p class="fs-3">Lorem ipsum dolor.</p>
<p class="fs-2">Lorem ipsum dolor.</p>
<p class="fs-1">Lorem ipsum dolor.</p>
                
            

Alignment

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

                
<p class="text-left">Lorem ipsum dolor.</p>
<p class="text-center">Lorem ipsum dolor.</p>
<p class="text-right">Lorem ipsum dolor.</p>    
                
            

Font colors

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

Lorem ipsum dolor.

                
<p class="text-primary">Lorem ipsum dolor.</p>
<p class="text-secondary">Lorem ipsum dolor.</p>
<p class="text-success">Lorem ipsum dolor.</p>
<p class="text-danger">Lorem ipsum dolor.</p>
<p class="text-warn">Lorem ipsum dolor.</p>