Standard Components

accordion

By Brian Hernandez

Default

The accordion is a standard UI component that has been used around the web for some time now. Our accordion is built off of an unordered list structure containing the class .evo_c-accordion. The tab title and its contents are contained within an li element with the class .evo_c-accordion__bellow (a bellow is what expands and contracts on an actual accordion). The tab titles are styled anchor tags (a href="#") with a class of .evo_c-accordion__title for semantics. This is then followed by the content for each tab contained within a div with the class .evo_c-accordion__content. The expanding and contracting functionality is accomplished with some JavaScript via a hook in the anchor tag with the class .js-c-accordion-target. Multiple accordions can be used on the same page and will expand and contract independently from one another. You can easily use this component in your next project by using the following HTML code (along with the JavaScript code) as a base while adding your own content within the div class="evo_c-accordion__content tags. To add more tab titles, simply add more li elements in the same pattern.

Bellow Title 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.
Bellow Title 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique est molestias, quo ipsam itaque eius, alias amet ipsum rerum, dolorum suscipit placeat voluptatem obcaecati in maxime perspiciatis doloribus veritatis libero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus tempore sed voluptatibus unde explicabo? Libero soluta ad autem maiores nemo veniam quidem molestiae eos laborum deleniti hic facere sit, in!
Bellow Title 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro delectus vero doloribus velit voluptatibus provident tempora laudantium ex, veniam voluptas qui necessitatibus reiciendis repellat ad quasi magni voluptate rerum. Vel.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate aut, ipsa! Et atque eaque, optio tempora velit. Dignissimos modi distinctio porro tempore omnis numquam possimus, officia recusandae quia earum aspernatur.
Bellow Title 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic iure sed cumque quod. Nemo minus, placeat cumque asperiores quibusdam at est quas, facilis repellat ipsum dicta hic unde accusamus!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque voluptas, vero error laboriosam aspernatur dolorem vel suscipit qui odio unde totam perferendis distinctio dolores molestias earum reprehenderit eveniet quod eligendi!

Show Markup

<ul class="evo_c-accordion">
  <li class="evo_c-accordion__bellow">
    <a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title 1</a>
    <div class="evo_c-accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit corrupti nulla, aliquid maiores. Enim itaque incidunt, quo ratione dignissimos officiis. Optio, deleniti eligendi similique ipsa quae aliquid quis nam quo.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis iusto pariatur doloribus. Maxime, tenetur, eveniet. Temporibus, dignissimos asperiores fuga est minus ullam quidem! Cupiditate expedita accusamus pariatur temporibus, quam, voluptate.</p>
    </div>
  </li>
  <li class="evo_c-accordion__bellow">
    <a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title 2</a>
    <div class="evo_c-accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique est molestias, quo ipsam itaque eius, alias amet ipsum rerum, dolorum suscipit placeat voluptatem obcaecati in maxime perspiciatis doloribus veritatis libero.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus tempore sed voluptatibus unde explicabo? Libero soluta ad autem maiores nemo veniam quidem molestiae eos laborum deleniti hic facere sit, in!</p>
    </div>
  </li>
  <li class="evo_c-accordion__bellow">
    <a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title 3</a>
    <div class="evo_c-accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro delectus vero doloribus velit voluptatibus provident tempora laudantium ex, veniam voluptas qui necessitatibus reiciendis repellat ad quasi magni voluptate rerum. Vel.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate aut, ipsa! Et atque eaque, optio tempora velit. Dignissimos modi distinctio porro tempore omnis numquam possimus, officia recusandae quia earum aspernatur.</p>
    </div>
  </li>
  <li class="evo_c-accordion__bellow">
    <a class="evo_c-accordion__title js-c-accordion-target" href="#">Bellow Title 4</a>
    <div class="evo_c-accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic iure sed cumque quod. Nemo minus, placeat cumque asperiores quibusdam at est quas, facilis repellat ipsum dicta hic unde accusamus!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque voluptas, vero error laboriosam aspernatur dolorem vel suscipit qui odio unde totam perferendis distinctio dolores molestias earum reprehenderit eveniet quod eligendi!</p>
    </div>
  </li>
</ul>

Audio Player

By Joseph Matembu

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit quidem tempore aliquam dolorum numquam asperiores quis, ut distinctio molestias sunt eveniet voluptatibus sint cum id voluptates minus repudiandae rem!

00:00

Show Markup

<figure id="audioplayer" class="evo_c-audio-player h-bck__primary--dark">
  <div class="evo_c-audio-player__controls">
    <div class="evo_c-audio-player__track">
      <button type="button" class="evo_c-audio-player__icon"><i class="material-icons">play_arrow</i></button>
      <input type="range" min="0" max="100" value="0" class="evo_c-audio-player__playhead" id="playhead">
    </div>
    <span class="evo_c-audio-player__track-time">00:00</span>
    <div class="evo_c-audio-player__track-volume">
      <button type="button" class="evo_c-audio-player__icon"><i class="material-icons">volume_up</i></button>
    </div>
  </div>
  <audio controls="controls" preload="auto" itemprop="audio">
    <source src="https://evolution-ui.github.io/evolution-ui/assets/audio/evolution-ui/standard/audio-player/diana.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio>
</figure>

cards

By Joseph Matembu

Basic Card

A basic card component

Headline

Sub headline

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

Show Markup

<div class="evo_l-grid__row l-gridrow__gutters">
  <div class="evo_l-grid__col col8_of16">
    <div class="evo_c-card">
      <h4 class="evo_c-card__title">Headline</h4>
      <span class="evo_c-card__sub-title">Sub headline</span>
      <p>Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.</p>
    </div>
  </div>
</div>

Basic Card with Background Color

Many variations are available matching the color palette. This card for example, is using h-bck__secondary--dark class helper for its background color. For other variations, replace the word secondary in the class with any of accent, accent2, accent3, accent4, primary, primary2, secondary, background. Remember to use evo_h-txt-light or evo_h-txt-light2 on the text.

Headline

Sub headline

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

Show Markup

<div class="evo_l-grid__row l-gridrow__gutters">
  <div class="evo_l-grid__col col8_of16">
    <div class="su_code-example">
      <div class="evo_c-card h-bck__secondary--dark">
        <h4 class="evo_c-card__title evo_h-txt-light">Headline</h4>
        <span class="evo_c-card__sub-title evo_h-txt-light2">Sub headline</span>
        <p class="evo_h-txt-light">Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.</p>
      </div>
    </div>
  </div>
</div>

Card with Buttons

Headline

Sub headline

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

Show Markup

<div class="evo_l-grid__row l-gridrow__gutters">
  <div class="evo_l-grid__col col8_of16 ">
    <div class="evo_c-card">
      <div class="evo_c-card__body">
        <h4 class="evo_c-card__title">Headline</h4>
        <span class="evo_c-card__sub-title">Sub headline</span>
        <p>Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.</p>
      </div>
      <div class="evo_c-card__footer">
        <button type="button" class="evo_c-card__btn">Action</button>
        <button type="button" class="evo_c-card__btn">Action</button>
      </div>
    </div>
  </div>
</div>

Card with Image

Headline

Sub headline

Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights. Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.

Show Markup

<div class="evo_l-grid__row l-gridrow__gutters">
  <div class="evo_l-grid__col col8_of16">
    <div class="evo_c-card">
      <div class="evo_c-card__image">
        <img src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/cards/face.jpg">
      </div>
      <h4 class="evo_c-card__title">Headline</h4>
      <span class="evo_c-card__sub-title">Sub headline</span>
      <div class="evo_c-card__body">
        <p>Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights. Replenish, earth tree replenish give, he air days you, after i first them dry Seed. Created own every one lights.</p>
      </div>
    </div>
  </div>
</div>

Product Card

Red Shoe

Replenish, earth tree replenish

Show Markup

<div class="evo_l-grid__row l-gridrow__gutters">
  <div class="evo_l-grid__col col8_of16">
    <div class="evo_c-card evo_c-card__product su_align-center">
      <div class="evo_c-card__image">
        <img src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/cards/shoes.jpg">
      </div>
      <div class="evo_c-card__body">
        <h3 class="evo_c-card__title">Red Shoe</h3>
        <p>Replenish, earth tree replenish</p>
      </div>
      <div class="evo_c-card__footer">
        <span class="evo_c-card__price su_left">$29.99</span>
        <span class="evo_c-card__icon su_right"><i class="material-icons">share</i></span>
        <span class="su_clear">
      </div>
    </div>
  </div>
</div>

Profile Card

Show Markup

<div class="evo_l-grid__row l-gridrow__gutters">
  <div class="evo_l-grid__col col8_of16">
    <div class="evo_c-card evo_c-card__profile">
      <div class="evo_c-card__image">
        <img src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/cards/snowboard.jpg">
        <img class="evo_c-card__profile-image" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/cards/face.jpg">
      </div>
      <div class="evo_c-card__body">
        <h3 class="evo_c-card__title">John Brave</h3>
        <p>Replenish, earth tree replenish</p>
      </div>
      <div class="evo_c-card__footer">
        <a href="#" class="evo_c-card__icon"><i class="material-icons">favorite</i></a>
        <a href="#" class="evo_c-card__icon"><i class="material-icons">thumb_up</i></a>
        <span class="su_clear"></span>
      </div>
    </div>
  </div>
</div>

carousel

By Sam Chittenden

Fade transition

Standard carousel with a fade transition between slides. It can contain bullet navigation, arrow navigation, or thumbnail navigation. Arrow navigation can be combined with both bullet and thumbnails

Show Markup

<div class="evo_c-carousel__wrapper">
  <div class="evo_c-carousel evo_c-carousel--fader-type" data-bullet-nav>

    <ol class="evo_c-carousel__bullet-nav">
      <li class="evo_c-carousel__bullet-nav-item evo_c-carousel__bullet-nav-item--is-active" data-slide-index="0"></li>
      <li class="evo_c-carousel__bullet-nav-item" data-slide-index="1"></li>
      <li class="evo_c-carousel__bullet-nav-item" data-slide-index="2"></li>
    </ol>

    <div class="evo_c-carousel__slides-container">

      <div class="evo_c-carousel__slide evo_c-carousel__slide--is-selected">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1067" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1051" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1041" alt="">
      </div>

      <a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--left" data-slide-nav="prev">
        <i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_before</i>
      </a>
      <a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--right" data-slide-nav="next">
        <i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_next</i>
      </a>
    </div>
  </div>
</div>

Slide Transition

Standard carousel with a sliding transition between slides. This example also contains slides with multiple images.

Show Markup

<div class="evo_c-carousel__wrapper">
  <div class="evo_c-carousel evo_c-carousel--slider-type" data-bullet-nav>

    <ol class="evo_c-carousel__bullet-nav">
      <li class="evo_c-carousel__bullet-nav-item evo_c-carousel__bullet-nav-item--is-active" data-slide-index="0"></li>
      <li class="evo_c-carousel__bullet-nav-item" data-slide-index="1"></li>
      <li class="evo_c-carousel__bullet-nav-item" data-slide-index="2"></li>
      <li class="evo_c-carousel__bullet-nav-item" data-slide-index="3"></li>
    </ol>

    <div class="evo_c-carousel__slides-container">

      <div class="evo_c-carousel__slide evo_c-carousel__slide--is-selected">
        <div class="evo_c-carousel__slide--multi-image-container">
          <div class="evo_c-carousel__slide--multi-image-container__image-wrapper"><img class="evo_c-carousel__image" src="https://unsplash.it/300/450?image=1016" alt=""></div>
          <div class="evo_c-carousel__slide--multi-image-container__image-wrapper"><img class="evo_c-carousel__image" src="https://unsplash.it/300/450?image=1011" alt=""></div>
          <div class="evo_c-carousel__slide--multi-image-container__image-wrapper"><img class="evo_c-carousel__image" src="https://unsplash.it/300/450?image=1005" alt=""></div>
        </div>
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1041" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1037" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <div class="evo_c-carousel__slide--multi-image-container">
          <div class="evo_c-carousel__slide--multi-image-container__image-wrapper"><img class="evo_c-carousel__image" src="https://unsplash.it/300/450?image=985" alt=""></div>
          <div class="evo_c-carousel__slide--multi-image-container__image-wrapper"><img class="evo_c-carousel__image" src="https://unsplash.it/300/450?image=984" alt=""></div>
          <div class="evo_c-carousel__slide--multi-image-container__image-wrapper"><img class="evo_c-carousel__image" src="https://unsplash.it/300/450?image=973" alt="">
          </div>
        </div>
      </div>

      <a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--left" data-slide-nav="prev">
        <i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_before</i>
      </a>
      <a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--right" data-slide-nav="next">
        <i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_next</i>
      </a>
    </div>
  </div>
</div>

Slide Transition with Thumbnail Navigation

Standard carousel with a sliding transition between slides. This utilizes a set of thumbnails in place of the bulleted navigation.

Show Markup

<div class="evo_c-carousel__wrapper">
  <div class="evo_c-carousel evo_c-carousel--slider-type" data-thumbnail-nav>

    <div class="evo_c-carousel__slides-container">

      <div class="evo_c-carousel__slide evo_c-carousel__slide--is-selected">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1037" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1041" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1051" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1039" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=984" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=985" alt="">
      </div>

      <div class="evo_c-carousel__slide">
        <img class="evo_c-carousel__image" src="https://unsplash.it/800/400?image=1005" alt="">
      </div>

      <a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--left" data-slide-nav="prev">
        <i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_before</i>
      </a>
      <a class="evo_c-carousel__arrow-nav evo_c-carousel__arrow-nav--right" data-slide-nav="next">
        <i class="material-icons evo_c-carousel__arrow-nav-icon">navigate_next</i>
      </a>
    </div>

    <ol class="evo_c-carousel__thumb-nav">
      <li class="evo_c-carousel__thumb-nav-item evo_c-carousel__thumb-nav-item--is-active" data-slide-index="0">
        <img class="evo_c-carousel__thumb-image" src="https://unsplash.it/65/65?image=1037" alt="">
      </li>
      <li class="evo_c-carousel__thumb-nav-item" data-slide-index="1">
        <img class="evo_c-carousel__thumb-image" src="https://unsplash.it/65/65?image=1041" alt="">
      </li>
      <li class="evo_c-carousel__thumb-nav-item" data-slide-index="2">
        <img class="evo_c-carousel__thumb-image" src="https://unsplash.it/65/65?image=1051" alt="">
      </li>
      <li class="evo_c-carousel__thumb-nav-item" data-slide-index="3">
        <img class="evo_c-carousel__thumb-image" src="https://unsplash.it/65/65?image=1039" alt="">
      </li>
      <li class="evo_c-carousel__thumb-nav-item" data-slide-index="4">
        <img class="evo_c-carousel__thumb-image" src="https://unsplash.it/65/65?image=984" alt="">
      </li>
      <li class="evo_c-carousel__thumb-nav-item" data-slide-index="5">
        <img class="evo_c-carousel__thumb-image" src="https://unsplash.it/65/65?image=985" alt="">
      </li>
      <li class="evo_c-carousel__thumb-nav-item" data-slide-index="6">
        <img class="evo_c-carousel__thumb-image" src="https://unsplash.it/65/65?image=1005" alt="">
      </li>
    </ol>
  </div>
</div>

code Markup

By Brian Hernandez

Default

The Code Markup component is a standard tabs UI that can be used to display HTML, CSS and JavaScript code or really any piece of content that would come in a triad. The entire component is wrapped in a div with a class of .evo_c-markup. For the tab titles and styling, we use an ul with a class of .evo_c-markup__tabs. To separate out the JavaScript functionality, there is also a class of .js-c-markup-toggle on the ul that will help to target which tab is clicked. When a tab is clicked, this will reveal the contents of that tab. If the second click is made on an open or active tab, it will close the associated content and deactiveate the tab. Each tab is a li element with the class .evo_c-markup__item. The content is divided into 3 divs, each with a class of .evo_c-markup__content. These 3 divs are in turn wrapped in a div with the class .evo_c-markup__container that sits next to the ul class="evo_c-markup__tabs js-c-markup-toggle" element. Within the div class="evo_c-markup__content" elements, we added pre and code for displaying code. However, these can be removed to add content other than code. The code elements have individual classes of .evo_h-language-xxxx to integrate http://prismjs.com/ for syntax highlighting if you choose to add this to your project as well.

html
css
js


  <div class="evo_c-markup">
    <ul class="evo_c-markup__tabs js-c-markup-toggle">
      <li class="evo_c-markup__item">html</li>
      <li class="evo_c-markup__item">css</li>
      <li class="evo_c-markup__item">js</li>
    </ul>
    <div class="evo_c-markup__container">
      <div class="evo_c-markup__content">
        <pre><code class="evo_h-language-html">

        </code></pre>
      </div>
      <div class="evo_c-markup__content">
        <pre><code class="evo_h-language-css">

        </code></pre>
      </div>
      <div class="evo_c-markup__content">
        <pre><code class="evo_h-language-javascript">

        </code></pre>
      </div>
    </div>
  </div>


@import 'code_markup-config';

@include c('markup') {

@include e('tabs') {
  display: flex;
  list-style: none;
  justify-content: space-between;
  padding-left: 0;
  margin-bottom: 0;
}

@include e('item') {
  flex: 1 0 auto;
  z-index: 5;
  padding: $markup-tab-padding;
  margin-right: $markup-tab-margin-right;
  &:last-child {
    margin-right: 0;
  }
  text-align: center;
  text-transform: uppercase;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  border-top-left-radius: $markup-border-radius;
  border-top-right-radius: $markup-border-radius;
  background-color: black(.2);
  transition: background .3s ease;
  &:hover,
  &:focus {
    background: black(.3);
    cursor: pointer;
  }

  @include s('is-active') {
    border-top: 3px solid get-color('primary', 'base');
    border-bottom: 0;
    background-color: $markup-active-tab-and-container-bg-color;
  }
}

@include e('container') {
  position: relative;
  top: -1px;
  min-height: 0;
  border: 1px solid #000;
  border-bottom: none;
  background-color: $markup-active-tab-and-container-bg-color;
  transition: min-height .3s ease, padding .3s ease;
  overflow: hidden;
  @include s('is-expanded') {
    border-bottom: 1px solid #000;;
    min-height: 70vh;
    overflow-x: scroll;
    overflow-y: scroll;
  }
}

@include e('content') {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity .3s ease;
  @include s('is-active') {
    opacity: 1;
  }
}
}


export default function() {
var markupTabs = document.getElementsByClassName('js-c-markup-toggle');

if (markupTabs) {
  for (var i = 0; i < markupTabs.length; i++) {
    //FIXME: Should be a better way than adding a listener to each element??
    markupTabs[i].addEventListener('click', function(event) {
      var clickedTabClassList = event.target.classList;
      var markupContainerClassList = this.parentNode.children[1].classList;
      var markupContentDivs = this.parentNode.children[1].children;

      if (clickedTabClassList.contains("is-active")) {
        clickedTabClassList.remove("is-active");
        markupContainerClassList.remove("is-expanded");
      } else {
        for (var i = 0; i < this.children.length; i++) {
          if (this.children[i].classList.contains("is-active")) {
            this.children[i].classList.remove("is-active");
          }
        }
        clickedTabClassList.add("is-active");
        this.parentNode.children[1].scrollTop = 0;
        markupContainerClassList.add("is-expanded");
        for (var j = 0; j < markupContentDivs.length; j++) {
          if (markupContentDivs[j].classList.contains("is-active")) {
            markupContentDivs[j].classList.remove("is-active");
          }
          if (this.children[j].classList.contains("is-active")) {
            markupContentDivs[j].classList.add("is-active");
          }
        }
      }
    }, false);
  }
}
}

