documentation

avatar
alert
badge
button
card
responsive image
round image
input
list
modal
grid
text utilities
toast

avatars

avatar-sm
avatar-md
avatar-lg

sample code

<img class="avatar avatar-sm" src="/img/woman.svg" alt="small avatar"><p>avatar-sm</p>
<img class="avatar avatar-md" src="/img/man.svg" alt="medium avatar"><p>avatar-md</p>
<img class="avatar avatar-lg" src="/img/woman.svg" alt="large avatar"><p>avatar-lg</p>

alerts

primary alert
success alert
danger alert
warning alert

sample code

<span class="alert-primary">primary alert</span>
<span class="alert-success">success alert</span>
<span class="alert-danger">danger alert</span>
<span class="alert-warning">warning alert</span>

badges on avatars

badge-online
badge-offline
badge-busy

sample code

<div class="badge-container">
    <img class="avatar avatar-sm" src="/img/woman.svg" alt="avatar online">
    <span class="badge badge-avatar badge-online"></span>
</div>
<div class="badge-container">
    <img class="avatar avatar-md" src="/img/man.svg" alt="avatar offline">
    <span class="badge badge-avatar badge-offline"></span>
</div>
<div class="badge-container">
    <img class="avatar avatar-lg" src="/img/woman.svg" alt="avatar busy">
    <span class="badge badge-avatar badge-busy"></span>
</div>

badges on icons

sample code

<div class="badge-container">
    <img class="iconify-32" src="/img/shopping-cart.svg" alt="shopping cart">
    <span class="badge badge-icon">9</span>
</div>

buttons

sample code

<button class="button button-primary">primary</button>
<a class="link" href="/pages/doc.html#button">link</a>
<a href="https://www.linkedin.com/in/saksham-bhatt-13a177182/">
    <img class="iconify-32" src="/img/linkedin.svg" alt="linkedin link">
</a>

card with badge and shadow

on sale!

red stiletto

₹1899 (~~2999~~) 36% off available sizes (EU)

sample code

<div class="card-container">
    <div class="card card-shadow">
        <div class="badge-container">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/03/27/22/16/fashion-1284496_960_720.jpg" alt="shoe image">
            <span class="badge badge-card">on sale!</span>
        </div>
        <p class="product-name">red stiletto</p>
        <span><span class="final-price">₹1899</span> (<strike class="original-price">2999</strike>) <span class="percent-off">36% off</span></span>
        <span>available sizes (EU)</span>
        <ul>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
        </ul>
        <ul>
            <li><button class="button button-primary">add to cart</button></li>
            <li><button class="button-image"><img class="iconify-24" src="/img/like.svg" alt="like button"></button></li>
        </ul>
    </div>
</div>

card with dismiss

on sale!

red stiletto

₹1899 (~~2999~~) 36% off available sizes (EU)

sample code

<div class="card-container">
    <div class="card card-shadow card-dismiss">
        <div class="badge-container">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/03/27/22/16/fashion-1284496_960_720.jpg" alt="shoe image">
            <span class="badge badge-card">on sale!</span>
            <div><button class="button-dismiss"><img class="iconify-24" src="https://cdn.icon-icons.com/icons2/1674/PNG/512/close_111152.png" alt="close button image"/></button></div>
        </div>
        <p class="product-name">red stiletto</p>
        <span><span class="final-price">₹1899</span> (<strike class="original-price">2999</strike>) <span class="percent-off">36% off</span></span>
        <span>available sizes (EU)</span>
        <ul>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
        </ul>
        <ul>
            <li><button class="button button-primary">add to cart</button></li>
            <li><button class="button-image"><img class="iconify-24" src="/img/like.svg" alt="like button"></button></li>
        </ul>
    </div>
</div>

card with text overlay

text overlay

white mountain

₹1899999 (~~2999999~~) 36% off available sizes (EU)

sample code

<div class="card-container">
    <div class="card">
        <div class="overlay-container">
            <img class="card-image" src="https://www.w3schools.com/w3css/img_snow_wide.jpg" alt="sample image">
            <div class="text-overlay">text overlay</div>
        </div>
        <p class="product-name">white mountain</p>
        <span><span class="final-price">₹1899999</span> (<strike class="original-price">2999999</strike>) <span class="percent-off">36% off</span></span>
        <span>available sizes (EU)</span>
        <ul>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
        </ul>
        <ul>
            <li><button class="button button-primary">add to cart</button></li>
            <li><button class="button-image"><img class="iconify-24" src="/img/like.svg" alt="like button"></button></li>
        </ul>
    </div>
</div>

