Elements

Navigation

The Navigation Element is made to work as a Burger Menu and will only be fully visible at some breakpoint if you add the class expand-<breakpoint>. To open the menu add the class open to the menu-container-element.

<div class="nav-bar bg-light">
  <div class="nav-bar-row">
    <div class="nav-bar-cell"><span>logo</span></div>
    <div class="nav-bar-cell text-right menu-container expand-md">
        <div class="overlay"></div>
        <button class="menu-toggler">
          <div class="menu-icon menu-style1 menu-icon-primary"></div>
        </button>
        <div class="menu-content menu-from-left bg-white float-right">
            <ul class="menu-list">
                <li class="menu-item"><a class="menu-link">Link 1</a></li>
                <li class="menu-item"><a class="menu-link">Link 2</a></li>
                <li class="menu-item"><a class="menu-link">Link 3</a></li>
            </ul>
        </div>
    </div>
  </div>
</div>

For the icon there are 3 Styles available.

If you want to use a fixed navigation with "position-fixed", use "mt-fixed-menu" for yout content.

<div class="nav-bar bg-light position-fixed">
  <!-- your menu -->
</div>
<div class="mt-fixed-menu container">
  <!-- your content -->
</div>

Buttons

Code Example:

<!-- regular primary button -->
<button class="btn btn-primary">button</button>
<!-- alternative (outline) primary button -->
<button class="btn btn-alt-primary">Button</button>
<!-- button sizes -->
<button class="btn btn-primary btn-xl">button</button>
<button class="btn btn-primary btn-lg">button</button>
<button class="btn btn-primary">button</button>
<button class="btn btn-primary btn-sm">button</button>
<!-- example of a button group -->
<div class="btn-group mb-2">
  <button class="btn btn-primary">Button</button>
  <button class="btn btn-alt-secondary">Button</button>
  <button class="btn btn-alt-secondary">Button</button>
</div>
<!-- square or circle buttons (works with size options) -->
<button class="btn btn-primary btn-square btn-lg">A</button>
<button class="btn btn-primary btn-circle btn-sm">A</button>
<!-- loading -->
<button class="btn btn-primary loading">Button</button>

Form

<div class="form-group">
  <label class="form-switch">
    <input type="checkbox">
    <i class="switch"></i>
    <span>Toggle me</span>
  </label>
</div>
<div class="form-group">
  <label class="form-checkbox">
    <input type="checkbox">
    <i class="checkbox"></i>
    <span>Check me</span>
  </label>
</div>
<div class="form-group">
  <label class="form-radio mr-2">
    <input type="radio" name="radio-test">
    <i class="radio"></i>
    <span>Select me</span>
  </label>
  <label class="form-radio">
    <input type="radio" name="radio-test">
    <i class="radio"></i>
    <span>No me</span>
  </label>
</div>

Badges

Modals

To open a modal you need to add .open to the .modal-container element.

<a class="btn btn-primary" href="#my-modal" data-modal-button>Open Modal</a>
<div id="my-modal" class="modal-container">
  <div class="overlay"></div>
  <div class="modal-content">
    <span class="float-right modal-close">close</span>
    <h3>Modal Title</h3>
    <p class="mb-5">
    ...
    </p>
    <div class="text-right">
      <a class="btn btn-alt-primary mr-1">No</a>
      <a class="btn btn-primary">Okay</a>
    </div>
  </div>
</div>

List groups

Style elements as list groups with .list-group for the wrapper element and .list-group-item for item elements. To add rounded corners you can add utility-classes like round to the wrapper element. If the element is a or button there will be a hover effect.

<div class="list-group round my-3">
    <a href="#" class="list-group-item">Item</a>
    <a href="#" class="list-group-item active">Active Item</a>
    <a href="#" class="list-group-item">Item</a>
    <a href="#" class="list-group-item">Item</a>
  </div>

Dropdowns

To open the dropdown simply add .open-class to the .dropdown-wrapper element.

<div class="dropdown">
  <button class="btn btn-primary dropdown-btn">Dropdown</button>
  <div class="dropdown-list">
    <a class="dropdown-list-item" href="#">Link 1</a>
    <a class="dropdown-list-item" href="#">Link 2</a>
    <a class="dropdown-list-item" href="#">Link 3</a>
  </div>
</div>

Accordions

Add the class open to .accordion-item to show its content.

• Item 1
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
• Item 2
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<ul class="accordion round">
  <li class="accordion-item">
    <div class="accordion-btn">Item 1</div>
    <div class="accordion-content-wrapper">
      <div class="accordion-content">
        ...
      </div>
    </div>
  </li>
  <li class="accordion-item">
    <div class="accordion-btn">Item 2</div>
    <div class="accordion-content-wrapper">
      <div class="accordion-content">
        ...
      </div>
    </div>
  </li>
</ul>

Avatars

1

User 1

Information

User 1

Information

User 1

Information

<figure class="avatar mb-1 mr-1" data-initials="AB">
  <img src="https://source.unsplash.com/B4TjXnI0Y2c/100x100">
  <div class="notification">1</div>
</figure>
<div class="avatar-group">
  ...
</div>

<div class="avatar-list-group mb-3">
  <div class="avatar-list-item">
    <figure class="avatar">
      <img src="https://source.unsplash.com/B4TjXnI0Y2c/100x100">
    </figure>
    <div class="avatar-info">
      <div class="absolute-y-center">
        <p class="h4">User 1</p>
        <p>Information</p>
      </div>
    </div>
  </div>
</div>