Components

Intro Avatar Alert Badge Button Card Input List Modal Navigation Rating Toast Grid Text Utilities

Intro

Looking to quickly add Atom css to your project? Copy the following link tag in the html file and start using- 
          
            <link rel="stylesheet"  href="https://atomcss.netlify.app/index.css"/>

Avatar

            
              <img src="..." class="avatar-lg" />
            
              <img src="..." class="avatar-md" />
                       
              <img src="..." class="avatar-sm" />

Alert

Danger alert
Green alert
Some alert
            
              <div class="alert-red ">
                <div class="alert-text">Danger alert</div>
                <img class="alert-image" src="./assets/x-mark.svg">
              </div>

              <div class="alert-green ">
                <div class="alert-text">Green alert</div>
                <img class="alert-image" src="./assets/x-mark.svg">
              </div>

              <div class="alert ">
              <div class="alert-text">Some alert</div>
              <img class="alert-image" src="./assets/x-mark.svg">
            </div>

Badge

badge on icons

41
42
42 
            
              <div class="badge">
              <img src="./assets/home.svg" class="badge-img-sm" />
              <span class="badge-text-sm">42</span>

              <div class="badge">
              <img src="./assets/home.svg" class="badge-img-md" />
              <span class="badge-text-md">42</span>
            </div>

            <div class="badge">
              <img src="./assets/home.svg" class="badge-img-lg" />
              <span class="badge-text-lg">42</span>
            </div>

Badge on avatar

41
41
41 
          
            <div class="badge">
            <img src="..." class="avatar-lg"/>
            <span class="badge-avatar-text-lg">41</span>
          </div>

          <div class="badge">
            <img src="..." class="avatar-md"/>
            <span class="badge-avatar-text-md">41</span>
          </div>

        <div class="badge">
          <img src="..." class="avatar-sm"/>
          <span class="badge-avatar-text-sm ">41</span>
        </div>

Button



            
              <button class=" btn btn-primary-lg">Primary Button</button>
              <button class=" btn btn-primary-md">Primary Button</button>
              <button class=" btn btn-primary-sm">Primary Button</button>    
            
          



            
              <button class=" btn btn-secondary-lg">secondary Button</button>
              <button class=" btn btn-secondary-md">secondary Button</button>
              <button class=" btn btn-secondary-sm">secondary Button</button>



Link Button Link Button 

            
              <a href="" class="btn-primary-md">Link Button</a>
              <a href="" class="btn-secondary-md">Link Button</a>

Floating action button


            
              <button class="btn-floating relative" style="height: 2rem;width: 2rem;">+</button>

Card

Header
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis nisi obcaecati facilis consequuntur quae ea! Nulla, rem. Ea perferendis illo exercitationem doloremque vel enim? At praesentium vero ullam aspernatur dolorem?
            
              <div class="card" style="width:18rem">
              <img class="card-image" src="..." div class="card-body">
              <div class="card-head">Header</div>
              <div class="card-text">
              Lorem ipsum...
              </div>
              <button class="btn btn-primary-md mg-top-1">Go Somewhere</button>
              </div>
            </div>

Name

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem vitae nemo maiores reprehenderit eaque, recusandae quaerat reiciendis nihil, ut ducimus quidem officia maxime vero dolore facilis sequi obcaecati porro provident? 

            
              <div class="card card-body" style="width: 15rem">
              <div
              class="card-badge-head-lg"
              style="width: 100%"
              >
                <img
                src="..." class="avatar-lg"
                />
                <div class="card-badge-head">Name</div>
              </div>
              <p>
              Lorem ipsum...
              </p>
            </div>

cards with badges

41
Hello
Some message
41
Hello
Some msg
41
Hello
Some msg 
              
                <div class="card card-badge card-body" style="width: 15rem;">
                <div class="badge">
                  <img src=... class="avatar-lg"/>
                  <span class="badge-avatar-text-lg">41</span>
                </div>
                <div class="card-badge-body">
                  <div class="card-badge-head-lg">Hello</div>
                  <div class="card-badge-text-lg">Some message</div>
                </div>
              </div>
  
              <div class="card card-badge card-body" style="width: 12rem;">
                <div class="badge">
                  <img src=... class="avatar-md"/>
                  <span class="badge-avatar-text-md">41</span>
                </div>
                <div class="card-badge-body">
                  <div class="card-badge-head-md">Hello</div>
                  <div class="card-badge-text-md">Some msg </div>
                </div>
              </div>
  
              <div class="card card-badge card-body" style="width: 8rem;">
                <div class="badge">
                  <img src=... class="avatar-sm"/>
                  <span class="badge-avatar-text-sm">41</span>
                </div>
                <div class="card-badge-body">
                  <div class="card-badge-head-sm">Hello</div>
                  <div class="card-badge-text-sm">Some msg </div>
                </div>
              </div>