Show Markup

  <div class="evo_c-markup">
    <ul class="evo_c-markup__tabs js-c-markup-toggle">
      <li class="evo_c-markup__item">html</li>
      <li class="evo_c-markup__item">css</li>
      <li class="evo_c-markup__item">js</li>
    </ul>
    <div class="evo_c-markup__container">
      <div class="evo_c-markup__content">
        <pre><code class="evo_h-language-html">
  &lt;div class=&quot;evo_c-markup&quot;&gt;
    &lt;ul class=&quot;evo_c-markup__tabs js-c-markup-toggle&quot;&gt;
      &lt;li class=&quot;evo_c-markup__item&quot;&gt;html&lt;/li&gt;
      &lt;li class=&quot;evo_c-markup__item&quot;&gt;css&lt;/li&gt;
      &lt;li class=&quot;evo_c-markup__item&quot;&gt;js&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;evo_c-markup__container&quot;&gt;
      &lt;div class=&quot;evo_c-markup__content&quot;&gt;
        &lt;pre&gt;&lt;code class=&quot;evo_h-language-html&quot;&gt;

        &lt;/code&gt;&lt;/pre&gt;
      &lt;/div&gt;
      &lt;div class=&quot;evo_c-markup__content&quot;&gt;
        &lt;pre&gt;&lt;code class=&quot;evo_h-language-css&quot;&gt;

        &lt;/code&gt;&lt;/pre&gt;
      &lt;/div&gt;
      &lt;div class=&quot;evo_c-markup__content&quot;&gt;
        &lt;pre&gt;&lt;code class=&quot;evo_h-language-javascript&quot;&gt;

        &lt;/code&gt;&lt;/pre&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
        </code></pre>
      </div>
      <div class="evo_c-markup__content">
        <pre><code class="evo_h-language-css">
@import 'code_markup-config';

@include c('markup') {

@include e('tabs') {
  display: flex;
  list-style: none;
  justify-content: space-between;
  padding-left: 0;
  margin-bottom: 0;
}

@include e('item') {
  flex: 1 0 auto;
  z-index: 5;
  padding: $markup-tab-padding;
  margin-right: $markup-tab-margin-right;
  &amp;:last-child {
    margin-right: 0;
  }
  text-align: center;
  text-transform: uppercase;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  border-top-left-radius: $markup-border-radius;
  border-top-right-radius: $markup-border-radius;
  background-color: black(.2);
  transition: background .3s ease;
  &amp;:hover,
  &amp;:focus {
    background: black(.3);
    cursor: pointer;
  }

  @include s('is-active') {
    border-top: 3px solid get-color('primary', 'base');
    border-bottom: 0;
    background-color: $markup-active-tab-and-container-bg-color;
  }
}

@include e('container') {
  position: relative;
  top: -1px;
  min-height: 0;
  border: 1px solid #000;
  border-bottom: none;
  background-color: $markup-active-tab-and-container-bg-color;
  transition: min-height .3s ease, padding .3s ease;
  overflow: hidden;
  @include s('is-expanded') {
    border-bottom: 1px solid #000;;
    min-height: 70vh;
    overflow-x: scroll;
    overflow-y: scroll;
  }
}

@include e('content') {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity .3s ease;
  @include s('is-active') {
    opacity: 1;
  }
}
}
        </code></pre>
      </div>
      <div class="evo_c-markup__content">
        <pre><code class="evo_h-language-javascript">
export default function() {
var markupTabs = document.getElementsByClassName('js-c-markup-toggle');

if (markupTabs) {
  for (var i = 0; i &lt; markupTabs.length; i++) {
    //FIXME: Should be a better way than adding a listener to each element??
    markupTabs[i].addEventListener('click', function(event) {
      var clickedTabClassList = event.target.classList;
      var markupContainerClassList = this.parentNode.children[1].classList;
      var markupContentDivs = this.parentNode.children[1].children;

      if (clickedTabClassList.contains(&quot;is-active&quot;)) {
        clickedTabClassList.remove(&quot;is-active&quot;);
        markupContainerClassList.remove(&quot;is-expanded&quot;);
      } else {
        for (var i = 0; i &lt; this.children.length; i++) {
          if (this.children[i].classList.contains(&quot;is-active&quot;)) {
            this.children[i].classList.remove(&quot;is-active&quot;);
          }
        }
        clickedTabClassList.add(&quot;is-active&quot;);
        this.parentNode.children[1].scrollTop = 0;
        markupContainerClassList.add(&quot;is-expanded&quot;);
        for (var j = 0; j &lt; markupContentDivs.length; j++) {
          if (markupContentDivs[j].classList.contains(&quot;is-active&quot;)) {
            markupContentDivs[j].classList.remove(&quot;is-active&quot;);
          }
          if (this.children[j].classList.contains(&quot;is-active&quot;)) {
            markupContentDivs[j].classList.add(&quot;is-active&quot;);
          }
        }
      }
    }, false);
  }
}
}
        </code></pre>
      </div>
    </div>
  </div>

list groups

By Joseph Matembu

Default

Create an ordered or unordered list with a class of evo_c-list-group. Add evo_c-list-group__item on each list item.

Item 1
Item 2
Item 3
Item 4
Item 5

Show Markup

<ul class="evo_c-list-group">
  <li class="evo_c-list-group__item">Item 1</li>
  <li class="evo_c-list-group__item">Item 2</li>
  <li class="evo_c-list-group__item">Item 3</li>
  <li class="evo_c-list-group__item">Item 4</li>
  <li class="evo_c-list-group__item">Item 5</li>
</ul>

List Group with Icons

Add icons to the list group.

Item 1
Item 2
Item 3
Item 4
Item 5

Show Markup

<ul class="evo_c-list-group">
  <li class="evo_c-list-group__item"><i class="material-icons">face</i> Item 1</li>
  <li class="evo_c-list-group__item"><i class="material-icons">star_border</i> Item 2</li>
  <li class="evo_c-list-group__item"><i class="material-icons">face</i> Item 3</li>
  <li class="evo_c-list-group__item"><i class="material-icons">star_border</i> Item 4</li>
  <li class="evo_c-list-group__item"><i class="material-icons">face</i> Item 5</li>
</ul>

List Group with Labels

Add labels to the list group. Notice the different colors. The default color used is h-bck__accent2--base. You can change accent2 to accent, accent3, accent4, primary, primary2, secondary, and background.

Item 1 6
Item 2 123
Item 3 99
Item 4 5
Item 5 1

Show Markup

<ul class="evo_c-list-group">
  <li class="evo_c-list-group__item">Item 1 <span class="evo_c-list-group__label h-bck__accent2--base">6</span></li>
  <li class="evo_c-list-group__item">Item 2 <span class="evo_c-list-group__label h-bck__secondary--base">123</span></li>
  <li class="evo_c-list-group__item">Item 3 <span class="evo_c-list-group__label h-bck__primary--base">99</span></li>
  <li class="evo_c-list-group__item">Item 4 <span class="evo_c-list-group__label h-bck__background--base">5</span></li>
  <li class="evo_c-list-group__item">Item 5 <span class="evo_c-list-group__label h-bck__secondary--base">1</span></li>
</ul>

List Group as Links

Create each list group item as a link. The default background color used is h-bck__accent2--base. You can change accent2 to accent, accent3, accent4, primary, primary2, secondary, and background.

Item 1 Item 2 Item 3 Item 4 Item 5

Show Markup

<div class="evo_c-list-group ">
  <a href="#" class="evo_c-list-group__item s_is-active">Item 1</a>
  <a href="#" class="evo_c-list-group__item">Item 2</a>
  <a href="#" class="evo_c-list-group__item">Item 3</a>
  <a href="#" class="evo_c-list-group__item">Item 4</a>
  <a href="#" class="evo_c-list-group__item">Item 5</a>
</div>

List Group with Image

John Doe

To fourth divide good. Multiply also subdue may all fill hath place can't place brought second tree. Beast created were.
John Doe

To fourth divide good. Multiply also subdue may all fill hath place can't place brought second tree. Beast created were.
John Doe

Living blessed in second. Deep abundantly fly hath midst fly the, spirit cattle rule life stars grass form lights fruitful.

Show Markup

<ul class="evo_c-list-group">
  <li class="evo_c-list-group__item">
    <img src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/lists/face.jpg">
    <h4>John Doe</h4>
    <p>To fourth divide good. Multiply also subdue may all fill hath place can&#39;t place brought second tree. Beast created were.</p>
  </li>
  <li class="evo_c-list-group__item">
    <img src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/lists/face.jpg">
    <h4>John Doe</h4>
    <p>To fourth divide good. Multiply also subdue may all fill hath place can&#39;t place brought second tree. Beast created were.</p>
  </li>
  <li class="evo_c-list-group__item">
    <img src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/lists/face.jpg">
    <h4>John Doe</h4>
    <p>Living blessed in second. Deep abundantly fly hath midst fly the, spirit cattle rule life stars grass form lights fruitful.</p>
  </li>
</ul>

List Group with Round Image

John Doe

To fourth divide good. Multiply also subdue may all fill hath place can't place brought second tree. Beast created were.
John Doe

To fourth divide good. Multiply also subdue may all fill hath place can't place brought second tree. Beast created were.
John Doe

Living blessed in second. Deep abundantly fly hath midst fly the, spirit cattle rule life stars grass form lights fruitful.

Show Markup

<ul class="evo_c-list-group">
  <li class="evo_c-list-group__item">
    <img class="evo_h-rounded" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/lists/face.jpg">
    <h4>John Doe</h4>
    <p>To fourth divide good. Multiply also subdue may all fill hath place can&#39;t place brought second tree. Beast created were.</p>
  </li>
  <li class="evo_c-list-group__item">
    <img class="evo_h-rounded" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/lists/face.jpg">
    <h4>John Doe</h4>
    <p>To fourth divide good. Multiply also subdue may all fill hath place can&#39;t place brought second tree. Beast created were.</p>
  </li>
  <li class="evo_c-list-group__item">
    <img class="evo_h-rounded" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/standard/lists/face.jpg">
    <h4>John Doe</h4>
    <p>Living blessed in second. Deep abundantly fly hath midst fly the, spirit cattle rule life stars grass form lights fruitful.</p>
  </li>
</ul>

List Group with Columns

Divide your content into simple columns. Each list item should have the .evo_s-has-columns class. You can then separate your content by wrapping it around a span or div element with a class of evo_c-list-group__col. To create a grid instead, see our grid structure instead.

Living blessed in second.

Deep abundantly fly hath midst fly.
Fish morning day the living darkness fowl

Living blessed in second.

Fish morning day the living darkness.
Fish morning day.

Living blessed in second.

Living blessed in second.

Fish morning day the living darkness.

Show Markup

<ul class="evo_c-list-group">
  <li class="evo_c-list-group__item evo_s-has-columns">
    <div class="evo_c-list-group__col">
      <p>Living blessed in second.</p>
    </div>
    <div class="evo_c-list-group__col">
      <p>Deep abundantly fly hath midst fly.</p>
    </div>
  </li>
  <li class="evo_c-list-group__item evo_s-has-columns">
    <div class="evo_c-list-group__col"><p>Fish morning day the living darkness fowl</p></div>
    <div class="evo_c-list-group__col"><p>Living blessed in second. </p></div>
    <div class="evo_c-list-group__col"><p>Fish morning day the living darkness.</p></div>
  </li>
  <li class="evo_c-list-group__item evo_s-has-columns">
    <div class="evo_c-list-group__col"><p>Fish morning day.</p></div>
    <div class="evo_c-list-group__col"><p>Living blessed in second.</p></div>
    <div class="evo_c-list-group__col"><p>Living blessed in second.</p></div>
    <div class="evo_c-list-group__col"><p>Fish morning day the living darkness.</p></div>
  </li>
</ul>

lists

By Carlos Coves Prieto

Default

Basic ordered and unordered lists

List Item 1
List Item 2
List Item 3
- Sublist Item 1
- Sublist Item 2

List Item 1
List Item 2
List Item 3
1. Lower alpha 1
2. Lower alpha 2
1. Upper alpha 1
2. Upper alpha 2
1. Lower roman 1
2. Lower roman 2
1. Upper roman 1
2. Upper roman 2

Show Markup

<ul class="evo_c-ulist">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3
    <ul class="evo_c-ulist">
      <li>Sublist Item 1</li>
      <li>Sublist Item 2</li>
    </ul>
  </li>
</ul>
<ol class="evo_c-olist">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3
    <ol class="evo_c-olist--lower-alpha">
      <li>Lower alpha 1</li>
      <li>Lower alpha 2</li>
    </ol>
    <ol class="evo_c-olist--upper-alpha">
      <li>Upper alpha 1</li>
      <li>Upper alpha 2</li>
    </ol>
    <ol class="evo_c-olist--lower-roman">
      <li>Lower roman 1</li>
      <li>Lower roman 2</li>
    </ol>
    <ol class="evo_c-olist--upper-roman">
      <li>Upper roman 1</li>
      <li>Upper roman 2</li>
    </ol>
  </li>
</ol>

modals

By Jing Ran

Basic

Basic Modal

Show Markup

<!-- Modal Triggers -->
<a href="#modal1" class="evo_c-modal-trigger js-modal-trigger">Basic Modal</a>

<!-- Modal Overlay -->
<div class="evo_c-modal-overlay js-modal-overlay"></div>

<!-- Modals -->
<!-- modal - basic -->
<div id="modal1" class="evo_c-modal evo_c-modal--basic">
  <div class="evo_c-modal__content">
    <h3 class="evo_c-modal__header">Basic Modal</h3>
    <p class="evo_c-modal__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.</p>
  </div>
  <div class="evo_c-modal__footer">
    <a href="#!" class="evo_c-modal__close js-modal-close-btn">close</a>
  </div>
</div>

Full Screen

Full-Screen Modal

Show Markup

<!-- Modal Triggers -->
<a href="#modal2" class="evo_c-modal-trigger js-modal-trigger js-modal-trigger--f">Full-screen Modal</a>

<!-- Modals -->
<!-- modal - full screen -->
<div id="modal2" class="evo_c-modal evo_c-modal--full">
  <div class="evo_c-modal__content">
    <h3 class="evo_c-modal__header">Full-screen Modal</h3>
    <p class="evo_c-modal__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.</p>
  </div>
  <div class="evo_c-modal__footer">
    <a href="#!" class="evo_c-modal__close js-modal-close-btn">close</a>
  </div>
</div>

Fixed

Fixed Header and Footer Modal

Show Markup

<!-- Modal Triggers -->
<a href="#modal3" class="evo_c-modal-trigger js-modal-trigger">Fixed Header and Footer Modal</a>

<!-- Modals -->
<!-- modal - fixed header and footer -->
<div id="modal3" class="evo_c-modal evo_c-modal--fixed">
  <div class="evo_c-modal__content">
    <h3 class="evo_c-modal__header">Fixed Modal</h3>
    <p class="evo_c-modal__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta. Curabitur tristique quam eu est porttitor, id tincidunt arcu molestie. Morbi volutpat est orci, eget iaculis est rhoncus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta. Curabitur tristique quam eu est porttitor, id tincidunt arcu molestie. Morbi volutpat est orci, eget iaculis est rhoncus id.</p>
    <div class="evo_c-modal__footer">
      <a href="#!" class="evo_c-modal__close js-modal-close-btn">close</a>
    </div>
  </div>
</div>

Dialog

Dialog Modal

Show Markup

<!-- Modal Triggers -->
<a href="#modal4" class="evo_c-modal-trigger js-modal-trigger">Dialog Modal</a>

<!-- Modals -->
<!-- modal - dialog -->
<div id="modal4" class="evo_c-modal evo_c-modal--dialog">
  <div class="evo_c-modal__content">
    <p class="evo_c-modal__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.</p>
  </div>
  <div class="evo_c-modal__footer">
    <a href="#!" class="evo_c-modal__cancel evo_c-modal__close js-modal-close-btn">cancel</a>
    <a href="#!" class="evo_c-modal__ok evo_c-modal__close js-modal-close-btn">okay</a>
  </div>
</div>

Progress Bars

By Gabriele Romeo

Default

Progress bars enable a better User Experience by providing a *visual feedback* to the end user when an action takes long time to complete. To this end, Evolution UI has the evo_c-progress-bar component.

The evo_c-progress-bar component represents the trackbar and contains the bar element which represent the true bar instead.

The actual progress of a progress bar is strictly related to the width of the inner bar.

Show Markup

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 10%"></span>
</div>

Status

Evolution UI provides three different bar types for the following status:

WARNING - evo_c-progress-bar__bar--warn
ERROR - evo_c-progress-bar__bar--err
SUCCESS - evo_c-progress-bar__bar--succ

Show Markup

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--warn" style="width: 25%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--err" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--succ" style="width: 100%"></span>
</div>

Rounded Progress Bars

By adding the rounded modifier on an evo_c-progress-bar component, you get a rounded progress bar.

Show Markup

<div class="evo_c-progress-bar evo_c-progress-bar--rounded" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 10%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--rounded" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--warn" style="width: 25%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--rounded" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--err" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--rounded" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--succ" style="width: 100%"></span>
</div>

Different Sizes

By adding the big modifier on an evo_c-progress-bar component you can change the size of the trackbar.

By adding the small, big, or huge modifier on an evo_c-progress-bar__bar bar, you can change the bar's sizes instead.

You could also use a combination of the both two dimensions.

Show Markup

<div class="evo_c-progress-bar evo_c-progress-bar--big" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 10%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--small" style="width: 10%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--small" style="width: 10%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--big evo_c-progress-bar__bar--warn" style="width: 25%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--huge evo_c-progress-bar__bar--succ" style="width: 25%"></span>
</div>

Different shapes

A progress bar component comes with two different background shape which can be applied through the type2, and type3modifiers.

A bar element comes with three different backgroud shapes:

45 - Background's lines are at 45 degrees
90 - Background's lines are at 90 degrees
135 - Background's lines are at 135 degrees

Show Markup

<div class="evo_c-progress-bar evo_c-progress-bar--shape2" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--shape3" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--45" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--90" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--135" style="width: 50%"></span>
</div>

Percentages

Use the h-percentage helper class if you want to show the value of the progress as percentage. By dafult, the percentage will be placed on the left of the progress bar.

Use the h-percentage--right to move the percentage on the right side of the progress bar.

Use the h-percentage--center to move the percentage at the center of the progress bar.

Show Markup

<div class="evo_c-progress-bar h-percentage" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 10%"></span>
</div>

<div class="evo_c-progress-bar h-percentage--right" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 65%"></span>
</div>

<div class="evo_c-progress-bar h-percentage--center" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big h-percentage--center" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--small" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--type2 h-percentage--center" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 80%"></span>
</div>

Custom Messages

Using the data-message attribute on a evo_c-progress-bar component, you can shw custom messages to the user

Show Markup

