You are using an unsupported version of Internet Explorer. Eventene supports modern browsers like Chrome, Firefox or Edge, all available within Windows 10.
Organisms
Header

Top section combining organizations dropdown and breadcrumbs.

Item Note
.header

(Mandatory) main class.
.header__holder

Child class for group other components correctly.
Demo (Open in a new tab) 
<header class="header ">
  
    
      <div class="header__holder">
        <div class="dropdown dropdown--header">
  <div class="dropdown__holder">
    <a href="#" class="dropdown__button">
      <div class="dropdown__content dropdown__content--auto">
        <div class="dropdown__avatar">
          <svg class="icon  icon--small  icon--gray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
          </svg>
        </div>
        <span class="dropdown__text is-mobile-hidden"> Eventene </span>
      </div>
      <svg class="icon icon--tiny icon--darken-sky dropdown__icon no-space-out">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-down" />
      </svg>
    </a>
    <ul class="dropdown__list dropdown__list--big">
      <li class="dropdown__item">
        <div class="dropdown__row dropdown__row--first">
          <svg class="icon icon--tiny icon--light-slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-person" />
          </svg>
          <span class="dropdown__subtitle">Participant</span>
        </div>
      </li>
      <li class="dropdown__item ">
        <a href="/unicorn/styleguide/template-participant-events.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Josh Lion</span>
        </a>
      </li>
      <li class="dropdown__item">
        <div class="dropdown__row dropdown__row--tighter">
          <svg class="icon icon--tiny icon--light-slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
          </svg>
          <span class="dropdown__subtitle">Organizations</span>
        </div>
      </li>
      <li class="dropdown__item  is-selected ">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Eventene</span>
        </a>
      </li>
      <li class="dropdown__item">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Facebook</span>
        </a>
      </li>
      <li class="dropdown__item">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Meetup</span>
        </a>
      </li>
    </ul>
  </div>
</div>

        
          <ul class="breadcrumbs">
  
    <li class="breadcrumbs__item">
      <a href="/unicorn/styleguide/template-dashboard.html" class="breadcrumbs__link">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/unicorn/styleguide/template-events.html" class="breadcrumbs__link">Events</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Eader</a>
    </li>
  
</ul>

        
      </div>
    
  
</header>
.header {
  background-color: #FFF;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.275);
  height: 60px;
  padding-left: 70px;
  position: fixed;
  right: 0;
  top: 0;
  transition: all .2s linear;
  width: 100%;
  z-index: 9999985;
}

.header__holder {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}
Footer

Bottom section containing one or two actions.

Item Note
buttons

Same approach than #actions.
Demo (Open in a new tab) 
<div class="s-spacer">
  <footer class="footer">
  <button class="button--outline footer__button" type="button">Cancel</button>
  <button class="button footer__button" type="button">Create</button>
</footer>

</div>
.footer {
  background: var(--highlight-bg-color);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  padding: 30px 20px;
}

.footer__button {
  margin: 0 20px 0 0;
}

.footer__button:last-child {
  margin: 0;
}

.footer__button + .footer__button {
  margin: 0 0 0 1rem;
}
Sidebar

Main navigation.

Item Note
.sidebar

(Mandatory) main class.
.is-active