Cards with text overlay

This is a text overlay card 
              
                <div class="card" style="width: 15rem;">
                <img src="..." class="card-image">
                <div class="card-text-overlay">
                  This is a text overlay card 
                </div>
              </div>

Text only cards

hello title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quos nihil atque odio, praesentium inventore quidem enim aut dignissimos exercitationem velit beatae accusamus placeat aspernatur ipsum totam eius neque ipsam. 
              
                <div class="card card-body" style="width: 15rem;">
                  <div class="card-head">
                  hello title
                  </div>
                  <div class="card-md-text">
                    Lorem ipsum...
                  </div>
                </div>

Horizontal card

Header
Lorem, ipsum ...
              
                <div class="card flex row" style="max-width: 20rem;">
                <img src="./assets/ironman.png" class="card-image" style="width: 7.2rem;height: 100%;"
                />
                <div class="card-body" class="pd-half">
                  <div class="bold">Header</div>
                  <div class="card-text">Lorem, ipsum ...</div>
                  <button class="btn btn-primary-sm mg-top-half">Go Somewhere</button>
                </div>
              </div>

card with shadow

Card shadow 1 title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quos nihil atque odio, praesentium inventore quidem enim aut dignissimos exercitationem velit beatae accusamus placeat aspernatur ipsum totam eius neque ipsam.
Card shadow 2 title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quos nihil atque odio, praesentium inventore quidem enim aut dignissimos exercitationem velit beatae accusamus placeat aspernatur ipsum totam eius neque ipsam.
Card shadow 3 title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quos nihil atque odio, praesentium i nventore quidem enim aut dignissimos exercitationem velit beatae accusamus placeat aspernatur ipsum totam eius neque ipsam.
Card shadow 4 title
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex quos nihil atque odio, praesentium i nventore quidem enim aut dignissimos exercitationem velit beatae accusamus placeat aspernatur ipsum totam eius neque ipsam. 
              
                <div class="card card-body card-shadow-1" style="width: 15rem;">
                  <div class="card-head">
                  Card shadow 1 title
                  </div>
                  <div class="card-md-text">
                    Lorem ipsum ...
                  </div>
                </div>

                <div class="card card-body card-shadow-2" style="width: 15rem;">
                  <div class="card-head">
                    Card shadow 2 title
                  </div>
                  <div class="card-md-text">
                    Lorem ipsum...
                  </div>
                </div>

                <div class="card card-body card-shadow-3" style="width: 15rem;">
                  <div class="card-head">
                    Card shadow 3 title
                  </div>
                  <div class="card-md-text">
                    Lorem ipsum...
                  </div>
                </div>

                <div class="card card-body card-shadow-4" style="width: 15rem;">
                  <div class="card-head">
                    Card shadow 4 title
                  </div>
                  <div class="card-md-text">
                    Lorem ipsum...
                  </div>

Input

Email
Email
Email 
              
                <div class="input-grp-sm">
                <span class="input-grp-text" >Email</span>
                <input class="input" placeholder="enter your email here"/>
              </div>

              <div class="input-grp-md">
                <span class="input-grp-text">Email</span>
                <input class="input"  placeholder="enter your email here"/>
              </div>

              <div class="input-grp-lg">
                <span class="input-grp-text">Email</span>
                <input class="input" placeholder="enter your email here"/>
              </div>

List

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
              
                <ul class="list-group">
                <li class="list-group-item">An item</li>
                <li class="list-group-item">A second item</li>
                <li class="list-group-item">A third item</li>
                <li class="list-group-item">A fourth item</li>
                <li class="list-group-item">And a fifth one</li>
              </ul>

actionable list using anchor tag

Just add an "actionable" class to the list item to make it look more resonsive

              
                <ul class="list-group">
            <a href="..." class="list-group-item actionable">An item actionable</a>
            <a href="..." class="list-group-item actionable">A second item actionable</a>
            <a href="..." class="list-group-item actionable">A third item actionable</a>
            <a href="..." class="list-group-item actionable">A fourth item actionable</a>
            <a href="..." class="list-group-item actionable">And a fifth one actionable</a>
          </ul>

Normal list

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut explicabo, sed in corrupti veniam officiis quam obcaecati itaque architecto sit fuga optio impedit nulla atque omnis, quae dolor quas commodi?
  • Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque aut exercitationem sed ducimus nesciunt perferendis! Nesciunt beatae assumenda ipsam natus accusamus in, quis, ut, doloremque nam cupiditate porro ipsum odit?
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique suscipit saepe, repellendus voluptas accusantium exercitationem ducimus possimus magnam praesentium, odit iste excepturi repellat maiores illo aut laborum, dolorum odio maxime. 
              
                <ul class="list-group-normal">
                <li class="list-group-item" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut explicabo, sed in corrupti veniam officiis quam obcaecati itaque architecto sit fuga optio impedit nulla atque omnis, quae dolor quas commodi?</li>
                <li class="list-group-item">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque aut exercitationem sed ducimus nesciunt perferendis! Nesciunt beatae assumenda ipsam natus accusamus in, quis, ut, doloremque nam cupiditate porro ipsum odit?</li>
                <li class="list-group-item">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique suscipit saepe, repellendus voluptas accusantium exercitationem ducimus possimus magnam praesentium, odit iste excepturi repellat maiores illo aut laborum, dolorum odio maxime.
                </li>
              </ul>