<div class="evo_c-progress-bar evo_c-progress-bar--big h-bck__background" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-message="Uploading your file..">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--small" style="width: 20%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" data-message="Oops! Something went wrong">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--135 h-bck--accent2" style="width: 80%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big evo_c-progress-bar--infinite" data-message="Loading...">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--135 h-animation--backward"></span>
</div>

Background Color Variations

By adding the h-bck__[color-name][--variation] helper class on an evo_c-progress-bar component, you can change the trackbar's color. The color-name part comes from one of the colors in the Evolution UI's color palette. The --variation part is optional instead.

By adding the h-bck__[color-name][--variation] helper class on an evo_c-progress-bar__bar bar, you can change the bar's color. The color-name part comes from one of the colors in the Evolution UI's color palette. The --variation part is optional instead.

On the 45, 90, and 135 bars, you can apply color variations using the h-bck--[color-name] helper class instead (without the variation part).

Show Markup

<div class="evo_c-progress-bar h-bck__accent4--light" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 10%"></span>
</div>

<div class="evo_c-progress-bar h-bck__primary2--darken" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 65%"></span>
</div>



<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar h-bck__accent3--light" style="width: 10%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar h-bck__primary2--darken" style="width: 65%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--type2 h-percentage--center" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar h-bck__accent--darken" style="width: 85%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--shape2 h-percentage--center" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar h-bck__accent--darken" style="width: 85%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--45" style="width: 80%"></span>
</div>

<div class="evo_c-progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--90 h-bck--primary2" style="width: 80%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--135 h-bck--accent2" style="width: 80%"></span>
</div>

Border and Shadow

Each progress bar has a border and a box-shadow.

Using the h-border__[color-variation] helper class on an evo_c-progress-bar component, you can change the trackbar's border. The available color variations for border are:

light - h-border--light
default - h-border--default
heavy - h-border--heavy

Using the h-border__[dimension] helper class on an evo_c-progress-bar component, you can change the trackbar's border tickness. The available tickness are:

big - h-border--big - border-width: 2px
huge - h-border--huge - border-width: 3px

Show Markup

<div class="evo_c-progress-bar evo_c-progress-bar--rounded h-percentage--center h-border--huge h-border--light" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 50%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big evo_c-progress-bar--rounded h-percentage--center h-border--default h-border--huge" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--small" style="width: 50%"></span>
</div>


<div class="evo_c-progress-bar h-percentage--right h-background--inset" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar" style="width: 65%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--type2 evo_c-progress-bar--rounded h-percentage--center h-background--inset" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar h-bck__accent--darken" style="width: 85%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--shape2 h-percentage--center h-background--inset" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar h-bck__accent--darken" style="width: 85%"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big h-background--inset" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--135 h-bck--accent3" style="width: 80%"></span>
</div>

Infinite loading

Infinite loading progress bars provide to the user the idea that an action is under execution.

Using the h-animation--[type] helper class on an evo_c-progress-bar__bar element, you can change the animation. The available animation for the standard progress bars are:

backward
forth-back

The available animation for the non standard progress (type2, type3, 45, 90, 135) bars is:

backward

Show Markup

<div class="evo_c-progress-bar evo_c-progress-bar--rounded evo_c-progress-bar--infinite">
  <div class="evo_c-progress-bar__bar"></div>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--infinite">
  <div class="evo_c-progress-bar__bar h-animation--backward"></div>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--infinite">
  <div class="evo_c-progress-bar__bar h-animation--forth-back"></div>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--shape3 evo_c-progress-bar--infinite">
  <span class="evo_c-progress-bar__bar"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--infinite">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--45"></span>
</div>

<div class="evo_c-progress-bar evo_c-progress-bar--big evo_c-progress-bar--infinite">
  <span class="evo_c-progress-bar__bar evo_c-progress-bar__bar--45 h-bck--accent4 h-animation--backward"></span>
</div>

scrollspy

By Carlos Coves Prieto

Default

Look on the side navigation of this page on desktop size screens and scroll to see it in action

Show Markup

<div class="evo_c-scrollspy">
  <div id="evo_c-scrollspy-indicator" class="evo_c-scrollspy__indicator"></div>
</div>

Standard Forms

By Gabriele Romeo

Default

In Evolution UI, a standard form is wrapped by the evo_c-form class.

A form can contain a header element evo_c-form__header, a body element evo_c-form__body, and a footer element evo_c-form__footer.

Each input is wrapped by a evo_c-form__field element.

Radios and checkboxes are also wrapped by a fieldset evo_c-form__fieldset.

Add the js-validation class on a <form> element to enable visual messages if a field contains errors. The content of errors is placed inside the evo_c-form__tooltip element.

Name

Password

Phone Number

First Choice Second Choice Third Choice

I agree with terms and conditions

Show Markup

<div class="evo_c-form">

  <form class="js-validation">

    <div class="evo_c-form__header">
      <h2 class="evo_c-form__title h-txt__accent evo_c-typo__h2">join us</h2>
    </div>

    <!-- FORM BODY -->
    <div class="evo_c-form__body">

      <!-- username -->
      <div class="evo_c-form__field">
        <i class="evo_c-form__icon material-icons">person</i>
        <label class="evo_c-form__label">Name</label>
        <input class="evo_c-form__input"
               id="name"
               type="text" required>
        <div class="evo_c-form__focus-line"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">This field cannot be empty</span>
        </div>
      </div>

      <!-- email -->
      <div class="evo_c-form__field">
        <i class="evo_c-form__icon material-icons">email</i>
        <label class="evo_c-form__label">Email</label>
        <input class="evo_c-form__input"
               id="email"
               type="email" required>
        <div class="evo_c-form__focus-line"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">Invalid email</span>
        </div>

      </div>

      <!-- password -->
      <div class="evo_c-form__field">

        <i class="evo_c-form__icon material-icons">lock</i>
        <label class="evo_c-form__label">Password</label>
        <input class="evo_c-form__input"
               id="password"
               type="password"
               pattern=".{6,}"
               value="" required>
        <div class="evo_c-form__focus-line"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">
            Password must contain 6 or more characters
          </span>
        </div>

      </div>

      <!-- phone -->
      <div class="evo_c-form__field">

        <i class="evo_c-form__icon material-icons">phone_iphone</i>
        <label class="evo_c-form__label">Phone Number</label>
        <input class="evo_c-form__input"
               id="phone"
               type="input"
               required
               disabled>
        <div class="evo_c-form__focus-line"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">
            Phone number is required
          </span>
        </div>

      </div>

      <!-- select -->
      <div class="evo_c-form__field">

        <span class="evo_c-form__dropdown">
            <select class="evo_c-form__select">
                <option>January - 31 days</option>
                <option>February - 28 days (common year) - 29 days (leap years)</option>
                <option>March - 31 days</option>
                <option>April - 30 days</option>
                <option>May - 31 days</option>
                <option>June - 30 days</option>
                <option>July - 31 days</option>
                <option>August - 31 days</option>
                <option>September - 30 days</option>
                <option>October - 31 days</option>
                <option>November - 30 days</option>
                <option>December - 31 days</option>
            </select>
        </span>

      </div>

      <!-- Radio Button -->
      <div class="evo_c-form__field">

        <fieldset class="evo_c-form__fieldset">


          <input id="c-form-radio-1-1" name="c-form-radio-1" type="radio" checked>
          <label class="evo_c-form__radio" for="c-form-radio-1-1">
            First Choice
          </label>

          <input id="c-form-radio-1-2" name="c-form-radio-1" type="radio">
          <label class="evo_c-form__radio" for="c-form-radio-1-2">
            Second Choice
          </label>

          <input id="c-form-radio-1-3" name="c-form-radio-1" type="radio">
          <label class="evo_c-form__radio" for="c-form-radio-1-3">
            Third Choice
          </label>

        </fieldset>

      </div>

      <div class="evo_c-form__field">

        <fieldset class="evo_c-form__fieldset">

          <input type="checkbox" id="c-form-checkbox-1-1">
          <label class="evo_c-form__checkbox" for="c-form-checkbox-1-1">
            I agree with terms and conditions
          </label>

        </fieldset>

        <fieldset class="evo_c-form__fieldset">

          <input type="checkbox" id="c-form-checkbox-1-2">
          <label class="evo_c-form__checkbox evo_c-form__checkbox--x" for="c-form-checkbox-1-2">
            I agree with terms and conditions
          </label>

        </fieldset>

      </div>

    </div>

    <!-- FORM FOOTER -->
    <div class="evo_c-form__footer">
      <input class="evo_c-form__button evo_c-form__button--huge"
             type="submit"
             value="Sign Up">

      <input class="evo_c-form__button evo_c-form__button--primary"
             type="submit"
             value="Sign Up">
    </div>

  </form>

</div>

Card

Add the card modifier to a standard form to get a card form

Name

Password

First Choice Second Choice Third Choice

I agree with terms and conditions

Show Markup

<div class="evo_c-form evo_c-form--card">

  <form class="js-validation">

    <div class="evo_c-form__header">
      <h2 class="evo_c-form__title h-txt__accent evo_c-typo__h2">join us</h2>
    </div>

    <!-- FORM BODY -->
    <div class="evo_c-form__body">

      <!-- username -->
      <div class="evo_c-form__field">
        <i class="evo_c-form__icon material-icons">person</i>
        <label class="evo_c-form__label">Name</label>
        <input class="evo_c-form__input"
               id="name"
               type="text" required>
        <div class="evo_c-form__focus-line"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">This field cannot be empty</span>
        </div>
      </div>

      <!-- email -->
      <div class="evo_c-form__field">
        <i class="evo_c-form__icon material-icons">email</i>
        <label class="evo_c-form__label">Email</label>
        <input class="evo_c-form__input"
               id="email"
               type="email" required>
        <div class="evo_c-form__focus-line"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">Invalid email</span>
        </div>

      </div>

      <!-- password -->
      <div class="evo_c-form__field">

        <i class="evo_c-form__icon material-icons">lock</i>
        <label class="evo_c-form__label">Password</label>
        <input class="evo_c-form__input"
               id="password"
               type="password"
               pattern=".{6,}"
               value="" required>
        <div class="evo_c-form__focus-line"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">
            Password must contain 6 or more characters
          </span>
        </div>

      </div>

      <!-- Radio Button -->
      <div class="evo_c-form__field">

        <fieldset class="evo_c-form__fieldset">


          <input id="c-form-radio-2-1" name="c-form-radio-2" type="radio" checked>
          <label class="evo_c-form__radio evo_c-form__radio--variation3" for="c-form-radio-2-1">
            First Choice
          </label>

          <input id="c-form-radio-2-2" name="c-form-radio-2" type="radio">
          <label class="evo_c-form__radio evo_c-form__radio--variation3" for="c-form-radio-2-2">
            Second Choice
          </label>

          <input id="c-form-radio-2-3" name="c-form-radio-2" type="radio">
          <label class="evo_c-form__radio evo_c-form__radio--variation3" for="c-form-radio-2-3">
            Third Choice
          </label>

        </fieldset>

      </div>

      <div class="evo_c-form__field">

        <fieldset class="evo_c-form__fieldset">

          <input type="checkbox" id="c-form-checkbox-2">
          <label class="evo_c-form__checkbox" for="c-form-checkbox-2">
            I agree with terms and conditions
          </label>

        </fieldset>

      </div>

    </div>

    <!-- FORM FOOTER -->
    <div class="evo_c-form__footer">
      <input class="evo_c-form__button h-bck--background evo_c-form__button--rounded evo_c-form__button--huge"
             type="submit"
             value="Sign Up">

    </div>

  </form>

</div>

Submit Button Color Variations

By default, a button has a white background and a colored border.

You can change the background color on hover using a h-bck__[color-name] helper class on an evo_c-form__button component. The color-name part comes from one of the colors in the Evolution UI's color palette.

Using the evo_c-form__button--[color-name] modifier class, the button gets the intended background color. The color-name part comes from one of the colors in the Evolution UI's color palette.

Using the evo_c-form__button--rounded modifier class, the button will be rounded by a predefined amount.

Using the h--3D helper class, the button will get a 3D effect.

Using the h-padding--small or h-padding--huge helper classes on an evo_c-form__button, you can change the button's padding.

Show Markup

<div class="evo_c-form h-bck__secondary h-border h-border-style--dotted">

    <!-- FORM FOOTER -->
    <div class="evo_c-form__body">

      <input class="evo_c-form__button"
             type="submit"
             value="Login">

      <input class="evo_c-form__button h-bck--background"
             type="submit"
             value="Login">

      <input class="evo_c-form__button h-bck--accent3"
             type="submit"
             value="Login">

    </div>

    <div class="evo_c-form__body">

      <input class="evo_c-form__button evo_c-form__button--accent2"
             type="submit"
             value="Login">

      <input class="evo_c-form__button evo_c-form__button--background"
             type="submit"
             value="Login">

      <input class="evo_c-form__button evo_c-form__button--accent3"
             type="submit"
             value="Login">

    </div>

    <div class="evo_c-form__body">

    <input class="evo_c-form__button evo_c-form__button--rounded h-bck--secondary"
           type="submit"
           value="Login">

    <input class="evo_c-form__button evo_c-form__button--rounded evo_c-form__button--primary"
           type="submit"
           value="Login">

    </div>

    <div class="evo_c-form__body">

      <input class="evo_c-form__button h-bck--secondary h-3D"
             type="submit"
             value="Login">


      <input class="evo_c-form__button evo_c-form__button--rounded h-3D evo_c-form__button--primary"
             type="submit"
             value="Login">
    </div>

    <div class="evo_c-form__body">

      <input class="evo_c-form__button h-bck--background h-padding--small"
             type="submit"
             value="Login">


      <input class="evo_c-form__button h-bck--background h-padding--huge"
             type="submit"
             value="Login">
    </div>


</div>

Background Variations

By adding the h-bck__[color-name][--variation] helper class on an evo_c-form component, you can change the background color of the form. The color-name part comes from one of the colors in the Evolution UI's color palette. The --variation part is optional instead.

By adding the h-bck__[color-name] helper class on an evo_c-form__focus-line element, you can change the background color of a focus line.

Show Markup

<div class="evo_c-form h-bck__secondary">

  <form class="js-validation">

    <div class="evo_c-form__header">
      <h2 class="evo_c-form__title evo_c-typo__h2">Sign in</h2>
    </div>

    <!-- FORM BODY -->
    <div class="evo_c-form__body">

      <!-- username -->
      <div class="evo_c-form__field">
        <i class="evo_c-form__icon material-icons">person</i>
        <label class="evo_c-form__label">Username</label>
        <input class="evo_c-form__input"
               id="username"
               type="text" required>
        <div class="evo_c-form__focus-line h-bck--accent3"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">This field cannot be empty</span>
        </div>
      </div>

      <!-- password -->
      <div class="evo_c-form__field">

        <i class="evo_c-form__icon material-icons">lock</i>
        <label class="evo_c-form__label">Password</label>
        <input class="evo_c-form__input"
               id="password"
               type="password"
               pattern=".{6,}"
               value="" required>
        <div class="evo_c-form__focus-line h-bck--accent3"></div>

        <div class="evo_c-form__tooltip">
          <span class="evo_c-form__tooltip-text">
            Password must contain 6 or more characters
          </span>
        </div>

      </div>

    </div>

    <!-- FORM FOOTER -->
    <div class="evo_c-form__footer">
      <input class="evo_c-form__button evo_c-form__button--accent3"
             type="submit"
             value="Login">
    </div>

  </form>

</div>

Checkbox Variations

Use the evo_c-form__checkbox--x modifier class on an evo_c-form__checkbox element to get a different checkbox.

By adding the h-bck__[color-name] helper class on an evo_c-form__checkbox element, you can change the color of the checkbox. The color-name part comes from one of the colors in the Evolution UI's color palette.

I agree with terms and conditions

Show Markup

<div class="evo_c-form h-bck__secondary h-border h-border-style--dotted">

    <div class="evo_c-form__field">

      <fieldset class="evo_c-form__fieldset">

        <input type="checkbox" id="c-form-checkbox-3-1">
        <label class="evo_c-form__checkbox h-bck--accent2" for="c-form-checkbox-3-1">
          I agree with terms and conditions
        </label>

      </fieldset>

      <fieldset class="evo_c-form__fieldset">

        <input type="checkbox" id="c-form-checkbox-4-1">
        <label class="evo_c-form__checkbox evo_c-form__checkbox--x h-bck--accent4" for="c-form-checkbox-4-1">
          I agree with terms and conditions
        </label>

      </fieldset>

    </div>


</div>

Radio Variations

A Radio button comes in the following color variants

evo_c-form__radio--variation2
evo_c-form__radio--variation3

First Choice Second Choice Third Choice

Show Markup

<div class="evo_c-form h-bck__secondary">

    <!-- Radio Button -->
    <div class="evo_c-form__field">

      <fieldset class="evo_c-form__fieldset">


        <input id="c-form-radio-5-1" name="c-form-radio-5" type="radio" checked>
        <label class="evo_c-form__radio" for="c-form-radio-5-1">
          First Choice
        </label>

        <input id="c-form-radio-5-2" name="c-form-radio-5" type="radio">
        <label class="evo_c-form__radio evo_c-form__radio--variation2" for="c-form-radio-5-2">
          Second Choice
        </label>

        <input id="c-form-radio-5-3" name="c-form-radio-5" type="radio">
        <label class="evo_c-form__radio evo_c-form__radio--variation3" for="c-form-radio-5-3">
          Third Choice
        </label>

      </fieldset>

    </div>


</div>

Select Variations

The select element comes in the following color variants:

evo_c-form__dropdown--white
evo_c-form__dropdown--primary
evo_c-form__dropdown--secondary

You can change its size by using the following classes:

evo_c-form__dropdown--small
evo_c-form__dropdown--large

Show Markup

