CSS Library

Card

Card

Card title

Simple card text. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores, accusamus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, explicabo iure nostrum, omnis consectetur voluptatibus autem recusandae iusto ratione tempora eos aut optio. Asperiores quia voluptate odit non ea harum. 

          <div class="card">
  <img class="card-img" src="https://images.unsplash.com/photo-1430132594682-16e1185b17c5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="Card" />
  <div class="card-content">
    <h3 class="card-title">Card title</h3>
    <p class="card-p">
      Simple card text. Lorem ipsum dolor, sit amet consectetur
      adipisicing elit. Asperiores, accusamus?Lorem ipsum dolor 
      sit amet consectetur adipisicing elit. Quidem, explicabo 
      iure nostrum, omnis consectetur voluptatibus autem recusandae 
      iusto ratione tempora eos aut optio. Asperiores quia voluptate 
      odit non ea harum.
    </p>
    <button class="btn btn-primary">primary</button>
    <button class="btn btn-danger">danger</button>
  </div>
</div>

In this example, in addition to the default styles, max-height has been set to the card-img class. 

          .card-img {
  max-height: 200px;
}

Hero

hero

This is a hero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ipsam eius neque totam, assumenda necessitatibus nesciunt odit itaque dolor sit!

Example button 
          <div class="hero mb-s">
  <img
    class="hero-img"
    src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80"
    alt="hero"
  />
  <div class="hero-content p-l">
    <h1 class="mb-s font-xl font-white">This is a hero</h1>
    <p class="mb-l font-white">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
      ipsam eius neque totam, assumenda necessitatibus nesciunt odit
      itaque dolor sit!
    </p>
    <a href="#/" class="btn btn-white m-s">Example button</a>
  </div>
</div>

This is a hero without an image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum minus exercitationem eveniet, debitis libero id consectetur suscipit facere enim repudiandae.

Example button 
          <div class="hero mb-s">
  <div class="hero-content p-l">
    <h1 class="mb-s font-xl">This is a hero without an image</h1>
    <p class="mb-l">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
      minus exercitationem eveniet, debitis libero id consectetur
      suscipit facere enim repudiandae.
    </p>
    <a href="#/" class="btn btn-primary m-s">Example button</a>
  </div>
</div>

Buttons

            <button class="btn btn-primary mb-xs">primary</button>
<button class="btn btn-secondary mb-xs">secondary</button>
<button class="btn btn-success mb-xs">success</button>
<button class="btn btn-danger mb-xs">danger</button>
<button class="btn btn-warning mb-xs">warning</button>
<button class="btn btn-info mb-xs">info</button>
<button class="btn btn-white mb-xs">white</button>
<button class="btn btn-light mb-xs">light</button>
<button class="btn btn-dark mb-xs">dark</button>

Disabled

            <button class="btn btn-disabled btn-primary mb-xs">primary</button>
<button class="btn btn-disabled btn-secondary mb-xs">secondary</button>
<button class="btn btn-disabled btn-success mb-xs">success</button>
<button class="btn btn-disabled btn-danger mb-xs">danger</button>
<button class="btn btn-disabled btn-warning mb-xs">warning</button>
<button class="btn btn-disabled btn-info mb-xs">info</button>
<button class="btn btn-disabled btn-white mb-xs">white</button>
<button class="btn btn-disabled btn-light mb-xs">light</button>
<button class="btn btn-disabled btn-dark mb-xs">dark</button>

Links

Link Active Disabled 
          <a class="link mr-s" href="#/">Link</a>
<a class="link link-active mr-s" href="#/">Active</a>
<a class="link link-disabled" href="#/">Disabled</a>

Icons

Menu

Close

Menu:

          <a class="icon-bars">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>

Close:

          <button class="icon-close">
  <span class="font-xl" aria-hidden="true">&times;</span>
</button>

Dropdown

          <ul class="nav-menu dropdown">
  <li><a class="link" href="#/">Some link</a></li>
  <li><a class="link" href="#/">Link</a></li>
  <li><a class="link" href="#/">Link</a></li>
  <li><a class="link" href="#/">Another link</a></li>
</ul>

Nav

Nav

          <div class="nav">
  <div class="nav-content">
    <h1 class="nav-title">Nav</h1>
    <nav>
      <button class="icon-bars sm-hide">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </button>
      <ul class="nav-menu sm-show">
        <li><a class="link" href="#/">Link</a></li>
        <li><a class="link" href="#/">Link</a></li>
        <li><a class="link link-active" href="#/">Active link</a></li>
        <li><a class="link link-disabled" href="#/">Disabled Link</a></li>
      </ul>
    </nav>
  </div>
</div>

Transparent

Nav

          <div class="nav nav-transparent nav-transparent-on nav-font-black">
  <div class="nav-content">
    <h1 class="nav-title">Nav</h1>
    <nav>
      <button class="icon-bars sm-hide">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </button>
      <ul class="nav-menu sm-show">
        <li><a class="link" href="#/">Link</a></li>
        <li><a class="link" href="#/">Link</a></li>
        <li><a class="link link-active" href="#/">Active link</a></li>
        <li><a class="link link-disabled" href="#/">Disabled Link</a></li>
      </ul>
    </nav>
  </div>
</div>

Sticky

Use class nav-sticky to make nav sticky on scroll. 

          <div class="nav nav-sticky">
  ...
</div>

Footer

Footer

          <div class="footer">
  <div class="footer-content mtb-m">
    <ul class="footer-menu mb-m">
        <li><a class="link" href="#/">Some link</a></li>
        <li><a class="link" href="#/">Link</a></li>
        <li><a class="link" href="#/">Link</a></li>
        <li><a class="link" href="#/">Another link</a></li>
    </ul>
    <h2>Footer</h2>
  </div>
</div>