State to change in the .sidebar__item to make the actived links
Demo (Open in a new tab) 
<aside class="sidebar">
  <button class="button button--sky button--circle sidebar__button is-tablet-visible js-sidebar-trigger">
    <svg class="icon icon--slategray icon--tiny">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-menu" />
    </svg>
  </button>
  <div class="sidebar__holder">
    <div class="sidebar__header">
      <a href="/unicorn/styleguide/template-dashboard.html" class="sidebar__logo">
        <img class="image image--small sidebar__img" src="/unicorn/assets/images/logo-symbol.svg" alt="logo">
      </a>
    </div>
    <nav class="sidebar__list">
      
        
          <li   class="sidebar__item" >
            <a href="/unicorn/styleguide/template-dashboard.html" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-house" />
              </svg>
              <span class="sidebar__text">Dashboard</span>
            </a>
          </li>
        
        <li class="sidebar__item ">
          <a  href="/unicorn/styleguide/template-events.html"  class="sidebar__link">
            <svg class="icon icon--tiny sidebar__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-events" />
            </svg>
            <span class="sidebar__text">Events</span>
          </a>
        </li>
        
          <li class="sidebar__item ">
            <a href="/unicorn/styleguide/template-groups.html" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-group" />
              </svg>
              <span class="sidebar__text">Groups</span>
            </a>
          </li>
          <li class="sidebar__item ">
            <a href="/unicorn/styleguide/template-sections.html" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-spots" />
              </svg>
              <span class="sidebar__text">Sections</span>
            </a>
          </li>
        
        <li class="sidebar__item ">
          <a  href="/unicorn/styleguide/template-account.html"  class="sidebar__link">
            <svg class="icon icon--tiny sidebar__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-user" />
            </svg>
            <span class="sidebar__text">Account</span>
          </a>
        </li>
        
          <li class="sidebar__item">
            <a href="#" class="sidebar__link">
              <svg class="icon icon--tiny sidebar__icon">
                <use xlink:href="/unicorn/assets/icons/icons.svg#icon-chart" />
              </svg>
              <span class="sidebar__text">Metrics</span>
            </a>
          </li>
        
        <li class="sidebar__item sidebar__item--expandable">
          <a href="#" class="sidebar__link">
            <svg class="icon icon--tiny sidebar__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-lifesaver" />
            </svg>
            <span class="sidebar__text">Support</span>
          </a>
          <nav class="sidebar__submenu">
            <a href="#" rel="noopener" target="_blank" class="sidebar__sublink">Training Videos</a>
            <a href="https://eventene.freshdesk.com/support/solutions/43000202101" rel="noopener" target="_blank" class="sidebar__sublink">Using Eventene</a>
            <a href="https://eventene.freshdesk.com/support/solutions/folders/43000573012" rel="noopener" target="_blank" class="sidebar__sublink">Configuration</a>
            <a href="#" class="sidebar__sublink">Open Chat</a>
          </nav>
        </li>
      
      <li class="sidebar__item">
        <a href="/unicorn/styleguide/template-login.html" class="sidebar__link">
          <svg class="icon icon--tiny sidebar__icon">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-power" />
          </svg>
          <span class="sidebar__text">Logout</span>
        </a>
      </li>
    </nav>
  </div>
</aside>
.sidebar__holder {
  background-color: #FFF;
  box-shadow: 1px 60px 10px rgba(0, 0, 0, 0.275);
  height: 100%;
  left: 0;
  min-height: 100%;
  overflow-y: auto;
  position: fixed;
  top: 0;
  transform: translateX(-130px);
  transition: all .2s linear;
  width: 200px;
  z-index: 9999987;
}