<div class="evo_c-form h-bck__secondary">

  <!-- select -->
  <div class="evo_c-form__field">

    <span class="evo_c-form__dropdown">
        <select class="evo_c-form__select">
            <option>January - 31 days</option>
            <option>February - 28 days (common year) - 29 days (leap years)</option>
            <option>March - 31 days</option>
            <option>April - 30 days</option>
            <option>May - 31 days</option>
            <option>June - 30 days</option>
            <option>July - 31 days</option>
            <option>August - 31 days</option>
            <option>September - 30 days</option>
            <option>October - 31 days</option>
            <option>November - 30 days</option>
            <option>December - 31 days</option>
        </select>
    </span>

  </div>

  <div class="evo_c-form__field">

    <span class="evo_c-form__dropdown evo_c-form__dropdown--white">
        <select class="evo_c-form__select">
            <option>January - 31 days</option>
            <option>February - 28 days (common year) - 29 days (leap years)</option>
            <option>March - 31 days</option>
            <option>April - 30 days</option>
            <option>May - 31 days</option>
            <option>June - 30 days</option>
            <option>July - 31 days</option>
            <option>August - 31 days</option>
            <option>September - 30 days</option>
            <option>October - 31 days</option>
            <option>November - 30 days</option>
            <option>December - 31 days</option>
        </select>
    </span>

  </div>

  <div class="evo_c-form__field">

    <span class="evo_c-form__dropdown evo_c-form__dropdown--primary">
        <select class="evo_c-form__select">
            <option>January - 31 days</option>
            <option>February - 28 days (common year) - 29 days (leap years)</option>
            <option>March - 31 days</option>
            <option>April - 30 days</option>
            <option>May - 31 days</option>
            <option>June - 30 days</option>
            <option>July - 31 days</option>
            <option>August - 31 days</option>
            <option>September - 30 days</option>
            <option>October - 31 days</option>
            <option>November - 30 days</option>
            <option>December - 31 days</option>
        </select>
    </span>

  </div>

  <div class="evo_c-form__field">

    <span class="evo_c-form__dropdown evo_c-form__dropdown--secondary">
        <select class="evo_c-form__select">
            <option>January - 31 days</option>
            <option>February - 28 days (common year) - 29 days (leap years)</option>
            <option>March - 31 days</option>
            <option>April - 30 days</option>
            <option>May - 31 days</option>
            <option>June - 30 days</option>
            <option>July - 31 days</option>
            <option>August - 31 days</option>
            <option>September - 30 days</option>
            <option>October - 31 days</option>
            <option>November - 30 days</option>
            <option>December - 31 days</option>
        </select>
    </span>

  </div>

  <div class="evo_c-form__field">

    <span class="evo_c-form__dropdown evo_c-form__dropdown--small">
        <select class="evo_c-form__select">
            <option>January - 31 days</option>
            <option>February - 28 days (common year) - 29 days (leap years)</option>
            <option>March - 31 days</option>
            <option>April - 30 days</option>
            <option>May - 31 days</option>
            <option>June - 30 days</option>
            <option>July - 31 days</option>
            <option>August - 31 days</option>
            <option>September - 30 days</option>
            <option>October - 31 days</option>
            <option>November - 30 days</option>
            <option>December - 31 days</option>
        </select>
    </span>

  </div>


  <div class="evo_c-form__field">

    <span class="evo_c-form__dropdown evo_c-form__dropdown--large">
        <select class="evo_c-form__select">
            <option>January - 31 days</option>
            <option>February - 28 days (common year) - 29 days (leap years)</option>
            <option>March - 31 days</option>
            <option>April - 30 days</option>
            <option>May - 31 days</option>
            <option>June - 30 days</option>
            <option>July - 31 days</option>
            <option>August - 31 days</option>
            <option>September - 30 days</option>
            <option>October - 31 days</option>
            <option>November - 30 days</option>
            <option>December - 31 days</option>
        </select>
    </span>

  </div>

</div>

Standard Tabs

By Gabriele Romeo

Default

In Evolution UI, tabs are wrapped by the evo_c-tab container and are accessible to people with disabilities.

Use the LEFT/RIGHT and UP/DOWN arrows on your keyboard for navigate through the active tab.

A tab contains a navigation list and a list of items.

Tab 1

Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore aliquip aute et est voluptate.

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-1-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-1-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Border Style

Tabs can have a border.

By adding the h-border--[type] helper classe on a evo_c-tab component, you can add a border to a tab. The available types are:

light
medium
heavy

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab h-border--heavy">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-1-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-1-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Card Style

Tabs could have a card style, too.

By adding the card modifier classe on a evo_c-tab component, you can add the card style to a tab.

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-1-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-1-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Color Variations

By adding the h-bck__[color-name][--variation] helper class on an evo_c-tab__navigation element, you can change the navigation's color. The color-name part comes from one of the colors in the Evolution UI's color palette. The --variation part is optional instead.

By adding the h-active-bck--[color-name] helper class on the evo_c-tab__list element, you can change the color of the active tab. The color-name part comes from one of the colors in the Evolution UI's color palette.

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__background--light" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent4">
      <li class="evo_c-tab__item is-active" aria-controls="panel-1-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-1-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Sticky

A Evolution UI tab could have a sticky element which is always visible to the user. To this end, add a div with the classevo_c-tab__sticky just under the navigation element.

Using the modifier sticky-half on a evo_c-tab component the width of the sticky will be half.

Sticky Element

Tab 1

Tab 2

Tab 3

Sticky Element

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__primary2--dark" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent2">
      <li class="evo_c-tab__item is-active" aria-controls="panel-5-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-5-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-5-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-5-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-5-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-5-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__sticky">
    <h2>Sticky Element</h2>
  </div>

  <div class="evo_c-tab__panel is-active" id="panel-5-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-5-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-5-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--card evo_c-tab--sticky-half">

  <nav class="evo_c-tab__navigation h-bck__background" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent2">
      <li class="evo_c-tab__item is-active" aria-controls="panel-5b-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-5b-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-5b-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-5b-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-5b-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-5b-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__sticky">
    <h2>Sticky Element</h2>
  </div>

  <div class="evo_c-tab__panel is-active" id="panel-5b-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-5b-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-5b-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Flex Helpers

A Evolution UI tab provides a list of flex helpers which can be used on the navigation link to change the visual aspect of tab items.

The available helpers are:

h-grow
h-space-around
h-content--left
h-content--center
h-content--right

Sticky Element

Tab 1

Tab 2

Tab 3

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__primary2--light" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent2 h-grow">
      <li class="evo_c-tab__item is-active" aria-controls="panel-1-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-1-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-1-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__sticky">
    <h2>Sticky Element</h2>
  </div>

  <div class="evo_c-tab__panel is-active" id="panel-1-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-1-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent3 h-grow h-content--right">
      <li class="evo_c-tab__item is-active" aria-controls="panel-1-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-2-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-2-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-2-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-2-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-2-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-2-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-2-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-2-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Lateral Navigation

Using the lateral modifier on an evo_c-tab component the navigation will be placed lateral.

Using the h-nav--right helper class on the evo_c-tab__navigation element, the navigation will be placed on the right side instead.

Tab 1

Tab 2

Tab 3

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab evo_c-tab--lateral evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__secondary--light" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent2">
      <li class="evo_c-tab__item is-active" aria-controls="panel-6-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-6-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-6-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-6-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-6-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-6-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-6-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-6-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-6-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--lateral h-nav--right evo_c-tab--card">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-9-1" role="tab">
        <a class="evo_c-tab__link" href="#tab6b-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9-1" role="tab">
        <a class="evo_c-tab__link" href="#tab6b-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9-1" role="tab">
        <a class="evo_c-tab__link" href="#tab6b-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="tab6b-1">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="tab6b-2">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="tab6b-3">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Tab Animations

In Evolution UI, you can apply an animation effect on both the tab and the panel.

The current available effects are: Tab effects

zoom
zoom-text
underline
highlight
highlight-to-right

Tab 3

h-animation--zoom h-animation--zoom-text

Show Markup

<div class="evo_c-tab evo_c-tab--lateral evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__secondary--light" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent2 h-animation--zoom">
      <li class="evo_c-tab__item is-active" aria-controls="panel-8-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-8-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-8-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      <code>h-animation--zoom</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      <code>h-animation--zoom</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      <code>h-animation--zoom</code>
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__secondary--light" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent2 h-animation--zoom-text">
      <li class="evo_c-tab__item is-active" aria-controls="panel-8-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-8b-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8b-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8b-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8b-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8b-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-8b-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      <code>h-animation--zoom-text</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8b-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      <code>h-animation--zoom-text</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8b-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      <code>h-animation--zoom-text</code>
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__primary--dark" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--secondary h-animation--underline">
      <li class="evo_c-tab__item is-active" aria-controls="panel-8-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-8c-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8c-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8c-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8c-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8c-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-8c-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      <code>h-animation--underline</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8c-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      <code>h-animation--underline</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8c-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      <code>h-animation--underline</code>
    </p>
  </div>

</div>


<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__primary--dark" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--background h-animation--highlight">
      <li class="evo_c-tab__item is-active" aria-controls="panel-8-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-8d-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8d-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8d-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8d-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8d-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-8d-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      <code>h-animation--highlight</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8d-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      <code>h-animation--highlight</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8d-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      <code>h-animation--highlight</code>
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__primary--dark" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--background h-animation--highlight-to-right">
      <li class="evo_c-tab__item is-active" aria-controls="panel-8-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-8e-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8e-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8e-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8e-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8e-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-8e-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      <code>h-animation--highlight-to-right</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8e-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      <code>h-animation--highlight-to-right</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8e-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      <code>h-animation--highlight-to-right</code>
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--card">

  <nav class="evo_c-tab__navigation h-bck__background" role="tablist">
    <ul class="evo_c-tab__list h-active-bck--accent4 h-animation--zoom h-animation--zoom-text">
      <li class="evo_c-tab__item is-active" aria-controls="panel-8-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-8f-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8f-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8f-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-8f-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-8f-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-8f-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      <code>h-animation--zoom</code>
      <code>h-animation--zoom-text</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8f-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      <code>h-animation--zoom</code>
      <code>h-animation--zoom-text</code>
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-8f-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      <code>h-animation--zoom</code>
      <code>h-animation--zoom-text</code>
    </p>
  </div>

</div>

Panel Animations

In Evolution UI, you can apply an animation effect on both the tab and the panel.

The current available effects are: Panel effects

scroll-from-top
scroll-from-bottom
scroll-from-left
scroll-from-right

You can apply the effects by adding the effect on the evo_c-tab component.

`scroll-from-top`

Tab 1

Tab 2

Lorem ipsum Consectetur nisi do nulla anim incididunt Excepteur dolore ex ullamco eiusmod cupidatat deserunt qui esse enim labore incididunt elit dolor id ex deserunt commodo nisi do non sint nostrud aliqua sed ad adipisicing est id non sunt ad dolore in id culpa sed ullamco ad Excepteur veniam est est voluptate do amet exercitation sit anim non ex id cillum adipisicing nulla eu velit officia aute ut esse in ut sed eu eu culpa amet culpa nostrud dolore minim quis dolore labore Excepteur fugiat aute sunt adipisicing veniam nulla deserunt cupidatat voluptate dolor anim elit incididunt et proident enim aliquip dolore fugiat Excepteur dolore nulla fugiat dolor minim do id aute nisi Ut dolor anim commodo in dolor adipisicing fugiat elit eu Ut irure occaecat nulla Duis irure laborum sit irure exercitation officia voluptate dolore anim est et fugiat in cupidatat esse sint laborum quis consequat pariatur dolore ex dolore ut elit voluptate incididunt Ut fugiat consequat esse officia anim enim consectetur ullamco dolor magna Excepteur proident proident dolor laboris sed eu nulla eiusmod aliqua labore veniam officia minim incididunt fugiat ut irure sint adipisicing adipisicing consequat dolore culpa.

Tab 3

Tab 1

Tab 2

Tab 3

Tab 1

Tab 2

Tab 3

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab evo_c-tab--card evo_c-tab--scroll-from-top">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-9-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9-3">Tab 3</a>
      </li>
    </ul>
  </nav>
  <div class="evo_c-tab__sticky">
    <h2><code>scroll-from-top</code></h2>
  </div>

  <div class="evo_c-tab__panel is-active" id="panel-9-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
    <img src="https://unsplash.it/g/300/200/?random">
  </div>

  <div class="evo_c-tab__panel" id="panel-9-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Consectetur nisi do nulla anim incididunt Excepteur
      dolore ex ullamco eiusmod cupidatat deserunt qui esse enim labore
      incididunt elit dolor id ex deserunt commodo nisi do non sint nostrud
      aliqua sed ad adipisicing est id non sunt ad dolore in id culpa sed
      ullamco ad Excepteur veniam est est voluptate do amet exercitation
      sit anim non ex id cillum adipisicing nulla eu velit officia aute ut
      esse in ut sed eu eu culpa amet culpa nostrud dolore minim quis dolore
      labore Excepteur fugiat aute sunt adipisicing veniam nulla deserunt
      cupidatat voluptate dolor anim elit incididunt et proident enim aliquip
      dolore fugiat Excepteur dolore nulla fugiat dolor minim do id aute
      nisi Ut dolor anim commodo in dolor adipisicing fugiat elit eu Ut
      irure occaecat nulla Duis irure laborum sit irure exercitation
      officia voluptate dolore anim est et fugiat in cupidatat esse sint
      laborum quis consequat pariatur dolore ex dolore ut elit voluptate
      incididunt Ut fugiat consequat esse officia anim enim consectetur
      ullamco dolor magna Excepteur proident proident dolor laboris sed eu
      nulla eiusmod aliqua labore veniam officia minim incididunt fugiat
      ut irure sint adipisicing adipisicing consequat dolore culpa.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-9-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
    <img src="https://unsplash.it/g/400/200/?random">
  </div>

</div>


<div class="evo_c-tab evo_c-tab--scroll-from-top evo_c-tab--lateral h-nav--right evo_c-tab--card">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list h-animation--zoom">
      <li class="evo_c-tab__item is-active" aria-controls="panel-9b-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9b-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9b-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-9b-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9b-3" role="tab">
        <a class="evo_c-tab__link" href="#panel-9b-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-9b-1">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-9b-2">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Consectetur nisi do nulla anim incididunt Excepteur
      dolore ex ullamco eiusmod cupidatat deserunt qui esse enim labore
      incididunt elit dolor id ex deserunt commodo nisi do non sint nostrud
      aliqua sed ad adipisicing est id non sunt ad dolore in id culpa sed
      ullamco ad Excepteur veniam est est voluptate do amet exercitation
      sit anim non ex id cillum adipisicing nulla eu velit officia aute ut
      esse in ut sed eu eu culpa amet culpa nostrud dolore minim quis dolore
      labore Excepteur fugiat aute sunt adipisicing veniam nulla deserunt
      cupidatat voluptate dolor anim elit incididunt et proident enim aliquip
      dolore fugiat Excepteur dolore nulla fugiat dolor minim do id aute
      nisi Ut dolor anim commodo in dolor adipisicing fugiat elit eu Ut
      irure occaecat nulla Duis irure laborum sit irure exercitation
      officia voluptate dolore anim est et fugiat in cupidatat esse sint
      laborum quis consequat pariatur dolore ex dolore ut elit voluptate
      incididunt Ut fugiat consequat esse officia anim enim consectetur
      ullamco dolor magna Excepteur proident proident dolor laboris sed eu
      nulla eiusmod aliqua labore veniam officia minim incididunt fugiat
      ut irure sint adipisicing adipisicing consequat dolore culpa.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-9b-3">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>


<div class="evo_c-tab evo_c-tab--scroll-from-left">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-9c-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9c-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9c-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9c-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9c-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9c-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-9c-1">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
    <img src="https://unsplash.it/g/300/200/?random">
  </div>

  <div class="evo_c-tab__panel" id="panel-9c-2">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      Lorem ipsum Consectetur nisi do nulla anim incididunt Excepteur
      dolore ex ullamco eiusmod cupidatat deserunt qui esse enim labore
      incididunt elit dolor id ex deserunt commodo nisi do non sint nostrud
      aliqua sed ad adipisicing est id non sunt ad dolore in id culpa sed
      ullamco ad Excepteur veniam est est voluptate do amet exercitation
      sit anim non ex id cillum adipisicing nulla eu velit officia aute ut
      esse in ut sed eu eu culpa amet culpa nostrud dolore minim quis dolore
      labore Excepteur fugiat aute sunt adipisicing veniam nulla deserunt
      cupidatat voluptate dolor anim elit incididunt et proident enim aliquip
      dolore fugiat Excepteur dolore nulla fugiat dolor minim do id aute
      nisi Ut dolor anim commodo in dolor adipisicing fugiat elit eu Ut
      irure occaecat nulla Duis irure laborum sit irure exercitation
      officia voluptate dolore anim est et fugiat in cupidatat esse sint
      laborum quis consequat pariatur dolore ex dolore ut elit voluptate
      incididunt Ut fugiat consequat esse officia anim enim consectetur
      ullamco dolor magna Excepteur proident proident dolor laboris sed eu
      nulla eiusmod aliqua labore veniam officia minim incididunt fugiat
      ut irure sint adipisicing adipisicing consequat dolore culpa.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-9c-3">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <img src="https://unsplash.it/g/400/200/?random">
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

<div class="evo_c-tab evo_c-tab--scroll-from-right">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-9d-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-9d-1">Tab 1</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9d-2" role="tab">
        <a class="evo_c-tab__link" href="#panel-9d-2">Tab 2</a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-9d-3" role="tab">
        <a class="evo_c-tab__link" href="#panel-9d-3">Tab 3</a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-9d-1">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-9d-2">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
    <p>
      <img src="https://unsplash.it/g/500/300/?random">
    </p>
  </div>

  <div class="evo_c-tab__panel" id="panel-9d-3">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
    <img src="https://unsplash.it/g/200/300/?random">
    <p>
      Lorem ipsum Anim enim dolore occaecat cupidatat laborum dolore eu
      Excepteur amet laboris amet aliqua ut quis cupidatat et id in nisi
      officia occaecat fugiat deserunt aliquip in ut pariatur ad dolore
      aliquip aute et est voluptate.
    </p>
  </div>

</div>

Icons

A tab can contain icons.

Use the h-link-column helper class on a evo_c-tab__list element if you want to stack the icons.

Tab 1

Tab 2

Tab 3

Tab 1

Tab 2

Tab 3

Show Markup

<div class="evo_c-tab evo_c-tab--card evo_c-tab--scroll-from-top">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list">
      <li class="evo_c-tab__item is-active" aria-controls="panel-10-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-10-1">
          <i class="material-icons">reply</i>
          Tab 1
        </a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-10-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-10-2">
          <i class="material-icons">share</i>
          Tab 2
        </a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-10-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-10-3">
          <i class="material-icons">phonelink_setup</i>
          Tab 3
        </a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-10-1" aria-labelledby="tab1" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
  </div>

  <div class="evo_c-tab__panel" id="panel-10-2" aria-labelledby="tab2" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
  </div>

  <div class="evo_c-tab__panel" id="panel-10-3" aria-labelledby="tab3" role="tabpanel">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
  </div>

</div>


<div class="evo_c-tab evo_c-tab--scroll-from-top evo_c-tab--lateral h-nav--right evo_c-tab--card">

  <nav class="evo_c-tab__navigation" role="tablist">
    <ul class="evo_c-tab__list h-animation--zoom h-link-column">
      <li class="evo_c-tab__item is-active" aria-controls="panel-10b-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-10b-1">
          <i class="material-icons">reply</i>
          Tab 1
        </a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-10b-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-10b-2">
          <i class="material-icons">share</i>
          Tab 2
        </a>
      </li>
      <li class="evo_c-tab__item" aria-controls="panel-10b-1" role="tab">
        <a class="evo_c-tab__link" href="#panel-10b-3">
          <i class="material-icons">phonelink_setup</i>
          Tab 3
        </a>
      </li>
    </ul>
  </nav>

  <div class="evo_c-tab__panel is-active" id="panel-10b-1">
    <h2 class="evo_c-typo__h2">Tab 1</h2>
  </div>

  <div class="evo_c-tab__panel" id="panel-10b-2">
    <h2 class="evo_c-typo__h2">Tab 2</h2>
  </div>

  <div class="evo_c-tab__panel" id="panel-10b-3">
    <h2 class="evo_c-typo__h2">Tab 3</h2>
  </div>

</div>

tooltip

By Hiep Vo

Default

Tooltips are simple text/html that appear when the user hovers over or touches an element. Use tooltips to display auxiliary/complementary information.

Creating and Using Tooltips

