Component Library

How to use

Alert

An alert is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned alert in the corner of the viewport. And it has close button to dimiss it.

    
    
    
    Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem
    ipsum dolor.

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.

Avatar

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati assumenda nesciunt dolorum repellendus unde suscipit inventore laborum! Deleniti culpa sit odio sapiente, eaque atque dolorum, deserunt earum eius, illo fugiat!

Badge


     
      0
      10
      100
      10+
      10+
      Lorem, ipsum
    
    
      
            
      
    
      
    
        
        0
    

    
        
        99

0 10 100 10+ 10+

Button

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam voluptas sed, dolore error optio vero. Nesciunt esse odio ad consequuntur necessitatibus saepe amet sed, dolor exercitationem, architecto cupiditate dicta illum quaerat, alias similique modi blanditiis. Aliquam atque ducimus quia placeat officia error, consectetur beatae deleniti.

Card

Card description goes here, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, similique natus. Quia ab ratione earum.

Cards with shadow & Text ony cards

              
                
                  Lorem ipsum dolor sit amet.
                

                 
                  Title

Title

Card with Badges


      
        
          
            
            
          
          
            Our Changing Planet
            by Kurt Wagner
          
          
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. dolor sit
            amet consectetur adipisicing elit. dolor sit amet consectetur
            adipisicing elit.

Our Changing Planet

by Kurt Wagner

Lorem ipsum, dolor sit amet consectetur adipisicing elit. dolor sit amet consectetur adipisicing elit. dolor sit amet consectetur adipisicing elit.

Vertical/Horizontal cards

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque consequuntur quod ipsum a nulla laborum fugit beatae, eligendi nostrum ipsam doloribus, ullam dolorum, labore provident.

Cards with dismiss

Lorem ipsum dolor sit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos mollitia similique nostrum? Pariatur odit, quisquam saepe natus incidunt ducimus repellendus.

Cards with text overlay

Our Changing Planet

by Kurt Wagner

Grid

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta temporibus alias blanditiis veritatis, quas officiis sit vero, quidem nemo iure hic aspernatur? Sit aut ex dolore accusantium, assumenda eum praesentium. Animi rerum magni repudiandae, dicta odio voluptatum unde tenetur eligendi quod accusamus dolorum non ullam.

      
        
      
        child 1
        child 2
        child 3
        child 4
        child 5
        child 6
        

        
        
        child 1
        child 2
        child 3
        child 4
        child 5
        child 6

child 1

child 2

child 3

child 4

child 5

child 6

child 1

child 2

child 3

child 4

child 5

child 6

Inputs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quod error dolores labore omnis, soluta optio sequi delectus culpa, repudiandae, praesentium sed laborum. Ipsa repudiandae officiis sunt, praesentium aliquam unde alias dicta beatae nisi dolore nesciunt obcaecati laborum aut natus eius soluta totam fugit? Veritatis.


      
        First Name
        
      

      
        First Name
        
      
      
      
        First Name
        
        color text to show that

First Name

First Name color text to show that

Image

Image component includes, Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quod error dolores labore omnis, soluta optio sequi delectus culpa, repudiandae, praesentium sed laborum. Ipsa repudiandae officiis sunt, praesentium aliquam unde alias dicta beatae nisi dolore nesciunt obcaecati laborum aut natus eius soluta totam fugit? Veritatis.

List

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos mollitia totam, perferendis perspiciatis molestias incidunt a expedita at tempore porro itaque dicta ratione. Vero veniam maxime voluptatibus sed quos soluta laborum molestias, qui fugiat nam labore neque. Magni necessitatibus accusamus consequatur laborum facilis aperiam esse.

    
    
       Lorem ipsum dolor sit amet.
       Incidunt expedita aliquid perferendis culpa.
       In amet nostrum eligendi cumque.
       Rerum autem sunt unde voluptates!
       Deleniti blanditiis tenetur dolor veritatis!
     
     
     
       Lorem ipsum dolor sit amet.
       Incidunt expedita aliquid perferendis culpa.
       In amet nostrum eligendi cumque.
       Rerum autem sunt unde voluptates!
       Deleniti blanditiis tenetur dolor veritatis!

Lorem ipsum dolor sit amet.
Incidunt expedita aliquid perferendis culpa.
In amet nostrum eligendi cumque.
Rerum autem sunt unde voluptates!
Deleniti blanditiis tenetur dolor veritatis!

Lorem ipsum dolor sit amet.
Incidunt expedita aliquid perferendis culpa.
In amet nostrum eligendi cumque.
Rerum autem sunt unde voluptates!
Deleniti blanditiis tenetur dolor veritatis!

Stacked List


      
       Lorem ipsum dolor sit amet.
       Non voluptate alias quae molestiae.
       Quo, fugit! Quam, reprehenderit maxime!
       Maiores harum porro voluptatem quidem.
       Deleniti ratione nesciunt pariatur labore.

Lorem ipsum dolor sit amet.

Non voluptate alias quae molestiae.

Quo, fugit! Quam, reprehenderit maxime!

Maiores harum porro voluptatem quidem.

Deleniti ratione nesciunt pariatur labore.

Modal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis alias fugiat explicabo. Ratione, quo id quasi natus repudiandae sint possimus architecto aut dolore earum molestiae adipisci sequi, magni laudantium deleniti.


    
      Lorem ipsum dolor sit amet consectetur adipisicing elit.

Navbar

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eveniet placeat odit explicabo. Tempora, laborum.

Rating

Provides provides option to collect the user feedback, on a scale of 1 to 5 user can rate the items on the page, It also helps user to understand over all rating for an existing product from ther users.

Snackbar

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse corrupti atque ea, consequatur veritatis nemo, temporibus libero ducimus velit beatae aspernatur harum quaerat quae delectus placeat sunt. Error, ad aliquam!

          
            
              
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
                explicabo iusto earum, quos nam ut?
              
            

            
              
              Lorem ipsum dolor sit amet consectetur.
              
            

            
              
              Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores explicabo iusto earum, quos nam ut?

Lorem ipsum dolor sit amet consectetur.

Typography scale

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, voluptas sint totam nihil veritatis eius iste nisi doloremque. Aut facilis cupiditate consequuntur provident neque! Unde corrupti et repellendus ratione praesentium.

        
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Lorem ipsum dolor sit amet, consectetur adipisicing.
          Lorem ipsum dolor sit amet, consectetur adipisicing.
          Lorem ipsum dolor sit amet, consectetur adipisicing.
          Lorem ipsum dolor sit amet, consectetur adipisicing.
          Lorem ipsum dolor sit amet, consectetur adipisicing.
          Lorem ipsum dolor sit amet, consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing.

          
            lorem centered text
            Small Text
            example for grey text

lorem centered text

Small Text

example for grey text