.sidebar__header {
  align-items: center;
  background-color: #FFF;
  display: flex;
  height: 60px;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.sidebar__logo {
  position: relative;
  transform: translateX(66px);
  width: 100%;
}

.sidebar__img {
  transform: translateX(84px);
  width: 32px;
}

.sidebar__list {
  list-style-type: none;
  min-height: calc(100% - 60px);
  padding-top: 25px;
}

.sidebar__item {
  height: 60px;
  position: relative;
}

.sidebar__link {
  align-items: center;
  color: #959CA6;
  display: flex;
  height: 100%;
  padding: 0 0 0 28px;
}

.is-active .sidebar__link::before {
  background-color: #2E7FED;
  border-radius: 0 20px 20px 0;
  content: '';
  height: 60px;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(130px);
  transition: transform .2s linear;
  width: 5px;
}

.sidebar__icon {
  fill: #959CA6;
  transform: translateX(130px);
  transition: transform .2s linear;
}

.sidebar__text {
  color: #959CA6;
  opacity: 0;
  padding: 0 0 0 20px;
  transition-property: opacity;
  transition-duration: .55s;
  visibility: hidden;
}

.is-active .sidebar__text {
  color: #2E7FED;
}
Forms

Main form with action.

Item Note
.form__field--related

Use this modifier when the fields are complementary. I.e. First name / Last name; Credit card expiration date; etc.
buttons

More info on #buttons.
labels

More info on #texts.
inputs

More info on #inputs.
Demo (Open in a new tab) 
<div class="s-spacer">
  <form action="login" class="form">
  <fieldset>
    <div class="form__group">
      <div class="form__field">
        <label for="firstName">Full Name:</label>
        <input type="text" class="input" id="firstName" placeholder="Type your first name" />
        <input type="text" class="input" id="lastName" placeholder="Type your last name" />
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div class="form__group">
      <div class="form__field">
        <label for="firstName">Month:</label>
        <select class="select select--full" name="month" id="month" required>
          <option value="">Select Month</option>
          <option value="january">January</option>
          <option value="january">February</option>
          <option value="january">March</option>
        </select>
        <span class="validation__message validation__message--error">
          <svg class="icon icon--tiny icon--red">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-block" />
          </svg>
          Please Select a Month
        </span>
      </div>
      <div class="form__field">
        <label for="firstName">Year:</label>
        <select name="year" id="year">
          <option value="">Select Year</option>
          <option value="2015">2015</option>
          <option value="2016">2016</option>
        </select>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div class="form__group">
      <div class="form__field">
        <label for="email">Email:</label>
        <input class="input is-invalid" type="email" value="john@doe." />
        <span class="validation__message validation__message--success">
          <svg class="icon icon--tiny icon--green">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkmark" />
          </svg>
          Your email is valid!
        </span>

        <span class="validation__message validation__message--error">
          <svg class="icon icon--tiny icon--red">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-block" />
          </svg>
          Enter a valid email address
        </span>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <div class="form__group">
      <div class="form__field">
        <label for="password">Password:</label>
        <input type="password" name="password" class="input" id="password" placeholder="Choose a strong one" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required/>
        <span class="validation__message validation__message--error">
          <svg class="icon icon--tiny icon--red">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-block" />
          </svg>
          At least 8 characters, upper/smallcases and numbers
        </span>
      </div>
    </div>
  </fieldset>
  <button class="form__button" type="">Sign Up</button>
</form>

</div>
form {
  border: 0;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  position: relative;

  * {
    transition: all .3s linear;
  }
}

.form {

  &__holder {
    display: block;
  }

  &__field {
    display: inline-block;
    float: left;
    padding-right: 20px;
    position: relative;

    @include media(mobile) {
      padding: 0;
    }

    &:not(.form__field--icon) {
      @include media(mobile) {
        display: block;
      }
    }

    &:last-child {
      padding: 0;
    }

    &--half {
      width: calc(100% / 2 - 2px);

      @include media(mobile) {
        width: 100%;
      }
    }

    &--editable {
      max-width: 220px;
      overflow: hidden;
    }

    &--icon {

      &:first-of-type {
        width: calc(100% - 60px);

        @include media(mobile) {
          padding-right: 20px;
        }
      }

      &:last-of-type {
        top: -27px;
      }
    }
  }

  &__text--editable {
    cursor: text;
    display: inline-block;
    margin: 0;
    padding-right: 20px;
    transition: all .45s ease;
    width: 100%;

    .is-disabled & {
      cursor: default;
    }

    &:hover ~ .form__icon--editable {
      opacity: 1;
      visibility: visible;
    }

    &::before,
    &::after {
      content: '';
      height: 1px;
      left: 0;
      position: absolute;
      top: 18px;
      transform: translateX(-100%);
      transition: all .45s ease;
      width: 100%;

      .is-disabled & {
        background-color: transparent;
      }
    }

    &::before {
      background-color: $tuna;
      z-index: z("form", "line");
    }

    &::after {
      background-color: $darken-lavender;
      transform: translateX(0);

      .is-disabled & {
        transform: translateX(-100%);
      }
    }

    &:hover::before {
      transform: translateX(0);

      .is-disabled & {
        transform: translateX(-100%);
      }
    }
  }

  &__icon {
    transition: all .3s linear;

    &--editable {
      position: absolute;
      right: 0;

      .is-disabled & {
        display: none;
      }
    }
  }
}
Modals

Dialogs for lightboxes, user notifications, or completely custom content.

Item Note
.modal__holder

(mandatory) The whole area who keeps all elements.
.is-visible

(mandatory) State changed when button is clicked.
.modal__content

(mandatory) Put headlines and texts on this area.
.modal__footer

(optional) Use if you need to take some action.
Demo (Open in a new tab) 
  <div class="modal is-visible" data-type="sample">
  <div class="modal__holder">
    <div class="modal__content modal__content--full">
      <h4 class="modal__title">Modal headline</h4>
      <p class="modal__text">Modal text</p>
    </div>
    <footer class="footer modal__footer">
      <button class="button button--white button--light button--stroke button--square footer__button js-modal-close">Cancel</button>
      <button class="button button--square footer__button js-modal-close">Confirm</button>
    </footer>
  </div>
  <div class="modal__backdrop js-modal-close"></div>
</div>
.modal {
  transition: all .3s linear;
}

.modal__holder {
  background: #FFF;
  border-radius: 20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.275);
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: space-between;
  margin: auto;
  max-height: 55%;
  max-width: 45%;
  z-index: 10000104;
}