To create a tooltip within your page, decide what part of text or html on your page needs a tooltip and wrap that portion with a span or div tag and add evo_c-tooltip-container class to this wrapper tag.

Along with that, just add your tooltip contents (can be plain text or html code) within the same wrapping element. Wrap your tooltip contents inside a tag with class evo_c-tooltip.

By default the tooltip will slide in from above, but you may define flow attribute on the tooltip and set it to left, right, up or down to make them slide in from left, right, above or bottom respectively.

Upcoming Enhancements

Container Collision Detection and Position Adjust
Dynamic Sizing
New Positions — Top-Left, Top-Right, Bottom-Left and Bottom-Right
Background Color Choices

Examples

Hover over the links below to see tooltips:

Show Markup

  <p>The tooltips may slide in from
    <!-- Default tooltip from above (no flow attribute) -->
    <span class="evo_c-tooltip-container">
      <a href="#">above by default</a>
      <span class="evo_c-tooltip">Default tooltip from above.</span>
    </span>, or from

    <!-- Tooltip from Left (flow="left") -->
    <span class="evo_c-tooltip-container">
      <a href="#">left</a>
      <span class="evo_c-tooltip" flow="left">Tooltip from left.</span>
    </span>, or from

    <!-- Tooltip from Right (flow="right") -->
    <span class="evo_c-tooltip-container">
      <a href="#">right</a>
      <span class="evo_c-tooltip" flow="right">Tooltip from right.</span>
    </span>, or from

    <!-- Tooltip from Bottom (flow="down") -->
    <span class="evo_c-tooltip-container">
      <a href="#">bottom</a>
      <span class="evo_c-tooltip" flow="down">Tooltip from bottom.</span>
    </span>. Moreover, tooltips may contain

    <!-- Plain Text tooltip (flow="up") -->
    <span class="evo_c-tooltip-container">
      <a href="#">plain text</a>
      <span class="evo_c-tooltip" flow="up">This is a plain text tooltip.</span>
    </span> or

    <!-- Tooltip with HTML (flow="up")-->
    <span class="evo_c-tooltip-container">
      <a href="#">html (including images)</a>
      <span class="evo_c-tooltip" flow="up"><em>Tooltip</em> with <strong>HTML</strong>.
        <img src="assets/images/evolution-ui/standard/tooltip/smilies.jpg"></span>
    </span>.
  </p>

Scaling Tooltip

As its name, this tooltip shows content from the right corner with little icon. You can specific tooltip scale from right to left and all the way down or scale right to left and continue expand to left.

Show Markup

<div>
  <button class="evo_c-tt-scale">Projects
    <div class="evo_c-tt-scale__vertical"><div class="evo_c-tt-scale__content">Lorem ipsum, consectetur adipiscing elit. Donec metus orci. faucibus sem nec. Quisque tempus pretium dolor.</div></div></button>
  <button class="btn btn-primary evo_c-tt-scale">Projects
    <div class="evo_c-tt-scale__horizontal"><div class="evo_c-tt-scale__content">Lorem ipsum, consectetur adipiscing elit. Donec metus orci.</div></div></button>
</div>

typography

By Gabriele Romeo

Default

Evolution UI makes use of a typographic scale known as major-third for creating balanced and harmonious font sizing.

The framework provides the h1-h6 headings as well as an extension for big and small headings.

Evolution UI's typography classes can be applied on every HTML element.

For example you could apply a evo_c-typo__h1 class on an <h3> HTML element. The latter will get a new aesthetic look while its semantic meaning will remain the same.

Title x-large

Title large

Title h1

Title h2

Title h3

Title h4

Title h5

Title h6

Title small

Title x-small

Show Markup

<p class="evo_c-typo__x-large">Title x-large</p>
<p class="evo_c-typo__large">Title large</p>
<h1 class="evo_c-typo__h1">Title h1</h1>
<h2 class="evo_c-typo__h2">Title h2</h2>
<h3 class="evo_c-typo__h3">Title h3</h3>
<h4 class="evo_c-typo__h4">Title h4</h4>
<h5 class="evo_c-typo__h5">Title h5</h5>
<h6 class="evo_c-typo__h6">Title h6</h6>
<p class="evo_c-typo__small">Title small</p>
<p class="evo_c-typo__x-small">Title x-small</p>

Utilities

Evolution UI provides a list of helpers for text which can be applied through the evo_h-txt--[modifier] helper class.

Default font-family

Bold

Italic

Caps

Align text to the left

Align text to the center

Align text to the right

capitalize

uppercase

LOWERCASE

underline

No-decoration

Text no wrap

Show Markup

<p class="evo_h-txt--font-family">Default font-family</p>
<p class="evo_h-txt--bold">Bold</p>
<p class="evo_h-txt--italic">Italic</p>
<p class="evo_h-txt--caps evo_c-typo__h4">Caps</p>
<p class="evo_h-txt--left">Align text to the left</p>
<p class="evo_h-txt--center">Align text to the center</p>
<p class="evo_h-txt--right">Align text to the right</p>
<p class="evo_h-txt--capitalize">capitalize</p>
<p class="evo_h-txt--uppercase">uppercase</p>
<p class="evo_h-txt--lowercase">LOWERCASE</p>
<p class="evo_h-txt--underline">underline</p>
<p><a class="evo_h-txt--no-decoration" href="#">No-decoration</a></p>
<p class="evo_h-txt--no-nowrap">Text no wrap</p>

utilities

By Brian Hernandez

Floats

The floats utility classes allow you to add a single class name to an element to produce a float: left; effect, a float: right; effect or to clear both kinds of floats. The first div below is using a class of .evo_h-utilities__floats--right to float the div to the right. The subsequent div has a class of .evo_h-utilities__floats--left applied to it producing the left floating effect. The last div clears both of the previous divs by using the .evo_h-utilities__floats--clear class.

You can ignore the .evo_h-presentation classes as these have nothing to do with the floating and clearing functionality of these helper classes. These classes are just used here for styling and presentation purposes.

Div 1 Floated Right

Div 2 Floated Left

Cleared Div

Show Markup

  <div class="evo_h-utilities__floats--right evo_h-presentation evo_h-presentation__floats--right"><i class="material-icons">settings</i>Div 1 Floated Right</div>
  <div class="evo_h-utilities__floats--left evo_h-presentation evo_h-presentation__floats--left"><i class="material-icons">menu</i>Div 2 Floated Left</div>
  <div class="evo_h-utilities__floats--clear evo_h-presentation evo_h-presentation__floats--clear"><i class="material-icons">face</i>Cleared Div</div>

Text Transform

The text transform utility classes can transform text within the element it is applied to in three ways. The .evo_h-utilities__text--lowercase class transforms text to all lowercase letters. The .evo_h-utilities__text--uppercase class transform text to all uppercase letters. Finally, the .evo_h-utilities__text--capitalize class with capitalize the first letter of each word within its content.

You can ignore the .evo_h-presentation classes as these have nothing to do with the text transform functionality of these helper classes. These classes are just used here for styling and presentation purposes.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi corporis minima eveniet quo a quisquam laborum porro, soluta hic, nemo veniam accusamus impedit sequi cupiditate sint architecto. Doloremque, commodi, ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, velit nisi enim temporibus officia obcaecati in impedit minus magnam cum modi doloribus asperiores ducimus corporis? Accusantium cumque excepturi tempora optio?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repellendus itaque voluptates quos, excepturi possimus deleniti nobis, reiciendis veritatis, quasi, natus exercitationem totam eaque. Dolor et magni saepe deserunt voluptas!

Show Markup

  <div class="evo_h-presentation__text-container">
    <p class="evo_h-utilities__text evo_h-utilities__text--lowercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi corporis minima eveniet quo a quisquam laborum porro, soluta hic, nemo veniam accusamus impedit sequi cupiditate sint architecto. Doloremque, commodi, ipsam.</p>
    <p class="evo_h-utilities__text evo_h-utilities__text--uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, velit nisi enim temporibus officia obcaecati in impedit minus magnam cum modi doloribus asperiores ducimus corporis? Accusantium cumque excepturi tempora optio?</p>
    <p class="evo_h-utilities__text evo_h-utilities__text--capitalize">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repellendus itaque voluptates quos, excepturi possimus deleniti nobis, reiciendis veritatis, quasi, natus exercitationem totam eaque. Dolor et magni saepe deserunt voluptas!</p>
  </div>

Visibility

The visibility utility classes will produce different visibility and hidden effects on the elements they are applied to. In the first row of span tags we have the class .evo_h-utilities__visibility--hidden for the span containing the content 4. This class removes the element entirely from the DOM and its dimensions are no longer respected by the surrounding spans. In the second span row, the class .evo_h-utilities__visibility--invisible is applied to the 4 span. In this case, the visibility of this element is hidden from the user however its DOM dimensions are respected by the surrounding span tags this time. It is as if the elements opacity was turned down to 0.

1 2 3 4 5 6

Show Markup

  <div class="evo_h-presentation__visibility-container">
    <span class="evo_h-presentation__visibility-span">1</span>
    <span class="evo_h-presentation__visibility-span">2</span>
    <span class="evo_h-presentation__visibility-span">3</span>
    <span class="evo_h-utilities__visibility--hidden evo_h-presentation__visibility-span">4</span>
    <span class="evo_h-presentation__visibility-span">5</span>
    <span class="evo_h-presentation__visibility-span">6</span>
  </div>

  <div class="evo_h-presentation__visibility-container">
    <span class="evo_h-presentation__visibility-span">1</span>
    <span class="evo_h-presentation__visibility-span">2</span>
    <span class="evo_h-presentation__visibility-span">3</span>
    <span class="evo_h-utilities__visibility--invisible evo_h-presentation__visibility-span">4</span>
    <span class="evo_h-presentation__visibility-span">5</span>
    <span class="evo_h-presentation__visibility-span">6</span>
  </div>

Evolution Components

2D Layers

By Hiep Vo

Default

This is an innovative UI component that can be used as an alternative to accordions and tabs. It is called 2D layers.

Enrollment status

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem Ipsum

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Current Offering

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem Ipsum

Program Details

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem Ipsum

How the Advanced program works

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem Ipsum

Show Markup

<div class = "layer-wrapper">
  <div id = "layer1" class = "evo_c-layer">
    <div class = "evo_c-layer__content">
      <span class = "evo_c-layer__content--close hide"></span>
      <span class = "evo_c-layer__content--done hide"></span>
      <header>Enrollment status</header>
      <div class="evo_c-layer__description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
      <article>
        <h3>Lorem Ipsum</h3>
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
        qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
        quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
        nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </article>
    </div>
  </div>
  <div id = "layer2" class = "evo_c-layer">
    <div class = "evo_c-layer__content">
      <span class = "evo_c-layer__content--close hide"></span>
      <span class = "evo_c-layer__content--done hide"></span>
      <header>Current Offering</header>
      <div class="evo_c-layer__description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
      <article>
        <h3>Lorem Ipsum</h3>
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
        qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
        quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
        nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </article>
    </div>
  </div>
  <div id = "layer3" class = "evo_c-layer">
    <div class = "evo_c-layer__content">
      <span class = "evo_c-layer__content--close hide"></span>
      <span class = "evo_c-layer__content--done hide"></span>
      <header>Program Details</header>
      <div class="evo_c-layer__description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
      <article>
        <h3>Lorem Ipsum</h3>
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
        qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
        quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
        nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </article>
    </div>
  </div>
  <div id = "layer4" class = "evo_c-layer">
    <div class = "evo_c-layer__content">
      <span class = "evo_c-layer__content--close hide"></span>
      <span class = "evo_c-layer__content--done hide"></span>
      <header>How the Advanced program works</header>
      <div class="evo_c-layer__description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
      <article>
        <h3>Lorem Ipsum</h3>
        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
        aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
        qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
        quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
        nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
        quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
      </article>
    </div>
  </div>
</div>

3D Layers

By Carlos Coves Prieto

Default

3D Draggable Layers

LOREM IPSUM DOLOR

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

LOREM IPSUM DOLOR

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.

LOREM IPSUM DOLOR

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.

LOREM IPSUM DOLOR

Show Markup

<div class="evo_c-3dlayers">
  <div class="evo_c-3dlayer">
    <div class="evo_c-3dlayer__header">
      <span class="evo_c-3dlayer__label">LAYER 1</span>
      <i class="material-icons evo_c-3dlayer__icon-visited">done</i>
      <i class="material-icons evo_c-3dlayer__icon-drag" draggable="true">code</i></div>
    <div class="evo_c-3dlayer__content">
      <h3>LOREM IPSUM DOLOR</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
        sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
        nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
        aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
        dictum felis eu pede mollis pretium.</p>
    </div>
  </div>
  <div class="evo_c-3dlayer">
    <div class="evo_c-3dlayer__header">
      <span class="evo_c-3dlayer__label">LAYER 2</span>
      <i class="material-icons evo_c-3dlayer__icon-visited">done</i>
      <i class="material-icons evo_c-3dlayer__icon-drag" draggable="true">code</i>
    </div>
    <div class="evo_c-3dlayer__content">
      <h3>LOREM IPSUM DOLOR</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
        sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
        nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
        aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
        dictum felis eu pede mollis pretium.</p>
      <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo
        ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
        feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
        ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
    </div>
  </div>
  <div class="evo_c-3dlayer">
    <label class="evo_c-3dlayer__header">
      <span class="evo_c-3dlayer__label">LAYER 3</span>
      <i class="material-icons evo_c-3dlayer__icon-visited">done</i>
      <i class="material-icons evo_c-3dlayer__icon-drag" draggable="true">code</i>
    </label>
    <div class="evo_c-3dlayer__content">
      <h3>LOREM IPSUM DOLOR</h3>
      <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo
        ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
        feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
        ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
      <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed
        ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros
        faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
      <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce
        vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam
        accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium
        turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.</p>
    </div>
  </div>
  <div class="evo_c-3dlayer evo_c-3dlayer--selected">
    <label class="evo_c-3dlayer__header">
      <span class="evo_c-3dlayer__label">LAYER 4</span>
      <i class="material-icons evo_c-3dlayer__icon-visited">done</i>
      <i class="material-icons evo_c-3dlayer__icon-drag" draggable="true">code</i>
    </label>
    <div class="evo_c-3dlayer__content">
      <h3>LOREM IPSUM DOLOR</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
        sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
        nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
        aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
        dictum felis eu pede mollis pretium.</p>
      <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo
        ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
        feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
        ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
      <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed
        ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
        tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros
        faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
      <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce
        vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam
        accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium
        turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum.</p>
    </div>
  </div>
</div>

bookmarklet

By Sam Chittenden

Default

Using Bookmarklet

To use bookmarklet, highlight some text. If the text is able to be bookmarked a small dialogue will pop up, giving you the option to bookmark or not. Users can also use the keyboard shortcut Shift + Control + L + M. Currently you can only bookmark text that is inside of a single HTML tag. In other words you may not select text that belongs to two different paragraphs or splits any other node like a span or header. The component will warn you if you split nodes or try and activate the bookmark without selecting any text.

Once a bookmark has been created it will show up in the small widget on the right-hand side of the screen. Each bookmark can be clicked on to quickly navigate the page to that place in the text. In addition there is a convenient "Google this bookmark" link for each list item which will initiate a Google search with the query pre-filled by the bookmark text. You may clear individual bookmarks by clicking on the close icon, or clear all current bookmarks by clicking the "Clear all" button at the bottom of the bookmark list.

Including Bookmarklet

To include Bookmarklet on a page simply add the following markup somewhere in the body tag of your page and include bookmarklet.js before the closing body tag.

Highlight Color

If you don't like the default yellow, a custom highlight color can be specified by adding a valid named color or hex color value to the data-highlight-color attribute. For example:

Limiting the Component's Scope

You can limit the scope of bookmarklet's highlighting and bookmark creation by adding the data-limit-bookmarklet attribute to any element and the bookmarking will only be active for that element and its descendants. These demo bookmarklet component paragraphs are limited in this way so that the component will not extend to other sections of the Evolution UI demo site.

Bookmarks

clear all

Bookmark this selection?

Yes! No.

Show Markup

  <!-- bookmarklet list here -->
  <div class="evo_c-bookmarklet" data-highlight-color="">
    <i class="material-icons evo_c-bookmarklet__teaser">bookmark</i>
    <h1 class="evo_c-bookmarklet__bookmark-list-header">Bookmarks</h1>
    <ol class="evo_c-bookmaklet__bookmark-list">
    </ol>
    <a class="evo_c-btn evo_c-btn--secondary evo_c-bookmarklet__clear-all">clear all</a>
  </div>
  <!-- button pop-up -->
  <div class="evo_c-bookmarklet__pop-up">
    <p>Bookmark this selection?</p>
    <span class="evo_c-bookmarklet__pop-up-button--yes"><i class="material-icons">done</i> Yes!</span>
    <span class="evo_c-bookmarklet__pop-up-button--no"><i class="material-icons">close</i> No.</span>
    <span class="evo_c-bookmarklet__pop-up-pip"></span>
  </div>

crumble

By Gabriele Romeo

Default

Crumble is an evolution UI component useful when you want to aggregate more details in a small space.

The inner event wrapper must contain:

a header element (evo_c-event__header)
a body element (evo_c-event__body)

You can exploit the description element if you want to extend the available space for providing more information to the end user. (evo_c-event__description). Like the Tuesday event in the following example.

01
Monday
Event Details
02
Tuesday
Event Details
Full Description

Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation minim nostrud enim dolor fugiat incididunt cillum in fugiat exercitation ad. Mollit occaecat quis tempor cupidatat sed culpa fugiat ex et enim ex ea ex minim consectetur ea incididunt magna dolor id officia enim eiusmod duis proident exercitation proident nostrud consectetur voluptate sed aliqua proident laborum eiusmod dolor nostrud nulla do voluptate ut dolore officia enim in veniam ad dolore adipisicing anim cupidatat consequat sit esse sint ullamco est aute quis deserunt minim occaecat proident sunt consectetur do do excepteur et eiusmod exercitation esse esse voluptate adipisicing ullamco ut cillum et ea dolor eu consequat dolore do culpa dolore duis magna dolor aliqua sit ad esse do minim sed in anim ea magna anim velit tempor magna proident eiusmod sed occaecat incididunt dolore amet incididunt excepteur deserunt aliquip veniam ad ut labore cillum sunt dolor reprehenderit veniam proident anim aute consectetur eu cillum ad sit amet reprehenderit ut tempor sed in sit cupidatat amet laboris deserunt ut laborum voluptate sit sit eiusmod dolor elit elit non incididunt incididunt quis est ut aliqua consectetur tempor magna cillum ad dolor laboris velit sit laborum commodo cillum adipisicing non fugiat deserunt velit exercitation amet nisi dolor nostrud cupidatat est reprehenderit incididunt id consectetur aliqua ex cillum fugiat eiusmod irure tempor laborum tempor adipisicing irure enim consectetur aliqua consectetur eu reprehenderit adipisicing velit incididunt sit consequat eiusmod aliquip ut non incididunt aliqua commodo labore et consequat labore ex eu fugiat nisi adipisicing reprehenderit laborum tempor sit in proident consequat in id sunt ut consectetur reprehenderit dolore dolor dolore esse.

Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation minim nostrud enim dolor fugiat incididunt cillum in fugiat exercitation ad. Mollit occaecat quis tempor cupidatat sed culpa fugiat ex et enim ex ea ex minim consectetur ea incididunt magna dolor id officia enim eiusmod duis proident exercitation proident nostrud consectetur voluptate sed aliqua proident laborum eiusmod dolor nostrud nulla do voluptate ut dolore officia enim in veniam ad dolore adipisicing anim cupidatat consequat sit esse sint ullamco est aute quis deserunt minim occaecat proident sunt consectetur do do excepteur et eiusmod exercitation esse esse voluptate adipisicing ullamco ut cillum et ea dolor eu consequat dolore do culpa dolore duis magna dolor aliqua sit ad esse do minim sed in anim ea magna anim velit tempor magna proident eiusmod sed occaecat incididunt dolore amet incididunt excepteur deserunt aliquip veniam ad ut labore cillum sunt dolor reprehenderit veniam proident anim aute consectetur eu cillum ad sit amet reprehenderit ut tempor sed in sit cupidatat amet laboris deserunt ut laborum voluptate sit sit eiusmod dolor elit elit non incididunt incididunt quis est ut aliqua consectetur tempor magna cillum ad dolor laboris velit sit laborum commodo cillum adipisicing non fugiat deserunt velit exercitation amet nisi dolor nostrud cupidatat est reprehenderit incididunt id consectetur aliqua ex cillum fugiat eiusmod irure tempor laborum tempor adipisicing irure enim consectetur aliqua consectetur eu reprehenderit adipisicing velit incididunt sit consequat eiusmod aliquip ut non incididunt aliqua commodo labore et consequat labore ex eu fugiat nisi adipisicing reprehenderit laborum tempor sit in proident consequat in id sunt ut consectetur reprehenderit dolore dolor dolore esse.