Navigation

              
                <nav class="nav">
                <div class="nav-left">
                  <div class="nav-items">
                    nav item 1
                  </div>
                  <div class="nav-items">
                    nav item 2
                  </div>
                </div>
                <div class="nav-right">
                  <img class="nav-socials" src="assets/github.svg">
                  </img>
                  <img class="nav-socials" src="assets/twitter.svg">  
                  </img>
                </div>
              </nav>

Rating for Ecommerce

5
Classy Product

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt magnam voluptates, fuga repellendus tempora omnis saepe culpa, officia quasi quas debitis totam dolor reprehenderit quae. Minus natus voluptatem sed dolor!

Atom Customer Certified Buyer,Balotra, March 2021 
              
                <div class="card card-body">
            <div class="rating-head">
              <div class="rating-counter">5<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTYuNSA5LjQzOWwtMy42NzQgMi4yMy45NC00LjI2LTMuMjEtMi44ODMgNC4yNTQtLjQwNEw2LjUuMTEybDEuNjkgNC4wMSA0LjI1NC40MDQtMy4yMSAyLjg4Mi45NCA0LjI2eiIvPjwvc3ZnPg==" ></div>
              <div class="rating-head-text">
                Classy Product
              </div>
            </div>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt magnam voluptates, fuga repellendus tempora omnis saepe culpa, officia quasi quas debitis totam dolor reprehenderit quae. Minus natus voluptatem sed dolor!
            </p>
            <div class="rating-footer">
                Atom Customer <svg width="14" height="14" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="pd-right-1"><g><circle cx="6" cy="6" r="6" fill="#878787"></circle><path stroke="#FFF" stroke-width="1.5" d="M3 6l2 2 4-4" fill="#878787"></path></g></svg>
                Certified Buyer,Balotra, March 2021
            </div>
          </div>

Grid

2*1 grid

i am row 1 col 1
i am row 1 col 2 
              
                <div class="grid-row1-col2">
                <div class="card card-body">
                  i am row 1 col 1
                </div>
                <div class="card card-body">
                  i am row 1 col 2
                </div>
              </div>

2*2 grid

i am row 1 col 1
i am row 1 col 2
i am row 2 col 1
i am row 2 col 2 
              
                <div class="grid-row2-col2">
                <div class="card card-body">
                  i am row 1 col 1
                </div>
                <div class="card card-body">
                  i am row 1 col 2
                </div>
                <div class="card card-body">
                  i am row 2 col 1
                </div>
                <div class="card card-body">
                  i am row 2 col 2
                </div>
              </div>

Text Utilities

font size utilities

extra small text
I am small text
I am medium text
I am large text
I am extra large text
              
                <div class="xsm">extra small text</div>
                <div class="sm">I am small text</div>
                <div class="md">I am medium text</div>
                <div class="lg">I am large text</div>
                <div class="xlg">I am extra large text</div>

font weight utilities

This is light text
This is normal text
This is bold text
This is bolder text
              
                <div class="light">This is light text</div>
                <div >This is normal text</div>
                <div class="bold">This is bold text</div>
                <div class="bolder">This is bolder text</div>

font color utilities

This is black text
This is gray text
This is blue text
This is orange text
This is green text
This is yellow text
This is red text
              
                <div>This is black text</div>
                <div class="gray">This is gray text</div>
                <div class="blue">This is blue text</div>
                <div class="orange">This is orange text</div>
                <div class="green">This is green text</div>
                <div class="yellow">This is yellow text</div>
                <div class="red">This is red text</div>

Text align utilities

This is left aligned text
This is centered text
This is right aligned text 
              
                <div class="card card-body text-left">
                  This is left aligned text
                </div>
                <div class="card card-body text-center">
                  This is centered text
                </div>
                <div class="card card-body text-right">
                  This is right aligned text
                </div>

Toast

This is an error message
This is an success message
This is an success message 
              
                <div class="toast-error">
                  This is an error message 
                  <button class="outline-none">X </button>
                </div>
                <div class="toast-success">
                  This is an success message 
                  <button class="outline-none">X </button>
                </div>
                <div class="toast-info">
                  This is an info message
                  <button class="outline-none">X </button>
                </div>