.modal__content {
  display: flex;
  flex: 1 1 10%;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 20px;
  position: relative;
  text-align: center;
  width: 100%;
}

.modal__close {
  padding: 0;
  position: absolute;
  right: -25px;
  top: -35px;
}

.modal__text {
  @include font-size($fs-medium);;
}

.modal__footer {
  background-color: #ECEFF6;
  border-radius: 0 0 20px 20px;
  height: 20%;
  min-height: 50px;
  overflow: hidden;
}

.modal__actions {
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 0;
}

.modal__button {
  border-radius: 0;
  border: none;
  box-shadow: none;
  @include font-size($fs-medium);;
  height: 100%;
  margin: 0;
  padding: 10px;
  width: calc(100% / 2);
}

.modal__backdrop,
.modal__holder {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.modal__backdrop {
  background-color: rgba(9, 9, 9, 0.55);
  height: 100%;
  width: 100%;
  z-index: 10000103;
}
Cards

Flexible and extensible content container with multiple variants and options.

Item Note
.card

(Mandatory) main class.
Demo (Open in a new tab) 
<div class="s-spacer">
  

  <div class="card">
    <div class="card__header">
      <h6 class="card__title">Feedback</h6>
    </div>

    <div class="card__content">
      <textarea name="feedback" id="feedback" cols="30" rows="5" placeholder="Leave your feedback" class="input input--invisible"></textarea>
    </div>

    <div class="card__footer">
      <button class="button button--square button--full card__button">Send Feedback</button>
    </div>
  </div>

  <div class="card card--linear card--initial card--rearrange card--relative card--link card--light">
    <div class="card__content card__content--column card__content--fit">
      <div class="card__block">
        <div class="card__badge badge badge--medium badge--center">
          <svg class="icon icon--small icon--light-slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-wedding-ring" />
          </svg>
        </div>
        <h6 class="card__subtitle card__subtitle--selection">Wedding</h6>
        <p>Plan an elegant wedding including rehearsal, ceremony, and reception.</p>
      </div>
      <div class="card__block">
        <button class="button button--sky button--light button--square is-relative card__button card__button--overlap js-modal-open" data-modal="wizard">
          <div class="button__holder">
            <svg class="icon button__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-popout" />
            </svg>
            <span class="button__text">Preview</span>
          </div>
        </button>
      </div>
    </div>
    <a href="#" class="card__trigger" data-tab="3"></a>
  </div>



</div>
.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 20px;
  width: 100%;
  flex: 1 1 0;
}