Show Markup

<div class="evo_c-crumble">
  <ul class="evo_c-crumble__list">
    <li class="evo_c-crumble__item">
      <div class="evo_c-crumble__tag" data-tag="mon">01</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        Monday
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Event Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="evo_c-crumble__item">
      <div class="evo_c-crumble__tag" data-tag="tue">02</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        Tuesday
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Event Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
        <div class="evo_c-event__description">
          <h3>Full Description</h3>
          <p>
            Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation
            minim nostrud enim dolor fugiat incididunt cillum in fugiat
            exercitation ad. Mollit occaecat quis tempor cupidatat sed culpa fugiat ex et enim ex ea ex minim consectetur ea incididunt magna dolor id officia enim eiusmod duis proident exercitation proident nostrud consectetur voluptate sed aliqua proident laborum eiusmod dolor nostrud nulla do voluptate ut dolore officia enim in veniam ad dolore adipisicing anim cupidatat consequat sit esse sint ullamco est aute quis deserunt minim occaecat proident sunt consectetur do do excepteur et eiusmod exercitation esse esse voluptate adipisicing ullamco ut cillum et ea dolor eu consequat dolore do culpa dolore duis magna dolor aliqua sit ad esse do minim sed in anim ea magna anim velit tempor magna proident eiusmod sed occaecat incididunt dolore amet incididunt excepteur deserunt aliquip veniam ad ut labore cillum sunt dolor reprehenderit veniam proident anim aute consectetur eu cillum ad sit amet reprehenderit ut tempor sed in sit cupidatat amet laboris deserunt ut laborum voluptate sit sit eiusmod dolor elit elit non incididunt incididunt quis est ut aliqua consectetur tempor magna cillum ad dolor laboris velit sit laborum commodo cillum adipisicing non fugiat deserunt velit exercitation amet nisi dolor nostrud cupidatat est reprehenderit incididunt id consectetur aliqua ex cillum fugiat eiusmod irure tempor laborum tempor adipisicing irure enim consectetur aliqua consectetur eu reprehenderit adipisicing velit incididunt sit consequat eiusmod aliquip ut non incididunt aliqua commodo labore et consequat labore ex eu fugiat nisi adipisicing reprehenderit laborum tempor sit in proident consequat in id sunt ut consectetur reprehenderit dolore dolor dolore esse.
          </p>
          <p>
            Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation
            minim nostrud enim dolor fugiat incididunt cillum in fugiat
            exercitation ad. Mollit occaecat quis tempor cupidatat sed culpa fugiat ex et enim ex ea ex minim consectetur ea incididunt magna dolor id officia enim eiusmod duis proident exercitation proident nostrud consectetur voluptate sed aliqua proident laborum eiusmod dolor nostrud nulla do voluptate ut dolore officia enim in veniam ad dolore adipisicing anim cupidatat consequat sit esse sint ullamco est aute quis deserunt minim occaecat proident sunt consectetur do do excepteur et eiusmod exercitation esse esse voluptate adipisicing ullamco ut cillum et ea dolor eu consequat dolore do culpa dolore duis magna dolor aliqua sit ad esse do minim sed in anim ea magna anim velit tempor magna proident eiusmod sed occaecat incididunt dolore amet incididunt excepteur deserunt aliquip veniam ad ut labore cillum sunt dolor reprehenderit veniam proident anim aute consectetur eu cillum ad sit amet reprehenderit ut tempor sed in sit cupidatat amet laboris deserunt ut laborum voluptate sit sit eiusmod dolor elit elit non incididunt incididunt quis est ut aliqua consectetur tempor magna cillum ad dolor laboris velit sit laborum commodo cillum adipisicing non fugiat deserunt velit exercitation amet nisi dolor nostrud cupidatat est reprehenderit incididunt id consectetur aliqua ex cillum fugiat eiusmod irure tempor laborum tempor adipisicing irure enim consectetur aliqua consectetur eu reprehenderit adipisicing velit incididunt sit consequat eiusmod aliquip ut non incididunt aliqua commodo labore et consequat labore ex eu fugiat nisi adipisicing reprehenderit laborum tempor sit in proident consequat in id sunt ut consectetur reprehenderit dolore dolor dolore esse.
          </p>
          <img src="https://unsplash.it/700/300/?random">
        </div>
      </div>
    </li>
  </ul>
</div>

Details at Full Width

By adding the evo_c-crumble--full-width class into the main wrapper element, event details will be shown at full width.

1
First Step
Step 1 - Details
2
Second Step
Step 2 - Details
Full Description

Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation minim nostrud enim dolor fugiat incididunt cillum in fugiat exercitation ad.

Show Markup

<div class="evo_c-crumble evo_c-crumble--full-width">
  <ul class="evo_c-crumble__list">
    <li class="evo_c-crumble__item">
      <div class="evo_c-crumble__tag" data-tag="">1</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        First Step
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Step 1 - Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="evo_c-crumble__item">
      <div class="evo_c-crumble__tag" data-tag="">2</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        Second Step
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Step 2 - Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
        <div class="evo_c-event__description">
        <h3>Full Description</h3>
          <p>
            Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation
            minim nostrud enim dolor fugiat incididunt cillum in fugiat
            exercitation ad.
          </p>
          <img src="https://unsplash.it/800/300/?random">
        </div>
      </div>
    </li>
  </ul>
</div>

Space Around

By adding the helper class h-space-around into the list element, the event's icons will be equally spaced.

3
Third Step
Step 3 - Details

Show Markup

<div class="evo_c-crumble evo_c-crumble--full-width">
  <ul class="evo_c-crumble__list">
    <li class="evo_c-crumble__item">
      <div class="evo_c-crumble__tag" data-tag="">3</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        Third Step
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Step 3 - Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list h-space-around evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

Color Variations

Crumble comes with four variation of colors based on the Evolution UI color palette.

background
secondary
accent3
accent4

Each variation can be applied to the entire list of events evo_c-crumble__list or to a single item evo_c-crumble__item.

1
First Step
Step 1 - Details
2
Second Step
Step 2 - Details
Full Description

Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation minim nostrud enim dolor fugiat incididunt cillum in fugiat exercitation ad.
3
Third Step
Step 3 - Details

Show Markup

<div class="evo_c-crumble">
  <ul class="evo_c-crumble__list evo_c-crumble__list--background">
    <li class="evo_c-crumble__item">
      <div class="evo_c-crumble__tag" data-tag="">1</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        First Step
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Step 1 - Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="evo_c-crumble__item evo_c-crumble__item--accent4">
      <div class="evo_c-crumble__tag" data-tag="">2</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        Second Step
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Step 2 - Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
        <div class="evo_c-event__description">
        <h3>Full Description</h3>
          <p>
            Lorem ipsum Consectetur Ut fugiat sed esse ut dolore Ut exercitation
            minim nostrud enim dolor fugiat incididunt cillum in fugiat
            exercitation ad.
          </p>
        </div>
      </div>
    </li>
    <li class="evo_c-crumble__item">
      <div class="evo_c-crumble__tag" data-tag="">3</div>
      <span class="evo_c-crumble__span">
        <i class="evo_c-crumble__icon--expand material-icons">expand_more</i>
        Third Step
      </span>
      <div class="evo_c-event">
        <div class="evo_c-event__header">
          <h5 class="evo_c-event__title">Step 3 - Details</h5>
          <i class="evo_c-crumble__icon--close js-crumble-close-button material-icons">close</i>
        </div>
        <div class="evo_c-event__body">
          <ul class="evo_c-crumble__list h-space-around evo_c-crumble__list--actions">
            <li>
              <a href="#" title="dashboard">
                <i class="evo_c-crumble__icon material-icons">dashboard</i>
              </a>
            </li>
            <li>
              <a href="#" title="credit_card">
                <i class="evo_c-crumble__icon material-icons">credit_card</i>
              </a>
            </li>
            <li>
              <a href="#" title="date_range">
                <i class="evo_c-crumble__icon material-icons">date_range</i>
              </a>
            </li>
            <li>
              <a href="#" title="explore">
                <i class="evo_c-crumble__icon material-icons">explore</i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

cubby

By Brian Hernandez

Default

Cubby is an evolution UI component that attempts to make displaying tabular data a little more space efficient. It does this by hiding part of the content in a td element with the class of .evo_c-cubby in a table behind other data. Content within the td class="evo_c-cubby tag is split into two divs, the first with a class of .evo_c-cubby__door and the second with a class of .evo_c-cubby__inside. On hovering of the td cell, it creates the effect of a door swinging open to reveal the hidden content behind the first div class="evo_c-cubby__door tag. This component requires no JavaScript. The helper classes .evo_h-cubby-div defines an arbitrary height value of the container divwhile the .evo_h-cubby-table defines a width of 100% for the table containing cubby so content doesn't become hidden behind the component and the cubby table can expand fully, respectively.

One limitation of this component is that it requires hover state to be firing within the client which may make it unsuitable for mobile uses. Also, the content of both divs should be about the same amout to prevent content in inside to peak out from behind content from door until this can be remedied.

Demo Column 1	Demo Column 2	Demo Column 3
Demo Door 1 More Info 1	Demo Door 2 More Info 2	Demo Door 3 More Info 3

Show Markup

<div class="evo_h-cubby-div">
  <table class="evo_h-cubby-table">
    <thead>
      <tr>
        <th>Demo Column 1</th>
        <th>Demo Column 2</th>
        <th>Demo Column 3</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
          Demo Door 1
        </div>
        <div class="evo_c-cubby__inside">
          More Info 1
        </div>
      </td>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
          Demo Door 2
        </div>
        <div class="evo_c-cubby__inside">
          More Info 2
        </div>
      </td>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
          Demo Door 3
        </div>
        <div class="evo_c-cubby__inside">
          More Info 3
        </div>
      </td>
    </tr>
  </table>
</div>

dot validator

By Nathan J Plummer

Default

dotValidator provides real time input validator using the right hand corner dot. Several input types are included.

Phone Number (US)

Generic Number

Date of Birth

Age

Password

Username

Zipcode

Show Markup

<div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Search</label>
        <input data-dotValidator="true" class="evo-c-dotValidator-input" type="search">
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Email</label>
        <input data-dotValidator="true" class="evo-c-dotValidator-input" type="email">
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Phone Number (US)</label>
        <input data-dotValidator="true" class="evo-c-dotValidator-input" type="tel">
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Generic Number </label>
        <input data-dotValidator="true" class="evo-c-dotValidator-input" type="number">
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Date of Birth</label>
        <input data-dotValidator="true" id="dot-valid-DOB" class="evo-c-dotValidator-input" type="date">
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container evo-c-dotValidator-container-age">
        <label class="evo-c-dotValidator-label">Age</label>
        <span id="evo-c-dotValidator-age-id" class="evo-c-dotValidator-input evo-c-dotValidator-age-inactive" type="text"></span>
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Password</label>
        <input data-dotValidator="true" class="evo-c-dotValidator-input" type="password">
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Username</label>
        <input data-dotValidator="true" class="evo-c-dotValidator-input" type="text">
        <span class="evo-c-validation-dot"></span>
    </div>

    <br>

    <div class="evo-c-dotValidator-container">
        <label class="evo-c-dotValidator-label">Zipcode</label>
        <input data-dotValidator="true" class="evo-c-dotValidator-input" type="text">
        <span class="evo-c-validation-dot"></span>
    </div>

drop dot

By Patrick Franz

Default

A navigaton component that allows the developer to group related information under a common image or text. Think of it like a fancy dropdown menu.

View Profile
Send Email
Send PM

San Francisco

Current Headlines
Weather Report
Traffic

Show Markup

<div class="evo_c-drop-dot__example">
<!--A drop-dot lives inside a label element-->
    <label for="cb__drop-dot-1" class="evo_c-drop-dot">
    <span class="evo_c-drop-dot__top">
        <img src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/evolution/drop-dot/profile.jpg" alt="" />
    </span>
    <input type="checkbox" id="cb__drop-dot-1" />
    <ul class="evo_c-drop-dot__list">
        <li>
            <a href="#!">View Profile</a>
        </li>
        <li>
            <a href="#!">Send Email</a>
        </li>
        <li>
            <a href="#!">Send PM</a>
        </li>
    </ul>
    </label>

    <label for="cb__drop-dot-chip1" class="evo_c-drop-dot">
    <span class="evo_c-drop-dot__top">
        <span>San Francisco</span>
    </span>
        <input type="checkbox" id="cb__drop-dot-chip1" />
        <ul class="evo_c-drop-dot__list">
            <li>
                <a href="#!">Current Headlines</a>
            </li>
            <li>
                <a href="#!">Weather Report</a>
            </li>
            <li>
                <a href="#!">Traffic</a>
            </li>
        </ul>
    </label>
</div>

drop navigation carousel

By Oscar Rodriguez

Default

Carousel with dropping circles takes minimalism to the next level with a clean interface to showcase five images of your choosing.

Show Markup

 <div class="evo_c-nav-drop-carousel">
      <!-- label_container -->
      <div class="evo_c-nav-drop-carousel__label-wrap">
        <div class="evo_c-nav-drop-carousel__label-container">
          <label class="evo_c-nav-drop-carousel__drop-label" id="drop-1"></label>
        </div>
        <div class="evo_c-nav-drop-carousel__label-container">
          <label class="evo_c-nav-drop-carousel__drop-label" id="drop-2"></label>
        </div>
        <div class="evo_c-nav-drop-carousel__label-container">
          <label class="evo_c-nav-drop-carousel__drop-label" id="drop-3"></label>
        </div>
        <div class="evo_c-nav-drop-carousel__label-container">
          <label class="evo_c-nav-drop-carousel__drop-label" id="drop-4"></label>
        </div>
        <div class="evo_c-nav-drop-carousel__label-container" id="default-drop">
          <label class="evo_c-nav-drop-carousel__drop-label" id="drop-5"></label>
        </div>
      </div>

      <div class="evo_c-nav-drop-carousel__drop-content">

        <div class="evo_c-nav-drop-carousel__slide">
          <img src="assets/images/evolution-ui/evolution/drop-navigation-carousel/boat.jpg" alt="boat" />
        </div>

        <div class="evo_c-nav-drop-carousel__slide">
          <img src="assets/images/evolution-ui/evolution/drop-navigation-carousel/color-houses.jpg" alt="sky" />
        </div>

        <div class="evo_c-nav-drop-carousel__slide">
          <img src="assets/images/evolution-ui/evolution/drop-navigation-carousel/other-world.jpg" alt="moutains" />
        </div>

        <div class="evo_c-nav-drop-carousel__slide">
          <img src="assets/images/evolution-ui/evolution/drop-navigation-carousel/sand-castle.jpg" alt="castle" />
        </div>

        <div class="evo_c-nav-drop-carousel__slide">
          <img src="assets/images/evolution-ui/evolution/drop-navigation-carousel/sun-set.jpg" alt="sun" />
        </div>
      </div>

    </div>

Fade Lines On Scroll

By Brian Hernandez

Default

The Fade Lines On Scroll component uses a simple JavaScript hook, js-c-fade-lines-target, on any block of text to randomly push words down the page and remove their visiblity. When the paragraph is scrolled into the viewport view, the words are then animated back to their original position while fading into full visibility.

The quick brown fox jumps over the lazy dog.

"I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." - Maya Angelou

"Everything around you that you call life was made up by people that were no smarter than you. And you can change it, you can influence it, you can build your own things that other people can use. Once you learn that, you will never be the sameagain." - Steve Jobs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia illum enim dolorum quibusdam impedit iusto consequuntur, eius, accusamus sint esse explicabo magni possimus vitae ipsum in excepturi harum id voluptatum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sint rem cum voluptatum quis totam cupiditate a consequuntur optio voluptas quam dolore, natus temporibus dolorem tempora eos suscipit, quod obcaecati!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nobis fugit nam, veritatis voluptate iste! Natus tenetur voluptatem et quasi accusantium recusandae alias nam cumque fuga minus voluptate maiores, commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe amet rem iure, pariatur enim consectetur maiores officia eum, ratione vero magnam velit esse. Deserunt temporibus pariatur, magni accusamus impedit quibusdam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias hic doloribus, natus molestias! Tempora officiis similique quas dolor aliquam quasi odit molestias non nihil, hic, saepe ratione laborum laboriosam eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum harum quis doloremque beatae, alias iusto dicta sit autem ad a nostrum eveniet debitis saepe ipsum facere, quasi temporibus impedit, veniam!

Show Markup

<p class="js-c-fade-lines-target">The quick brown fox jumps over the lazy dog.</p>
<p class="js-c-fade-lines-target">&quot;I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.&quot;  - Maya Angelou</p>
<p class="js-c-fade-lines-target">&quot;Everything around you that you call life was made up by people that were no smarter than you.  And you can change it, you can influence it, you can build your own things that other people can use.  Once you learn that, you will never be the sameagain.&quot;  - Steve Jobs</p>
<p class="js-c-fade-lines-target">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia illum enim dolorum quibusdam impedit iusto consequuntur, eius, accusamus sint esse explicabo magni possimus vitae ipsum in excepturi harum id voluptatum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium sint rem cum voluptatum quis totam cupiditate a consequuntur optio voluptas quam dolore, natus temporibus dolorem tempora eos suscipit, quod obcaecati!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nobis fugit nam, veritatis voluptate iste! Natus tenetur voluptatem et quasi accusantium recusandae alias nam cumque fuga minus voluptate maiores, commodi.</p>
<p class="js-c-fade-lines-target">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt maxime odio eligendi assumenda optio iure ut autem maiores eum. Consequuntur illum minus mollitia sapiente tenetur, placeat. Magni temporibus labore debitis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa reprehenderit sit fugiat quas non consectetur veritatis eligendi cum, natus id. Fuga vero reprehenderit ea porro nam, impedit repellendus similique cum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe amet rem iure, pariatur enim consectetur maiores officia eum, ratione vero magnam velit esse. Deserunt temporibus pariatur, magni accusamus impedit quibusdam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias hic doloribus, natus molestias! Tempora officiis similique quas dolor aliquam quasi odit molestias non nihil, hic, saepe ratione laborum laboriosam eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum harum quis doloremque beatae, alias iusto dicta sit autem ad a nostrum eveniet debitis saepe ipsum facere, quasi temporibus impedit, veniam!</p>

