Get started...!!
Introduction
So here is how you can get start with ART_ERY-UI, the framework that will increase your design and performance of your website
CSS
Copy-paste the stylesheet link into your head before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://artery-ui.netlify.app/artery-ui-dark.css">
JS
Copy-paste the script file below your body using the following code.
<script src="https://artery-ui.netlify.app/artery-ui.js"></script>
Avatar
The Avatar component is used to represent a user, and displays the profile picture, initials or
fallback icon.
-
xs
-
sm
-
md
-
lg
-
xl
-
xxl
<img class="avatar xs" src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg"
alt="Dog">
<img class="avatar sm"
src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg"
alt="Dog">
<img class="avatar md"
src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg"
alt="Dog">
<img class="avatar lg"
src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg"
alt="Dog">
<img class="avatar xl"
src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg"
alt="Dog">
<img class="avatar xxl"
src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg">
Badges
Badges are used to highlight an item's status for quick recognition.
Badges on Avatar
-
5
-
5
<div class="badge-container">
<img class="avatar md warning" src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg" alt=""><span class="avatar-badge warning ">5</span>
<div>
</div class="badge-container">
<img class="avatar md warning" src="https://image.freepik.com/free-photo/adorable-chocolate-labrador-retriever-portrait_53876-64833.jpg" alt=""> <span class="avatar-badge error ">5</span>
</div>
Badges on Icon
- 5
- 3
<div class="badge-container">
<svg viewBox="0 0 24 24" class="icon sm">
<g>
<path
d="M21.697 16.468c-.02-.016-2.14-1.64-2.103-6.03.02-2.532-.812-4.782-2.347-6.335C15.872 2.71 14.01 1.94 12.005 1.93h-.013c-2.004.01-3.866.78-5.242 2.174-1.534 1.553-2.368 3.802-2.346 6.334.037 4.33-2.02 5.967-2.102 6.03-.26.193-.366.53-.265.838.102.308.39.515.712.515h4.92c.102 2.31 1.997 4.16 4.33 4.16s4.226-1.85 4.327-4.16h4.922c.322 0 .61-.206.71-.514.103-.307-.003-.645-.263-.838zM12 20.478c-1.505 0-2.73-1.177-2.828-2.658h5.656c-.1 1.48-1.323 2.66-2.828 2.66zM4.38 16.32c.74-1.132 1.548-3.028 1.524-5.896-.018-2.16.644-3.982 1.913-5.267C8.91 4.05 10.397 3.437 12 3.43c1.603.008 3.087.62 4.18 1.728 1.27 1.285 1.933 3.106 1.915 5.267-.024 2.868.785 4.765 1.525 5.896H4.38z">
</path>
</g>
</svg>
<span class="avatar-badge error ">5</span>
</div>
<div class="badge-container">
<svg viewBox="0 0 24 24" class="icon sm">
<g>
<path
d="M12 11.816c1.355 0 2.872-.15 3.84-1.256.814-.93 1.078-2.368.806-4.392-.38-2.825-2.117-4.512-4.646-4.512S7.734 3.343 7.354 6.17c-.272 2.022-.008 3.46.806 4.39.968 1.107 2.485 1.256 3.84 1.256zM8.84 6.368c.162-1.2.787-3.212 3.16-3.212s2.998 2.013 3.16 3.212c.207 1.55.057 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.255-.223-2.71-.743c-.507-.578-.657-1.656-.45-3.205zm11.44 12.868c-.877-3.526-4.282-5.99-8.28-5.99s-7.403 2.464-8.28 5.99c-.172.692-.028 1.4.395 1.94.408.52 1.04.82 1.733.82h12.304c.693 0 1.325-.3 1.733-.82.424-.54.567-1.247.394-1.94zm-1.576 1.016c-.126.16-.316.246-.552.246H5.848c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.114 1.994 6.824 4.85c.06.242.017.48-.12.654z">
</path>
</g>
</svg>
<span class="avatar-badge warning ">3</span>
</div>
Buttons
The Button component is used to trigger an action or event, such as submitting a form, opening a
dialog, canceling an action, or performing a delete operation.
Primary buttons (differ in sizes)
<button class="btn primary-btn">SM-Button</button>
<button class="btn primary-btn md-btn">MD-Button</button>
<button class="btn lg-btn primary-btn">LG-Button</button>
<button class="btn xl-btn primary-btn">XL-Button</button>
Secondary buttons (differ in sizes)
<button class="btn secondary-btn">SM-Button</button>
<button class="btn secondary-btn md-btn">MD-Button</button>
<button class="btn lg-btn secondary-btn">LG-Button</button>
<button class="btn xl-btn secondary-btn">XL-Button</button>
Link button (differ in sizes)
<a href="#link-btn" class="text-decoration-none link-btn sm-btn btn ">SM-Button</a>
<a href="#link-btn" class="text-decoration-none link-btn md-btn btn ">MD-Button</a>
<a href="#link-btn" class="text-decoration-none link-btn lg-btn btn ">LG-Button</a>
<a href="#link-btn" class="text-decoration-none link-btn xl-btn btn ">XL-Button</a>
Icon buttons
<button id="like-btn" class="btn yellow-bg">
<svg viewBox="0 0 24 24" class="icon-btn ">
<g>
<path
d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z">
</path>
</g>
</button>
<button id="comment-btn" class="btn yellow-bg">
<svg viewBox="0 0 24 24" class="icon-btn">
<g>
<path
d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z">
</path>
</g>
</svg>
</button>
<button id="retweet-btn" class="btn yellow-bg">
<svg viewBox="0 0 24 24" class="icon-btn">
<g>
<path
d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z">
</path>
</g>
</svg>
</button>
Float buttons
<button class="float-btn yellow-bg">+</button>
<button class="float-btn yellow-bg">
<svg viewBox="0 0 24 24">
<g>
<path
d="M8.8 7.2H5.6V3.9c0-.4-.3-.8-.8-.8s-.7.4-.7.8v3.3H.8c-.4 0-.8.3-.8.8s.3.8.8.8h3.3v3.3c0 .4.3.8.8.8s.8-.3.8-.8V8.7H9c.4 0 .8-.3.8-.8s-.5-.7-1-.7zm15-4.9v-.1h-.1c-.1 0-9.2 1.2-14.4 11.7-3.8 7.6-3.6 9.9-3.3 9.9.3.1 3.4-6.5 6.7-9.2 5.2-1.1 6.6-3.6 6.6-3.6s-1.5.2-2.1.2c-.8 0-1.4-.2-1.7-.3 1.3-1.2 2.4-1.5 3.5-1.7.9-.2 1.8-.4 3-1.2 2.2-1.6 1.9-5.5 1.8-5.7z">
</path>
</g>
</svg>
</button>
<button class="float-btn yellow-bg">
<svg viewBox="0 0 24 24">
<g>
<path
d="M17.53 7.47l-5-5c-.293-.293-.768-.293-1.06 0l-5 5c-.294.293-.294.768 0 1.06s.767.294 1.06 0l3.72-3.72V15c0 .414.336.75.75.75s.75-.336.75-.75V4.81l3.72 3.72c.146.147.338.22.53.22s.384-.072.53-.22c.293-.293.293-.767 0-1.06z">
</path>
<path
d="M19.708 21.944H4.292C3.028 21.944 2 20.916 2 19.652V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 .437.355.792.792.792h15.416c.437 0 .792-.355.792-.792V14c0-.414.336-.75.75-.75s.75.336.75.75v5.652c0 1.264-1.028 2.292-2.292 2.292z">
</path>
</g>
</svg>
</button>
Cards
A Card is a flexible and extensible content container. It includes options for headers and
footers, a wide variety of content, contextual background colors, and powerful display options
Cards with badges
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum? new
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum? new
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum? new
<div class="card md-width-card vertical-card relative-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque
excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis
error rerum! Deserunt nemo ratione accusamus ipsum?
<span class="top-left badge">new</span>
</div>
<div class="card md-width-card vertical-card relative-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque
excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis
error rerum! Deserunt nemo ratione accusamus ipsum?
<span class="top-right badge">new</span>
</div>
<div class="card md-width-card align-center vertical-card relative-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque
excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis
error rerum! Deserunt nemo ratione accusamus ipsum?
<span class="bottom badge">new</span>
</div>
Cards with dismiss
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum? x
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum? x
<div class="card md-width-card vertical-card relative-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque
excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis
error rerum! Deserunt nemo ratione accusamus ipsum?
<span class="top-left dismiss-btn">x</span>
</div>
<div class="card vertical-card relative-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque
excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis
error rerum! Deserunt nemo ratione accusamus ipsum?
<span class="top-right dismiss-btn">x</span>
</div>
Cards with text overlay
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum?
<div class="card md-width-card vertical-card relative-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque
excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis
error rerum! Deserunt nemo ratione accusamus ipsum?
<div class="top-left overlay">These are some overlay text to display</div>
</div>
<div class="card md-width-card vertical-card relative-box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor
itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo
minima nobis error rerum! Deserunt nemo ratione accusamus ipsum?
<div class="top-left overlay">These are some overlay text to display</div>
</div>
Text only Cards
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum?
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo minima nobis error rerum! Deserunt nemo ratione accusamus ipsum?
<div class="card md-width-card vertical-card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor
itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo
minima nobis error rerum! Deserunt nemo ratione accusamus ipsum?
</div>
<div class="card lg-width-card vertical-card">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quis dolor
itaque excepturi sint odio quisquam amet explicabo, quam, voluptatibus quo
minima nobis error rerum! Deserunt nemo ratione accusamus ipsum?
</div>
Vertical cards
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.
<div class="card md-width-card vertical-card">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
Horizontal cards
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.
<div class="card horizontal-card">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
Cards with shadow
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem vitae quo quia! Harum ratione magnam inventore alias, esse illum sint consequatur mollitia quidem placeat earum nam sit natus vel debitis!
<div class="vertical-card card md-width-card shadow">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem vitae quo quia! Harum ratione magnam inventore alias, esse illum sint consequatur mollitia quidem placeat earum nam sit natus vel debitis!
</div>
Images
These can be used to size the images
Responsive image
<div class="align-center" >
<img class="img-fluid"
src="https://images.unsplash.com/photo-1589278560468-2f9bbaf07e90?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1029&q=80"
alt="yellow-desk">
</div>
<div class="align-center">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1589278560468-2f9bbaf07e90?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1029&q=80"
alt="yellow-desk">
</div>
Round image
-
sm
-
md
-
lg
<div class="align-center round sm-img">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1589278560468-2f9bbaf07e90?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1029&q=80"
alt="yellow-desk">
</div>
<div class="align-center round md-img">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1589278560468-2f9bbaf07e90?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1029&q=80"
alt="yellow-desk">
</div>
<div class="align-center round lg-img">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1589278560468-2f9bbaf07e90?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1029&q=80"
alt="yellow-desk">
</div>
Input
This can be used in the input tags
-
The error message
<div class="align-center">
<input placeholder="Enter your email here" class="input curve" type="email">
<div class="error-msg curve">The error message </div>
<input placeholder="Type your input here" class="input " type="text">
</div>
Lists
This can be used in the lists
spaced list
-
item 1
-
item 2
-
item 3
-
item 4
<ul class="list card vertical-card non-bullet">
<li class="spaced-list-item">
<p>item 1</p>
</li>
<li class="spaced-list-item">
<p>item 2</p>
</li>
<li class="spaced-list-item">
<p>item 3</p>
</li>
<li class="spaced-list-item">
<p>item 4</p>
</li>
</ul>
Stacked lists
-
item 1
-
item 2
-
item 3
-
item 4
<ul class="list card vertical-card non-bullet">
<li class="stacked-list-item">
<p>item 1</p>
</li>
<li class="stacked-list-item">
<p>item 2</p>
</li>
<li class="stacked-list-item">
<p>item 3</p>
</li>
<li class="stacked-list-item">
<p>item 4</p>
</li>
</ul>
Modal
This can be used in the modal tags
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut molestias quasi praesentium quis obcaecati ducimus incidunt in eius dignissimos provident, quisquam neque? Quos ullam dolor assumenda asperiores dolorum sed doloribus.
<div class="vertical-card card space-between">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut molestias quasi
praesentium quis obcaecati ducimus incidunt in eius dignissimos provident, quisquam
neque? Quos ullam dolor assumenda asperiores dolorum sed doloribus.
<button id="show-modal" class="primary-btn btn">Show modal</button>
</div>
<div id="modal" class="modal ">
<div class="modal-contents relative-box">
<button id="close-modal" class=" top-right dismiss-btn absolute-box round xs ">x</button>
<div class="sub-heading ">Modal heading
</div>
<hr>
<div class="description ">
The modal description can be written here
</div>
</div>
</div>
Rating
This can be used in set your rating components
<!-- checked start -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
class="rating-icon checked-icon" viewBox="0 0 32 32">
<title>star-full</title>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z">
</path>
</svg>
<!-- unchecked star -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="rating-icon"
viewBox="0 0 32 32">
<title>star-empty</title>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z">
</path>
</svg>
Grid
use this for Grid layout
Grid-2
-
first columnsecond column
-
first columnLorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, minima asperiores distinctio aliquam laudantium ad veniam temporibus nemo nobis consequuntur molestiae. Laboriosam distinctio ea repellendus tempore obcaecati ab nisi quod.
<div class="grid-2">
<div class="grid-item1">
first column
</div>
<div class="grid-item2">
second column
</div>
</div>
<div class="grid-2">
<div class="grid-item1">
first column
</div>
<div class="grid-item2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, minima
asperiores distinctio aliquam laudantium ad veniam temporibus nemo nobis
consequuntur molestiae. Laboriosam distinctio ea repellendus tempore obcaecati
ab nisi quod.
</div>
</div>
Grid-3
-
first columnsecond columnthird column
-
first columnLorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, minima asperiores distinctio aliquam laudantium ad veniam temporibus nemo nobis consequuntur molestiae. Laboriosam distinctio ea repellendus tempore obcaecati ab nisi quod.third column
<div class="grid-3">
<div class="grid-item1">
first column
</div>
<div class="grid-item2">
second column
</div>
<div class="grid-item3">
third column
</div>
</div>
<div class="grid-3">
<div class="grid-item1">
first column
</div>
<div class="grid-item2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, minima
asperiores distinctio aliquam laudantium ad veniam temporibus nemo nobis
consequuntur molestiae. Laboriosam distinctio ea repellendus tempore obcaecati
ab nisi quod.
</div>
<div class="grid-item3">
third column
</div>
</div>
Text Utilities
This Text Utilities for different texts
Headers
The main Header
The sub header
<p> class="main-heading">The main Header </p>
<p> class="sub-heading">The sub header </p>
Grey text
The grey main Header
The grey sub header
The grey description
The normal grey text
The small grey text
<p class="grey-text xl-txt">The grey main Header</p>
<p class="grey-text lg-txt">The grey sub header</p>
<p class="grey-text md-txt">The grey description </p>
<p class="grey-text"><The normal grey text</p>
<p class="grey-text sm-txt">The small grey text</p>
Centered text
The centered heading
The centered sub header
The centered description
The centered normal text
The centered small text
<p class="xl-txt center">The centered heading </p>
<p class="lg-txt center">The centered sub header</p>
<p class="md-txt center">The centered description </p>
<p class="center"> The centered normal text</p>
<p class="sm-txt center">The centered small text</p>
Toasts
This can be used in toast messages
<p id="toast-msg1" class="toast-message">this is toast message <span class="dismiss" id="dismiss-msg1">x</span></p>
<p id="toast-msg2" class="toast-message red-text red-border">this is toast message <span class="dismiss" id="dismiss-msg2">x</span></p>