text only cards

Note1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam.

Note2

Note3

sample code

<div class="card-container">
    <div class="text-card">
        <p class="product-name">Note1</p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam.
    </div>
    <div class="text-card">
        <p class="product-name">Note2</p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam.
    </div>
    <div class="text-card">
        <p class="product-name">Note3</p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem eveniet hic, consectetur repudiandae reprehenderit corrupti doloremque mollitia, excepturi eius eaque et aut ex ea suscipit quia, ut molestias est aperiam.
    </div>    
</div>

horizontal card

on sale!

red stiletto

₹1899 (~~2999~~) 36% off available sizes (EU)

sample code

<div class="card-container">
    <div class="horizontal-card card-shadow card-dismiss">
        <div>
            <div class="badge-container">
                <img class="card-image-horizontal" src="https://cdn.pixabay.com/photo/2016/03/27/22/16/fashion-1284496_960_720.jpg" alt="shoe image">
                <span class="badge badge-card">on sale!</span>
            </div>
        </div>
        <div class="horizontal-card-description">
            <p class="product-name">red stiletto</p>
            <span><span class="final-price">₹1899</span> (<strike class="original-price">2999</strike>) <span class="percent-off">36% off</span></span>
            <span>available sizes (EU)</span>
            <ul class="list list-h">
                <li>36</li>
                <li>37</li>
                <li>38</li>
                <li>39</li>
                <li>40</li>
            </ul>
            <ul class="list list-h">
                <li><button class="button button-primary">add to cart</button></li>
                <li><button class="button-image"><img class="iconify-24" src="/img/like.svg" alt="like button"></button></li>
            </ul>
        </div>
    </div>
</div>

responsive image

sample code

<img class="responsive-image" src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images01.jpg" alt="sample responsive image">

round image

sample code

<img class="round-image" src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images01.jpg" alt="sample round image">

input field

required *

error

sample code

<div class="input-container">
    <div class="input-type">required *</div>
    <div class="error-msg">error</div>
    <input class="input" type="text"/>
</div>

input field: error

required *

error

sample code

<div class="input-container error">
    <div class="input-type">required *</div>
    <div class="error-msg">error</div>
    <input class="input" type="text"/>
</div>

list (horizontal)

sample code

<ul class="list list-h">
    <li><a href="https://twitter.com/lucksomecutt"><img class="iconify-32"  src="/img/twitter.svg" alt="twitter link"></a></li>
    <li><a href="https://github.com/sakshambhatt"><img class="iconify-32" src="/img/github.svg" alt="github link"></a></li>
    <li><a href="https://www.linkedin.com/in/saksham-bhatt-13a177182/"><img class="iconify-32" src="/img/linkedin.svg" alt="linkedin link"></a></li>
    <li><a href="https://sakshambhatt.hashnode.dev/"><img class="iconify-32" src="/img/hashnode.png" alt="hasnode blog link"></a></li>
</ul>

list (vertical)

available sizes (EU)

sample code

<ul class="list list-v">
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
</ul>

nav

sample code

<nav class="nav">
    <a class="link" href="/">home</a>
    <a class="link" href="/pages/installation.html">installation</a>
    <a class="link" href="/pages/doc.html">documentation</a>
    <a class="link" href="/pages/credits.html">credits</a>
</nav>

modal

sample code

<div class="modal list list-v">
    <p class="heading heading-3">modal header</p>
    <div class="modalContent">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus eos ipsum nesciunt nam deserunt voluptatem recusandae voluptatibus et, perferendis, nulla asperiores ea animi a quod ipsam, deleniti saepe laboriosam qui.
    </div>
    <div class="button">
        <button><img class="iconify-24" src="https://cdn.icon-icons.com/icons2/1674/PNG/512/close_111152.png" alt="close button"></button>
    </div>
</div>

grid 2

Item 1

Item 2

sample code

<div class="grid grid-2">
    <p>Item 1</p>
    <p>Item 2</p>
</div>

grid 3

Item 1

Item 2

Item 3

sample code

<div class="grid grid-3">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
</div>

headings

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

sample code

<p class="heading heading-1">heading 1</p>
<p class="heading heading-2">heading 2</p>
<p class="heading heading-3">heading 3</p>
<p class="heading heading-4">heading 4</p>
<p class="heading heading-5">heading 5</p>
<p class="heading heading-6">heading 6</p>

gray text

sample code

<p class="gray">gray text</p>

toast

The task was completed successfully

sample code

<div class="toast toast-success">
    <strong>The task was completed successfully</strong>
    <div>
        <button>close</button>
    </div>
</div>