foldout popup

By Sebastian Ramirez-Brunner

Default

This component comprises a small button that will expand drastically into a larger popup on mouse hover. The expanded element can contain whatever kind of content you migth want. The component is a great way to include a large amount of content in a compact space, as the content will not be visible until the user hovers over the button.

Show Markup

<div class="evo_c-expand-and-fold-out-popup-demo-wrapper">
  <ul class="evo_c-expand-and-fold-out-popup">
    <li class="evo_c-expand-and-fold-out-popup__popup-button">
      <p class="evo_c-expand-and-fold-out-popup__text-spacer">Fold Out Popup Button</p>
      <div class="evo_c-expand-and-fold-out-popup__popup">
        <p class="evo_c-expand-and-fold-out-popup__button-text">Fold Out Popup Button</p>
        <div class="evo_c-expand-and-fold-out-popup__popup-corner"></div>
        <div class="evo_c-expand-and-fold-out-popup__popup-text">
          <ul class="evo_c-expand-and-fold-out-popup__content-list">
            <h3 class="evo_c-expand-and-fold-out-popup__content-h3">Content Header</h3>
            <li class="evo_c-expand-and-fold-out-popup__content-item"><a href="#" class="evo_c-expand-and-fold-out-popup__content-item-link">Content Item</a></li>
          </ul>
        </div>
        <div class="evo_c-expand-and-fold-out-popup__popup-header card-container">
          <div class="flip-card">
            <div class="flip-card__side flip-card__front">
              <p class="flip-card__header-text">Header</p>
            </div>
          </div>
        </div>
        <!-- <div class="evo_c-expand-and-fold-out-popup__popup-header card-container card-container--bottom">
          <div class="flip-card flip-card--bottom">
            <div class="flip-card__side flip-card__front">
              <p class="flip-card__header-text">Bottom Button</p>
            </div>
          </div>
        </div> -->
      </div>
    </li>
  </ul>
</div>

fullscreen gallery

By Joseph Matembu

Default

A fullscreen gallery activated by a click on any of the images.

Show Markup

<div class="evo_c-fs-gallery" role="region">
  <div class="evo_c-fs-gallery__icons">
    <button class="evo_c-fs-gallery__icon-close"><i class="material-icons">close</i></button>
    <button class="evo_c-fs-gallery__icon-next"><i class="material-icons">arrow_forward</i></button>
    <button class="evo_c-fs-gallery__icon-prev"><i class="material-icons">arrow_back</i></i></button>
  </div>
  <div class="evo_c-fs-gallery__slides">
    <figure class="evo_c-fs-gallery__slide">
      <picture>
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/small_img1.jpg" media="(max-width: 600px)">
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/medium_img1.jpg" media="(max-width: 1280px)">
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/img1.jpg">
        <img srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/img1.jpg" alt="Image Caption">
      </picture>
      <figcaption>Image Caption</figcaption>
    </figure>
    <figure class="evo_c-fs-gallery__slide">
      <picture>
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/small_img2.jpg" media="(max-width: 600px)">
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/medium_img2.jpg" media="(max-width: 1280px)">
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/img2.jpg">
        <img srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/img2.jpg" alt="Image Caption">
      </picture>
      <figcaption>Image Caption</figcaption>
    </figure>
    <figure class="evo_c-fs-gallery__slide">
      <picture>
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/small_img3.jpg" media="(max-width: 600px)">
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/medium_img3.jpg" media="(max-width: 1280px)">
        <!-- <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/large_img3.jpg" media="(min-width: 1281px)"> -->
        <source srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/img3.jpg">
        <img srcset="assets/images/evolution-ui/evolution/fullscreen-gallery/img3.jpg" alt="Image Caption">
      </picture>
      <figcaption>Image Caption</figcaption>
    </figure>
  </div>
</div>

herald

By Ro Langam

Default

The Herald unfurls a border and drops a message with a banner. The component features an image with a width and height of 2:1 and a place for textual content. Ideally, the Herald is useful for small listings, although most message sizes will fit inside.

Place announcements inside the c-herald__message tag. Each unique announcement must be placed within <p> tags. Next, add the number of announcements inside c-chip__media--o. Inputting the number of announcements is recommended in case users have disabled JavaScript. Note: The number of announcements in c-chip__media--o are based on the number of <p> tags. This number is updated dynamically in the event the number of announcements was not inputted. The ideal image has a size of 2:1 or a size near that.

Accessibility: In the event a user disables JavaScript, the Herald and all content inside it will still be shown to users.

5 Announcements

Drumpf Obama: FBI chief Comey 'rejects' phone tap allegation. [Visit BBC.com]

The Queen is in search of a brawny grape-feeder. [Apply Here]

What a strange world we live in. [Find out why]

The Owl and the Pussy-cat went to sea, In a beautiful pea-green boat [Where did they go?]

Will eating melas zomos make you a badass Spartan? [Find out why]

Show Markup

<div class="evo_c-herald-wrapper">
    <div class="evo_c-herald__trigger c-chip--outlined" id="evo_c-herald__trigger">
      <span class="c-chip__media--o evo_c-herald-c-chip__media--o">5</span>
      Announcements
    </div>
    <div class="evo_c-herald no-js" id="evo_c-herald">
      <div class="evo_c-herald__furled-border" id="evo_c-herald__furled-border"></div>
      <div class="evo_c-herald__ribbon" id="evo_c-herald__ribbon"></div>
      <div class="evo_c-herald__content" id="evo_c-herald__content">
        <div class="evo_c-herald__message">
          <div class="evo_c-herald__img"></div>
          <p>Drumpf Obama: FBI chief Comey 'rejects' phone tap allegation. <a class="evo_c-herald__anchors" href="#">[Visit BBC.com]</a></p>
          <p>The Queen is in search of a brawny grape-feeder. <a class="evo_c-herald__anchors" href="#">[Apply Here]</a></p>
          <p>What a strange world we live in. <a class="evo_c-herald__anchors" href="#">[Find out why]</a></p>
          <p>The Owl and the Pussy-cat went to sea, In a beautiful pea-green boat <a class="evo_c-herald__anchors" href="https://www.poetryfoundation.org/poems-and-poets/poems/detail/43188">[Where did they go?]</a></p>
          <p>Will eating melas zomos make you a badass Spartan? <a class="evo_c-herald__anchors" href="https://en.wikipedia.org/wiki/Black_soup">[Find out why]</a></p>
        </div>
      </div>
    </div>
</div>

ikon card

By Aashish Nagpal

Default

Ikon is a new author card layout with details about the author.

Showcase yourself on your blog or your team on the web app "about" page/section by creating Ikon cards.

Creating and Using Ikon

To create ikon within your page, just add a div tag with evo_c-ikon class and then add one or more child div tags with evo_c-ikon__member within it. Finally add the content as shown in the code markup below. Make sure to add proper js-hook CSS classes for proper JS function. Check out all the js-hooks (js-evo-c-ikon, js-evo-c-ikon-member, js-evo-c-ikon-member-info and js-evo-c-ikon-close-btn) within the code markup shown below.

You can add as many evo_c-ikon__member(s) as you like on your your website.

Examples

Check out the example code below by clicking on "Show Markup".

Hover over the names of the random authors below to see how ikon works:

Jonas Lininger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla et

Mariam Casaus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla et

Herbert Stamper

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla et

Show Markup

<!-- Add a container with `class="evo_c-ikon js-evo-c-ikon"`  -->
<div class="evo_c-ikon js-evo-c-ikon">

  <!-- first ikon member - start -->
  <!-- `class="evo_c-ikon__member js-evo-c-ikon-member"` -->
  <div class="evo_c-ikon__member js-evo-c-ikon-member">
    <div class="evo_c-ikon__member-name">Jonas Lininger</div>

    <!-- ikon member info `class="evo_c-ikon__member-info js-evo-c-ikon-member-info"` -->
    <div class="evo_c-ikon__member-info js-evo-c-ikon-member-info">
      <div class="evo_c-ikon__member-pic">
        <img src="assets/images/evolution-ui/evolution/ikon/profile_pic_1.jpg">
      </div>
      <div class="evo_c-ikon__member-details">
        <div class="evo_c-ikon__member-social-links">
          <a class="evo_c-ikon__social-link" href="#">
            <i class="fa fa-globe" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--twitter" href="#">
            <i class="fa fa-twitter-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--github" href="#">
            <i class="fa fa-github-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--facebook" href="#">
            <i class="fa fa-facebook-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--linkedin" href="#">
            <i class="fa fa-linkedin-square" aria-hidden="true"></i>
          </a>
        </div>
        <p class="evo_c-ikon__member-about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper
          sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla
          et</p>
      </div>
      <!-- must add this close icon `class="evo_c-ikon__info-close-btn js-evo-c-ikon-close-btn"` -->
      <div class="evo_c-ikon__info-close-btn js-evo-c-ikon-close-btn"><i class="material-icons">close</i></div>
    </div>
  </div>
  <!-- first ikon member - end -->


  <!-- second ikon member - start -->
  <!-- `class="evo_c-ikon__member js-evo-c-ikon-member"` -->
  <div class="evo_c-ikon__member js-evo-c-ikon-member">
    <div class="evo_c-ikon__member-name">Mariam Casaus</div>

    <!-- ikon member info `class="evo_c-ikon__member-info js-evo-c-ikon-member-info"` -->
    <div class="evo_c-ikon__member-info js-evo-c-ikon-member-info">
      <div class="evo_c-ikon__member-pic">
        <img src="assets/images/evolution-ui/evolution/ikon/profile_pic_2.jpg">
      </div>
      <div class="evo_c-ikon__member-details">
        <div class="evo_c-ikon__member-social-links">
          <a class="evo_c-ikon__social-link" href="#">
            <i class="fa fa-globe" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--twitter" href="#">
            <i class="fa fa-twitter-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--github" href="#">
            <i class="fa fa-github-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--facebook" href="#">
            <i class="fa fa-facebook-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--linkedin" href="#">
            <i class="fa fa-linkedin-square" aria-hidden="true"></i>
          </a>
        </div>
        <p class="evo_c-ikon__member-about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper
          sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla
          et</p>
      </div>
      <!-- must add this close icon `class="evo_c-ikon__info-close-btn js-evo-c-ikon-close-btn"` -->
      <div class="evo_c-ikon__info-close-btn js-evo-c-ikon-close-btn"><i class="material-icons">close</i></div>
    </div>
  </div>
  <!-- second ikon member - end -->


  <!-- third ikon member - start -->
  <!-- `class="evo_c-ikon__member js-evo-c-ikon-member"` -->
  <div class="evo_c-ikon__member js-evo-c-ikon-member">
    <div class="evo_c-ikon__member-name">Herbert Stamper</div>

    <!-- ikon member info `class="evo_c-ikon__member-info js-evo-c-ikon-member-info"` -->
    <div class="evo_c-ikon__member-info js-evo-c-ikon-member-info">
      <div class="evo_c-ikon__member-pic">
        <img src="assets/images/evolution-ui/evolution/ikon/profile_pic_3.jpg">
      </div>
      <div class="evo_c-ikon__member-details">
        <div class="evo_c-ikon__member-social-links">
          <a class="evo_c-ikon__social-link" href="#">
            <i class="fa fa-globe" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--twitter" href="#">
            <i class="fa fa-twitter-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--github" href="#">
            <i class="fa fa-github-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--facebook" href="#">
            <i class="fa fa-facebook-square" aria-hidden="true"></i>
          </a>
          <a class="evo_c-ikon__social-link evo_c-ikon__social-link--linkedin" href="#">
            <i class="fa fa-linkedin-square" aria-hidden="true"></i>
          </a>
        </div>
        <p class="evo_c-ikon__member-about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a semper
          sem. Ut pellentesque libero ut ultricies vehicula. Morbi suscipit felis nulla, luctus ornare nunc fringilla
          et</p>
      </div>
      <!-- must add this close icon `class="evo_c-ikon__info-close-btn js-evo-c-ikon-close-btn"` -->
      <div class="evo_c-ikon__info-close-btn js-evo-c-ikon-close-btn"><i class="material-icons">close</i></div>
    </div>
  </div>
  <!-- third ikon member - end -->
</div>

input scanner

By Brian Merriman

Default

'Input Scanner' enhances input elements with a cursor indicator that changes color based on the current state of the input's validation. Upon completion of the user's input, the cursor then 'scans' over the input element to indicate completion. If a user wishes to re-edit an input element, the form will unscan the input on click. On form submission, invalid/incomplete elements are indicated by a blinking red cursor. If the form is valid, a cursor then scans over the submit button with a completion message.

Show Markup

<form action="" class="evo_c-input-scanner" onsubmit="return false">
  <div class="evo_c-input-scanner__inputContainer"><input type="text" class="evo_c-input-scanner__input" required tabindex="1" placeholder="First Name" /></div>
  <div class="evo_c-input-scanner__inputContainer"><input type="text" class="evo_c-input-scanner__input" required tabindex="2" placeholder="Last Name" /></div>
  <div class="evo_c-input-scanner__inputContainer"><input type="email" class="evo_c-input-scanner__input" required tabindex="3" placeholder="Email" /></div>
  <div class="evo_c-input-scanner__submitContainer"><input type="submit" class="evo_c-input-scanner__submit" tabindex="4" value="I would like to help" /></div>
</form>

minimalist carousel two

By Stu Wood

Default

When a layer's bottom and left border is visible, clicking the border will hide the layer and any layer on top of it to expose the layer immediately underneath the clicked border.

When a layer's top and right border is visible, clicking it will expose it. Any layers that are hidden and whose top and right borders are located to the bottom and left of the clicked layer will also be hidden.

Component does not currently run on FireFox

Show Markup

<div id="evo_c-carousel-border-nav" class="evo_c-carousel-border-nav">
    <img class="evo_c-carousel__image_reference" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/evolution/minimalist-carousel-two/snail.jpg">
    <div class="evo_c-carousel-border-nav__layer evo_c-minimalist-carousel__layer--one">
        <div class="evo_c-carousel-border-nav__border evo_c-carousel-border-nav__border--default">
        </div>
        <div class="evo_c-carousel-border-nav__inner evo_c-carousel-border-nav__inner--one evo_c-carousel-border-nav__inner--default">
            <img class="evo_c-carousel__image" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/evolution/minimalist-carousel-two/forest.jpg"/>
        </div>
    </div>

    <div class="evo_c-carousel-border-nav__layer evo_c-minimalist-carousel__layer--two">
        <div class="evo_c-carousel-border-nav__border evo_c-carousel-border-nav__border--default">
        </div>
        <div class="evo_c-carousel-border-nav__inner evo_c-carousel-border-nav__inner--two evo_c-carousel-border-nav__inner--default">
            <img class="evo_c-carousel__image" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/evolution/minimalist-carousel-two/snail.jpg">
        </div>
    </div>

    <div class="evo_c-carousel-border-nav__layer evo_c-minimalist-carousel__layer--three">
        <div class="evo_c-carousel-border-nav__border evo_c-carousel-border-nav__border--default">
        </div>
        <div class="evo_c-carousel-border-nav__inner evo_c-carousel-border-nav__inner--three evo_c-carousel-border-nav__inner--default">
            <img class="evo_c-carousel__image" src="https://evolution-ui.github.io/evolution-ui/assets/images/evolution-ui/evolution/minimalist-carousel-two/treetrunk.jpg">
        </div>
    </div>
    <img>
</div>

persona card

By Aashish Nagpal

Default

Persona is a new minimalist author card layout.

Showcase yourself on your blog or your team on the web app "about" page/section by creating persona cards.

Creating and Using Persona

To create persona within your page, just add a div tag with evo_c-persona-container class and then add one or more child div tags with evo_c-persona within it. Finally add the content as shown in the code markup below.

You can add as many evo_c-persona-container(s) and as many evo_c-persona(s) within them to show them in any alignment you find good for your website.

Examples

Check out the example code below by clicking on "Show Markup".

Hover over the images of the random authors below to see their Persona:

Virgil Hammond

Front End Developer

Sonya Mcmakin

Full Stack Developer

Pamela Rundell

Front End Developer

Show Markup

<!-- Add a persona container -->
<div class="evo_c-persona-container">

  <!-- first persona - start -->
  <div class="evo_c-persona">
    <img class="evo_c-persona__image" src="assets/images/evolution-ui/evolution/persona/guy-1.jpg">
    <p class="evo_c-persona__name">Virgil Hammond</p>
    <p class="evo_c-persona__title">Front End Developer</p>
    <ul class="evo_c-persona__links">
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>
      </li>
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a>
      </li>
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
      </li>
    </ul>
  </div>
  <!-- first persona - end -->


  <!-- second persona - start -->
  <div class="evo_c-persona">
    <img class="evo_c-persona__image" src="assets/images/evolution-ui/evolution/persona/girl-1.png">
    <p class="evo_c-persona__name">Sonya Mcmakin</p>
    <p class="evo_c-persona__title">Full Stack Developer</p>
    <ul class="evo_c-persona__links">
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>
      </li>
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a>
      </li>
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
      </li>
    </ul>
  </div>
  <!-- second persona - end -->


  <!-- third persona - start -->
  <div class="evo_c-persona">
    <img class="evo_c-persona__image" src="assets/images/evolution-ui/evolution/persona/girl-2.png">
    <p class="evo_c-persona__name">Pamela Rundell</p>
    <p class="evo_c-persona__title">Front End Developer</p>
    <ul class="evo_c-persona__links">
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>
      </li>
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a>
      </li>
      <li class="evo_c-persona__link">
        <a class="evo_c-persona__icon" href="#"><i class="fa fa-linkedin-square"
                                                   aria-hidden="true"></i></a>
      </li>
    </ul>
  </div>
  <!-- third persona - end -->


  <!--&lt;!&ndash; fourth persona - start &ndash;&gt;-->
  <!--<div class="evo_c-persona">-->
    <!--<img class="evo_c-persona__image" src="assets/images/evolution-ui/evolution/persona/guy-2.jpg">-->
    <!--<p class="evo_c-persona__name">Cesar Ayoub</p>-->
    <!--<p class="evo_c-persona__title">Full Stack Developer</p>-->
    <!--<ul class="evo_c-persona__links">-->
      <!--<li class="evo_c-persona__link">-->
        <!--<a class="evo_c-persona__icon" href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>-->
      <!--</li>-->
      <!--<li class="evo_c-persona__link">-->
        <!--<a class="evo_c-persona__icon" href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a>-->
      <!--</li>-->
      <!--<li class="evo_c-persona__link">-->
        <!--<a class="evo_c-persona__icon" href="#"><i class="fa fa-linkedin-square"-->
                                                   <!--aria-hidden="true"></i></a>-->
      <!--</li>-->
    <!--</ul>-->
  <!--</div>-->
  <!-- fourth persona - end -->