.card--big {
  flex-grow: 2.10;
}

.card__header {
  border-bottom: 1px solid #eff1f7;
  padding: 0 10px 10px;
  text-align: center;
}

.card__header--full {
  border-width: 2px;
  height: 100%;
  padding: 50px 10px;
}

.card__title {
  text-align: center;
}

.card__content--full {
  height: 100%;
}

.card__footer {
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.card__button {
  height: 50px;
  margin: 0;
}
Sidepanel

Modal variation with offcanvas effect.

Item Note
.sidepanel

(Mandatory) main class.
Demo (Open in a new tab) 
<aside class="sidepanel is-visible" data-type="new">
  
  <header class="sidepanel__header card__header card__header--center is-print-hidden">
  <h6 class="card__title">New Event</h6>
</header>

  <article class=" sidepanel__content">
    <div class="sidepanel__block">
  <h6 class="subtitle">1. Choose an option</h6>
  <hr>
  <div class="toggle ">
  
    <div class="toggle__item">
  <input class="toggle__el" id="Create" name="view" type="radio" checked>
  <label class="toggle__button" for="Create" onclick="">
    <svg class="icon icon--small icon--darken-sky">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-file" />
    </svg>
    <strong class="toggle__text">Create from Scratch</strong>
    <small class="toggle__desc">Start with a blank Event</small>
  </label>
</div>
<div class="toggle__item">
  <input class="toggle__el" id="Copy" name="view" type="radio" disabled>
  <label class="toggle__button" for="Copy" onclick="">
    <svg class="icon icon--small icon--darken-sky">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-copy" />
    </svg>
    <strong class="toggle__text">Copy an Existing Event</strong>
    <small class="toggle__desc">Build from previous Event</small>
  </label>
</div>

  
</div>

</div>

<div class="sidepanel__block">
  <h6 class="subtitle">2. Set a Name for your Event</h6>
  <hr>
  <input type="text" value="My Event" placeholder="My Event" class="input input--full">
</div>

<div class="sidepanel__block">
  <h6 class="subtitle">3. Start and End Date/Time</h6>
  <hr>
  <fieldset>
    <label for="startTime">Start</label>
    <select name="startTime" id="startTime">
      <option value="10">10:00 AM</option>
      <option value="11">11:00 AM</option>
      <option value="12">12:00 AM</option>
    </select>
  </fieldset>
  <fieldset>
    <label for="endTime">End</label>
    <select name="endTime" id="endTime">
      <option value="10">10:00 AM</option>
      <option value="11">11:00 AM</option>
      <option value="12">12:00 AM</option>
    </select>
  </fieldset>
</div>

<div class="sidepanel__block">
  <h6 class="subtitle">4. Location</h6>
  <hr>
  <input type="text" value="" placeholder="Las Vegas" class="input input--full">
</div>

  </article>
  
  <footer class="footer sidepanel__footer">
  
    <button class="button button--white button--light button--stroke button--square footer__button js-sidepanel-close" type="button">Cancel</button>
    
      
        <button class="button button--square footer__button js-sidepanel-close" type="button">Confirm</button>
      
    
  
</footer>

</aside>
Cover

Custom header information for Events, Groups and Sections.

Item Note
.cover

(Mandatory) main class.
Demo (Open in a new tab) 
<div class="container__cover container__cover--info">
  

<div class="cover ">
  <div class="cover__avatar avatar " data-modal="image">
    <div class="avatar__holder">
      <svg class="icon icon--large icon--white cover__icon">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-group" />
      </svg>
    </div>
    
  </div>
  <div class="cover__row">
    <div class="cover__details ">
      <div class="cover__headline">
        <h4 class="cover__title">Troop 1</h4>
        
        
      </div>
      <ul class="cover__list">
        <li class="cover__item">
          <strong>Created: </strong>
          <span class="cover__text">5 months Ago</span>
        </li>
        <li class="cover__item">
          <strong>Last Modified: </strong>
          <span class="cover__text">10 hours ago</span>
        </li>
        
      </ul>
      <ul class="cover__list">
        <li class="cover__item">
          <svg class="icon icon--tiny icon--white">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dot" />
          </svg>
          <span class="cover__text">
            Subgroup of Troop 223
            
          </span>
        </li>
        
      </p>
    </div>
  </div>
  
    <div class="cover__row">
      <div class="cover__dock dock">
        <nav class="dock__tabbar tabbar">
          
            <a href="/unicorn/styleguide/template-list.html"  class="tabbar__link" >Summary</a>
            <a href="/unicorn/styleguide/template-people.html"  class="tabbar__link" >People</a>
            <a href="/unicorn/styleguide/template-layout.html"  class="tabbar__link" >Layout</a>
            <a href="/unicorn/styleguide/template-plans.html"  class="tabbar__link" >Subscriptions</a>
          
        </nav>
      </div>
    </div>
  
  <div class="cover__backdrop">
    
  </div>
</div>

</div>
Steps

Custom progress counters.

Item Note
.steps

(Mandatory) main class.
.s-box

Class for demo only.
Demo (Open in a new tab) 
  
  
  <article class="steps steps--fixed  s-box  ">
  <header class="steps__header steps__header--fixed">
    <h6 class="no-space-out is-web-visible">
      <span>New Event Process</span>
      <small class="card__subtext">Step 1 of 10</small>
    </h6>
    <a href="/unicorn/styleguide/template-events.html" class="button button--circle button--sky no-space-out tooltip tooltip--bottom" data-tooltip="Exit">
      <div class="button__holder">
        <svg class="icon icon--tiny button__icon">
          <use xlink:href="/unicorn/assets/icons/icons.svg#icon-close" />
        </svg>
      </div>
    </a>
  </header>
  <div class="steps__chart is-web-visible">
    <div class="chart chart--roundedbar has-full-width">
      <div class="chart__bar">
        <div class="chart__progress" style="width: 5%"></div>
      </div>
    </div>
  </div>
  
</article>

  <article class="steps">

  
    <header class="steps__header ">
      <nav class="steps__list">
        <a href="/unicorn/styleguide/template-recipients.html" class="steps__item ">1</a>
        <a href="/unicorn/styleguide/template-compose.html" class="steps__item ">2</a>
        <a href="/unicorn/styleguide/template-send.html" class="steps__item is-disabled">3</a>
      </nav>
      <hr>
    </header>
  

  <div class="steps__content is-web-visible">
    <svg class="icon icon--blue icon--large">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-settings" />
    </svg>
    <h6>Assignments Setup</h6>
    <p class="steps__desc">In order to use Assign, an Activity must have both a Group and Section associated. To edit these lists please fill all the fields in the box aside.</p>
  </div>
</article>
Timeline

Custom page separator based in creation date or other filter criteria.

Item Note
.timeline

(Mandatory) main class.
.timeline--index

Count up the timeline’s steps
.timeline--fixed

Responsive media query class
Demo (Open in a new tab) 
  <nav class="timeline timeline--index timeline--fixed" tabindex="-1">
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist is-active is-checked" data-tab="1">Starting Point</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="2" data-wizard-second>Template Selection</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="3">Event Details</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="4">Start / End Time</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="5">Location</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="6">External Link</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="7">Images</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="8">Invitees</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="9">Activities</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist" data-tab="10">Confirm & Publish</a>
  <a href="#" class="timeline__item timeline__item--borderless timeline__item--checklist is-hidden" data-tab="11" data-wizard-final></a>
</nav>
  <aside class="timeline" tabindex="-1">
  
  <div class="timeline__block " data-content="allActivities">
    <div class="timeline__actions">
      <div class="timeline__filters">
        

<div class="dropdown dropdown--floating dropdown--auto dropdown--full dropdown--timeline">
  <div class="dropdown__holder">
    <a href="#" class="dropdown__button dropdown__button--rounded">
      <div class="dropdown__content">
        <span class="dropdown__label">Start Date</span>
      </div>
      <svg class="icon icon--tiny icon--slategray dropdown__icon dropdown__icon--static">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-sort"></use>
      </svg>
    </a>
    <ul class="dropdown__list dropdown__list--medium dropdown__list--floating">
      
        <li class="dropdown__item">
          <a href="#" class="dropdown__link">
            <span class="dropdown__legend">Start Date</span>
          </a>
        </li>
      
        <li class="dropdown__item">
          <a href="#" class="dropdown__link">
            <span class="dropdown__legend">Name</span>
          </a>
        </li>
      
        <li class="dropdown__item">
          <a href="#" class="dropdown__link">
            <span class="dropdown__legend">Capacity</span>
          </a>
        </li>
      
        <li class="dropdown__item">
          <a href="#" class="dropdown__link">
            <span class="dropdown__legend">Availability</span>
          </a>
        </li>
      
        <li class="dropdown__item">
          <a href="#" class="dropdown__link">
            <span class="dropdown__legend">Activity Number</span>
          </a>
        </li>
      
    </ul>
  </div>
</div>

        <button class="button button--circle button--white button--stroke no-space-out" type="button" search-collapse>
          <svg class="icon--tiny icon--slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-search" />
          </svg>
        </button>
      </div>
      <div class="timeline__search is-hidden" input-collapse>
        <input type="search" placeholder="Search Here..." class="input input--rounded input--full" data-search />
      </div>
      <div class="flash flash--action flash--info flash--auto flash--rounded flash--static timeline__flash is-invisible is-hidden" data-search-message>
        <div class="flash__data">
          <a href="#" class="button button--circle button--transparent button--outline no-space-out flash__close" type="button" data-search-clear>
            <svg class="icon icon--tiny icon--white button__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-close"/>
            </svg>
          </a>
          <span data-search-results-counter></span>
        </div>
      </div>
    </div>
    <nav class="timeline__nav">
      
        <a href="#" class="timeline__item " data-tab="1" data-search-result>
          <strong>Drive to Campout</strong>
          <small>Mon&comma; 02/10&comma; 12 PM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="2" data-search-result>
          <strong>Setup Campsite</strong>
          <small>Mon&comma; 02/10&comma; 5 PM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="3" data-search-result>
          <strong>Hike</strong>
          <small>Tue&comma; 02/11&comma; 9 AM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="4" data-search-result>
          <strong>Lunch</strong>
          <small>Tue&comma; 02/11&comma; 2 PM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="5" data-search-result>
          <strong>Free Time</strong>
          <small>Wed&comma; 02/12&comma; 10 AM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="6" data-search-result>
          <strong>Survival Training Lesson</strong>
          <small>Wed&comma; 02/12&comma; 12 PM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="7" data-search-result>
          <strong>Cookout and Dinner</strong>
          <small>Wed&comma; 02/12&comma; 6 PM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="8" data-search-result>
          <strong>Campfire Storytelling</strong>
          <small>Thu&comma; 02/13&comma; 9 AM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="9" data-search-result>
          <strong>Tent Assignments</strong>
          <small>Fri&comma; 02/13&comma; 12 PM • Spots: 10/10</small>
        </a>
      
        <a href="#" class="timeline__item " data-tab="10" data-search-result>
          <strong>Drive Home</strong>
          <small>Fri&comma; 02/13&comma; 1 AM • Spots: 10/10</small>
        </a>
      
    </nav>
  </div>
</aside>