Cards

Elementric components - just copy the HTML code of an element and paste it into your code (after you read the installation guide).

Person Cards

         
Copy
         
  <div class="person-card-lg">
   <div class="avatar-img">
     <img src="https://images.pexels.com/photos/2078265/pexels-photo-2078265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="img">
   </div>

   <p class="person-name">John Doe</p>
   <p class="person-info">New York, U.S.A</p>

   <a href="#"><i class="fab fa-facebook-f"></i></a>
   <a href="#"><i class="fab fa-twitter"></i></a>
   <a href="#"><i class="fab fa-instagram"></i></a>
  </div>
         
       

          
Copy
          
  <div class="person-card-sm">
    <div class="avatar-img">
      <img src="https://images.pexels.com/photos/2078265/pexels-photo-2078265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="img">
    </div>

      <p class="person-name">John Doe</p>
      <p class="person-info">CEO Elementric</p>
  </div>
          
        

Gradient Cards

Just add one of following classes to your card to make a gradient background: .gradient-light, .gradient-blue, .gradient-black, .gradient-green, .gradient-red, .gradient-yellow

          
Copy
          
  <div class="person-card-sm gradient-light">
    <div class="avatar-img">
      <img src="https://images.pexels.com/photos/3771807/pexels-photo-3771807.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="img">
    </div>

      <p class="person-name">John Doe</p>
      <p class="person-info">+0123 456 789</p>
  </div>
          
        

Blog article

          
Copy
          
  <div class="blog-article-lg">
      <img src="https://images.pexels.com/photos/1309766/pexels-photo-1309766.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="img">

    <div class="blog-article-content">
      <p class="article-date">20 JUN 2020</p>
      <p class="article-title">Learn more about Elementric UI components</p>
      <p class="article-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Donec consequat purus sit amet odio egestas, ut euismod leo tempor. Maecenas pulvinar ipsum ipsum,
          et malesuada neque posuere nec. In hac habitasse platea dictumst. In mollis elementum augue,
          nec placerat magna euismod vel. [...]</p>
      <p class="article-link"><a href="#">Read More <i class="fas fa-angle-right"></i></a></p>

      <p class="article-info"><i class="far fa-eye"></i> 100</p>
      <p class="article-info"><i class="far fa-comment-alt"></i> 20</p>
    </div>
  </div>
          
        

          
Copy
          
  <div class="blog-article-sm">
    <div class="article-sm-img">
      <img src="https://images.pexels.com/photos/1309766/pexels-photo-1309766.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="img">
    </div>

    <a href="#">
      <div class="blog-article-sm-content">
        <p class="article-sm-date">20 JUN 2020</p>
        <p class="article-sm-title">Learn more about Elementric UI components</p>
      </div>
    </a>
  </div>
          
        

Post / Comment

          
Copy
          
  <div class="post">
    <div class="avatar-img">
      <img src="https://images.pexels.com/photos/3771807/pexels-photo-3771807.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="img">
    </div>
    <p class="post-date">3 days ago</p>

    <p class="person-name">John Doe</p>
    <p class="post-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Donec consequat purus sit amet odio egestas, ut euismod leo tempor. Maecenas pulvinar ipsum ipsum,
     et malesuada neque posuere nec. In hac habitasse platea dictumst. In mollis elementum augue,
     nec placerat magna euismod vel.</p>

    <p class="article-info"><i class="far fa-heart"></i> 20</p>
    <p class="article-info"><i class="far fa-comment-alt"></i> 5</p>
  </div>
          
        

Product

          
Copy
          
  <div class="product-category">
    <div class="product-category-img">
      <img src="https://images.pexels.com/photos/90946/pexels-photo-90946.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="img">
    </div>

    <p class="product-category-title"><a href="#">Product Category <i class="fas fa-arrow-right"></i></a></p>
    <p class="product-category-description">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
  </div>
          
        

          
Copy
          
  <div class="product-lg">
    <img src="https://i.imgur.com/IOjF0Xx.png" alt="img">

    <p class="product-title">Grey Chair</p>
    <p class="product-oldprice"><del>$199</del></p>
    <p class="product-price">$99</p>

    <button type="button" class="product-saveBtn"><i class="far fa-heart"></i></button>
    <button type="button" class="product-cartBtn"><i class="fas fa-shopping-bag"></i></button>
  </div>
          
        

          
Copy
          
  <div class="product-sm">
    <div class="product-sm-img">
      <img src="https://images.pexels.com/photos/416528/pexels-photo-416528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="img">
    </div>

    <p class="product-title">Product Small</p>
    <p class="product-price">$89.99</p>

    <button type="button" class="product-sm-cartBtn"><i class="fas fa-shopping-bag"></i></button>
  </div>
          
        

Miscellaneous

          
Copy
          
  <div class="createNew-card">
    <a href="#">
      <i class="fas fa-plus-circle"></i>

      <p class="card-title">Create New</p>
      <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </a>
  </div>
          
        

          
Copy
          
  <div class="addNew-card">
     <i class="fas fa-plus"></i>
     <p class="card-title">Add New Element</p>
  </div>
          
        

          
Copy
          
  <div class="upload-card">
    <i class="fas fa-arrow-circle-up"></i>

    <p class="card-title">Drag & drop files to upload</p>
    <p class="card-description">or <a href="#">browse</a> to choose a file</p>
  </div>
          
        

          
Copy
          
  <div class="category-card">
    <a href="#">
      <p class="category-card-title">Category</p>
      <p class="category-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing</p>

      <i class="fas fa-arrow-right"></i>
    </a>
  </div>