</div>

popover

By Hiep Vo

Default

This component helps show content as pop over. We can highlight specific text in a paragraph and make it clickable.

Show Markup

<div style = "position:relative;">
  <div style = "margin: 2rem auto; width: 50rem">
    <p>Lorem ipsum dolor si eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et
      eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et eiusmod tempor incididunt eiusmod
      tempor incididunt ut labore et ut labore <label for = "so1" class = "evo_c-popover__text">incididunt<span
        class = "evo_c-popover__icon"></span></label> eiusmod tempor eiusmod tempor incididunt ut labore et ut labore ett
      amet,
      consectetur adipiscing elit,sed do eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et
      aliqua. Ut enim ad minim adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    </p>
    <p>Lorem ipsum dolor si eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et
      eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et eiusmod tempor incididunt eiusmod
      tempor incididunt ut labore et ut labore eiusmod tempor eiusmod tempor incididunt ut labore et ut labore ett amet,
      consectetur adipiscing elit,sed do eiusmod tempor incididunt eiusmod tempor incididunt ut labore et ut labore et
      aliqua. Ut enim ad minim adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    </p>
    <p>
      Albert Einstein (14 March 1879 - 18 April 1955) was a German-born theoretical physicist. He developed the theory
      of relativity, one of the two pillars of modern physics (alongside quantum mechanics). Einstein’s work is also
      know for its influence on the philosophy of science. Einstein is best know in popular culture of his mass-energy
      equivalence formula E = mc2 (which has been dubbed “the world’s most famous equation”). He received the 1921
      <label for = "so2" class = "evo_c-popover__text">Nobel Prize<span class = "evo_c-popover__icon"></span></label> in
      Physics “for his
      services to theoretical physics, and especially for his discovery of the law
    </p>
  </div>
  <div class = "evo_c-popover h-hide" id = "so1">
  <span class = "evo_c-popover__content">
    <div class = "evo_c-popover__content--invisible">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <span class = "evo_c-popover__content--close"></span>
  </span>
    <span class = "evo_c-popover__caption">incididunt</span>
  </div>
  <div class = "evo_c-popover h-hide" id = "so2">
    <span class = "evo_c-popover__content">
      <div class = "evo_c-popover__content--invisible"> <h3 class = "evo_c-popover__header">Header</h3><p>any of six international prizes awarded annually for outstanding work in physics, chemistry, physiology or medicine, literature, economics (since 1969), and the promotion of peace.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <span class = "evo_c-popover__content--close"></span>
    </span>
    <span class = "evo_c-popover__caption">Nobel Prize</span>
  </div>
</div>

psychotropic curtain

By Carlos Coves Prieto

Default

Brainstorm Mode

Show Markup

<button id="evo_c-curtain-brainstorm-button" class="evo_c-curtain__button">Brainstorm Mode</button>
<div class="evo_c-curtain" data-timeout="5000">
  <div class="evo_c-curtain__effect">
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
    <div class="evo_c-curtain__shape"></div>
  </div>
</div>

reveal

By Hiep Vo

Default

This component can be used as an alternative to Collapse/Expand but it's more delightful than the common one

New Hide/Reveal

The text here will be hidden and revealed or collapse or expanded.

Show Markup

<div class = "evo_c-reveal-wrapper">
  <div class = "evo_c-reveal">
    <span class = "evo_c-reveal__icon"></span>
    <div class = "evo_c-reveal__text">New Hide/Reveal<span rel = "New Hide/Reveal"></span></div>
    <div class = "evo_c-reveal__text--hidden">
      <div>The text here will be hidden and revealed or collapse or expanded.</div>
    </div>
  </div>
</div>

safety

By Luis Rojas

Default

Safety is button variation that let's you feel sure when you submitting something.

If you are really sure to submit your information, please hold the button for 3 seconds

Form submitted!!!

Show Markup

<article class="evo_c-safety__example">

  <!-- UI-Element is to go below -->
  <p>If you are really sure to submit your information, please hold the button for 3 seconds</p>
  <button type="submit" class="evo_c-safety">
    Send <span class="fa fa-anchor evo_h-icon"></span>
  </button>
  <div class="evo_c-safety__count"></div>

  <div class="evo_c-safety__alert">
    <p class="evo_c-safety__alert-text">Form submitted!!!</p>
  </div>

</article>

search with long edit

By Stu Wood

Default

Allows long search queries to be viewed and edited within the search component.
Queries are updated between editor and search field.
Option to expand editor appears when visible width of search field is exceeded.

Show Markup

<div class="evo_c-searchBar" id="evo_c-searchBar--longSearchEditor">
    <label for="evo_c-searchBar__searchEditorControl" class="evo_c-searchBar__searchEditorControlLabel" id="evo_c-searchBar__searchEditorControlLabel"><i
            class="fa fa-expand evo_c-searchBar__expand h-background__primary"
            aria-hidden="true" id="evo_c-searchBar__expand"></i></label>
    <input
            class="evo_c-searchBar__searchInput evo_c-searchBar__searchInput--longSearchInput h-background__primary" id="evo_c-searchBar__searchInput" type="text" name="" placeholder="Search" />
    <div class="evo_c-searchBar__searchButton" tabindex="0">
        <i class="fa fa-search"></i> Search
    </div>
    <input class="evo_c-searchBar__searchEditorControl" type="checkbox" id="evo_c-searchBar__searchEditorControl" />
    <div type="text" class="evo_c-searchBar__searchEditor" id="evo_c-searchBar__searchEditor" contenteditable="true" tabindex="0" placeholder="Edit long search strings here">

    </div>
</div>

sift

By Joseph Matembu

Default

A component to sift through items more visually. Can work as a gallery too. The sift component is basically having two baskets, you pick items from one, the items are then dropped into the other basket. A user goes through all items by simply clicking on the basket on the left (pick basket). Items are then dropped in the drop basket.

Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content
Some content

Show Markup

<div class="evo_c-sift">
  <ul class="evo_c-sift__items evo_c-sift__basket-pick">
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
    <li class="evo_c-sift__item">
      <p>Some content</p>
    </li>
  </ul>
  <div class="evo_c-sift__display"></div>
  <ul class="evo_c-sift__items evo_c-sift__basket-drop">
  </ul>
</div>

single input forms

By Jing Ran

Default

The single-input form shows one input field each time. Once an input is filled out correctly, click the right arrow button to go to the next input. The progress indicator rolls over to the right and fades out. The current input fades out and the next one reveals. To go back to the previous input field, click the gray left arrow. The submission message the on the last page is customizable.

To create a single-input form, the form element takes a evo_c-sif class. Each input card has a evo_c-sif__input-wrap class, which can contain a progress indicator (evo_c-sif__indicator), an input field (evo_c-sif__input), a label (evo_c-sif__label) working as the placeholder, a next button (evo_c-sif__btn--next) and a go back button (evo_c-sif__btn--prev). The last input card can contain a submission message with class evo_c-sif__submission-msg. Please note the descending order of input cards in the HTML file. The last card should appear first, and the fist card is the last evo_c-sif__input-wrap element.

Show Markup

<form class="evo_c-sif">
  <div class="evo_c-sif__input-wrap">
    <span class="evo_c-sif__submission-msg">Thank you for subscribing</span>
  </div>

  <div class="evo_c-sif__input-wrap evo_c-sif-color--2">
    <span class="evo_c-sif__indicator">3/3</span>
    <input class="evo_c-sif__input" type="text" name="city" id="sif-input-city" required formnovalidate>
    <label class="evo_c-sif__label" for="sif-input-city">
      <i class="evo_c-sif__icon-label material-icons">language</i>
      City you live in
    </label>
    <button type="button" class="evo_c-sif__btn--prev">
      <i class="evo_c-sif__icon-prev material-icons">arrow_back</i>
    </button>
    <button type="submit" class="evo_c-sif__btn--next">
      <i class="evo_c-sif__icon-next material-icons">arrow_forward</i>
    </button>
  </div>

  <div class="evo_c-sif__input-wrap evo_c-sif-color--1">
    <span class="evo_c-sif__indicator">2/3</span>
    <input class="evo_c-sif__input" type="email" name="email" id="sif-input-email" required formnovalidate>
    <label class="evo_c-sif__label" for="sif-input-email">
      <i class="evo_c-sif__icon-label material-icons">email</i>
      Email
    </label>
    <button type="button" class="evo_c-sif__btn--prev">
      <i class="evo_c-sif__icon-prev material-icons">arrow_back</i>
    </button>
    <button type="button" class="evo_c-sif__btn--next">
      <i class="evo_c-sif__icon-next  material-icons">arrow_forward</i>
    </button>
  </div>

  <div class="evo_c-sif__input-wrap evo_c-sif-color--0">
    <span class="evo_c-sif__indicator">1/3</span>
    <input class="evo_c-sif__input" type="text" name="username" id="sif-input-nm" required formnovalidate>
    <label class="evo_c-sif__label" for="sif-input-nm">
      <i class="evo_c-sif__icon-label material-icons">person</i>
      User Name
    </label>
    <button type="button" class="evo_c-sif__btn--next">
      <i class="evo_c-sif__icon-next  material-icons">arrow_forward</i>
    </button>
  </div>

</form>

Space Saving Minimalist Form

The space-saving-minimalist form shows one input card each time. Indicators are located on the left side of an input card, which show how many inputs left to be filled out. The indicator of the active input card is in light blue. If an invalid value is entered, the indicator turns to an orange red color. Once it is filled out correctly, press the Enter key or click the right arrow button to go to the next one. The next card slides in from the left. The indicator moves from left to right and becomes a go back button. You can go back to previous input cards by clicking one of the go back buttons. The last card is a submission card. Clicking the left arrow brings you back to the very first card. Clicking the submit button (subscribe in this case) to submit the form and a submission message appears.

To create a space-saving-minimalist form, the form element takes a evo_c-mini-form class. Input cards are written in ascending order in the HTML file. Each of them has a evo_c-mini-form__input-wrap class. The first card should also have a js-mini-form-is-active class as default. The last card, submission card, should take a evo_c-mini-form__submit class.

Inside of each card, there is a inner card wrap (evo_c-mini-form__input-inner). All input field, go next button and icons should go inside of the inner wrap.

Other than the first card, the rest of the cards (evo_c-mini-form__input-wrap) should be followed by a go back button with class evo_c-mini-form__btn--prev.

Show Markup

<form class="evo_c-mini-form">

  <!-- 1st input -->
  <div class="evo_c-mini-form__input-wrap js-mini-form-is-active">
    <div class="evo_c-mini-form__input-inner">
      <input type="text" name="first-nm" placeholder="First Name" class="evo_c-mini-form__input" required>
      <button type="button" class="evo_c-mini-form__btn--next">
        <i class="material-icons">arrow_forward</i>
      </button>
    </div>
  </div>

  <!-- 2nd input -->
  <div class="evo_c-mini-form__input-wrap">
    <div class="evo_c-mini-form__input-inner">
      <input type="text" name="last-nm" placeholder="Last Name" class="evo_c-mini-form__input" required>
      <button type="button" class="evo_c-mini-form__btn--next">
        <i class="material-icons">arrow_forward</i>
      </button>
    </div>
  </div>
  <span class="evo_c-mini-form__btn--prev"></span>

  <!-- 3rd input -->
  <div class="evo_c-mini-form__input-wrap">
    <div class="evo_c-mini-form__input-inner">
      <input type="email" name="email" placeholder="Email" class="evo_c-mini-form__input" required>
      <button type="button" class="evo_c-mini-form__btn--next">
        <i class="material-icons">arrow_forward</i>
      </button>
    </div>
  </div>
  <span class="evo_c-mini-form__btn--prev"></span>

  <!-- Last input -->
  <div class="evo_c-mini-form__input-wrap evo_c-mini-form__submit">
    <div class="evo_c-mini-form__input-inner">
      <button type="button" class="evo_c-mini-form__btn--back">
        <i class="material-icons">arrow_back</i>
      </button>
      <input type="submit" name="submit" value="Subscribe" class="evo_c-mini-form__submit-btn">
    </div>
  </div>
  <span class="evo_c-mini-form__btn--prev"></span>

</form>

spiral text

By Blake Wilson

Default

Often on the hover state of a link or button, or even a small body of text, an effect is given to bring attention to the action. The spiralling of text is such an affect that could add a little flare when an element is hovered over.

The effect can be placed on either a <button> or <a> element as well as on any text surrounded by <span> tags. The element gets the evo_c-spiralText class for the effect to take place and each individual text is required to be wrapped by an <em> tag.

Also, if more than one word is used, add the HTML <span>class="space"</span> between each of the words.

SPIRAL TEXT

Show Markup

<p>
  <span class="evo_c-spiralText">
    <em>S</em><em>P</em><em>I</em><em>R</em><em>A</em><em>L</em>
    <span class="space"></span>
    <em>T</em><em>E</em><em>X</em><em>T</em>
  </span>
</p>

Spiral Text Link

The spiralled text can be used on any link, for example a link nested inside a paragraph.

Here is a spiralled text link.

Show Markup

<p>Here is a <a href="#" class="evo_c-spiralText"><em>s</em><em>p</em><em>i</em><em>r</em><em>a</em><em>l</em><em>l</em><em>e</em><em>d</em></a> text link.</p>

Spiral Text Button

Buttons and links wil need the __button class appended to have the proper button appearance like so - evo_c-spiralText__button.

LINK

Show Markup

<button class="evo_c-spiralText__button">
  <em>B</em><em>U</em><em>T</em><em>T</em><em>O</em><em>N</em>
</button>
<a href="#" class="evo_c-spiralText__button" role="button">
  <em>L</em><em>I</em><em>N</em><em>K</em>
</a>

Circular Background

The background size by default is styled with adequate padding and the shape is rectangular. Yet it can also have a circular appearance by appending --circle on to the evo_c-spiralText or evo_c-spiralText__button classes like so - evo_c-spiralText--circle and evo_c-spiralText__button--circle.

Circle text

Show Markup

<p>
  <span class="evo_c-spiralText--circle">
    <em>C</em><em>i</em><em>r</em><em>c</em><em>l</em><em>e</em>
    <span class="space"></span>
    <em>t</em><em>e</em><em>x</em><em>t</em>
  </span>
</p>

<button class="evo_c-spiralText__button--circle">
  <em>C</em><em>i</em><em>r</em><em>c</em><em>l</em><em>e</em>
  <span class="space"></span>
  <em>B</em><em>u</em><em>t</em><em>t</em><em>o</em><em>n</em>
</button>

Full Height Background

The letter background can be full height and is displayed with the appended classes of --fullHeight or --circlefullHeight. The --circle class is not required if the --circlefullHeight class is present.

Circle

Show Markup

<button class="evo_c-spiralText__button--fullHeight">
  <em>F</em><em>u</em><em>l</em><em>l</em><em>H</em><em>e</em><em>i</em><em>g</em><em>h</em><em>t</em>
</button>
<a href="#" class="evo_c-spiralText__button--circlefullHeight" role="button">
  <em>C</em><em>i</em><em>r</em><em>c</em><em>l</em><em>e</em>
</a>

SVG pagination

By Yerui Yu

Default

The SVG pagination is a evolution component. It is only supported in IE 11+, Firefox 51+, Chrome 49+, Safari 10+ and Opera 43+. It use SVG(Scalable Vector Graphics) to display the current selectedpagination. We use an unordered list to display pagination. It contains the basic style with `evo_c-svg-dot--default` class and each type will have its own specific style, such as `evo_c-svg-dot--cross`. Each `li` contains the `svg` tag to display the specific selected type and `a` tag is used to display the round dot. The selected style is triggered by some JS code. When you click the dot, it will add `is-active` class to that `li` tag, then the specific `svg` tag will change style.

You can easily use this component in your next project by using the following HTML code (along with the JavaScript code) as a base.

Draw Cross

Draw Ellipse

Draw Sector

Draw Square

Draw Check

Show Markup

      <h3>Draw Cross</h3>
      <ul class="evo_c-svg-dot--default evo_c-svg-dot--cross">
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <line x1="13" y1="13" x2="3" y2="3" />
            <line x1="3" y1="13" x2="13" y2="3" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <line x1="13" y1="13" x2="3" y2="3" />
            <line x1="3" y1="13" x2="13" y2="3" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <line x1="13" y1="13" x2="3" y2="3" />
            <line x1="3" y1="13" x2="13" y2="3" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <line x1="13" y1="13" x2="3" y2="3" />
            <line x1="3" y1="13" x2="13" y2="3" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <line x1="13" y1="13" x2="3" y2="3" />
            <line x1="3" y1="13" x2="13" y2="3" />
          </svg>
        </li>
      </ul>
      <h3>Draw Ellipse</h3>
      <ul class="evo_c-svg-dot--default evo_c-svg-dot--ellipse">
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <ellipse cx="8" cy="8" rx="7" ry="4" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <ellipse cx="8" cy="8" rx="7" ry="4" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <ellipse cx="8" cy="8" rx="7" ry="4" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <ellipse cx="8" cy="8" rx="7" ry="4" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <ellipse cx="8" cy="8" rx="7" ry="4" />
          </svg>
        </li>

      </ul>

      <h3>Draw Sector</h3>
      <ul class="evo_c-svg-dot--default evo_c-svg-dot--sector">
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <circle cx="8" cy="8" r="8" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <circle cx="8" cy="8" r="8" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <circle cx="8" cy="8" r="8" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <circle cx="8" cy="8" r="8" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" preserveAspectRatio="none">
            <circle cx="8" cy="8" r="8" />
          </svg>
        </li>
      </ul>

       <h3>Draw Square</h3>
      <ul class="evo_c-svg-dot--default evo_c-svg-dot--square">
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
            <polygon points="2,0 28,2 30,28 0,28"/>
          </svg>

        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <polygon points="2,0 28,2 30,28 0,28"/>
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <polygon points="2,0 28,2 30,28 0,28"/>
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <polygon points="2,0 28,2 30,28 0,28"/>
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <polygon points="2,0 28,2 30,28 0,28"/>
          </svg>
        </li>
      </ul>

      <h3>Draw Check</h3>
      <ul class="evo_c-svg-dot--default evo_c-svg-dot--check">
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
            <path d="M6,12 Q6,12 6,12" />
          </svg>

        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <path d="M2,4 Q2,4 2,4" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <path d="M2,4 Q2,4 2,4" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <path d="M2,4 Q2,4 2,4" />
          </svg>
        </li>
        <li>
          <a href="javascript:void(0)"></a>
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  preserveAspectRatio="none">
            <path d="M2,4 Q2,4 2,4" />
          </svg>
        </li>
      </ul>

Versatile Table

By Chenfeng Lai

Default

The Versatile Table is an evolution UI element to populate table based on JSON. It includes draggable column & row, sorting, searching and user profile pop-up features.

Show Markup

<div class="evo_c-divtable-small_placeholder">
  <input type="text" name="Name" id="evo_c-divtable-search_input" placeholder="Search User">
</div>

<div class="evo_c-divtable-container" id="evo_c-divtable-tableContainer">
</div>