Components

Plain UI is currently under development, Styles, Names and Documentation may change until Release!

Badge

<span class="badge">
    Category
</span>

Category 99+

Bar

<div class="bar">
    <div class="bar__start">
        <button class="button button--transparent">
            <svg class="icon fill-text-contrast marginless" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-close"></use>
            </svg>
        </button>
    </div>
    <div class="bar__main">
        Bar
    </div>
</div>

Bar

Buttons

<button class="button">
    Default
</button>

Field

<div class="field-group">
    <label class="field-label">
        Name
        <input class="field-text" />
    </label>
</div>

Name

<div class="field-group field-group--valid">
    <label class="field-label">
        <svg class="icon" aria-hidden="true">
            <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
        </svg>
        Surname
        <input class="field-text" />
     </label>
</div>

Surname

<div class="field-group field-group--error">
    <label class="field-label">
        <svg class="icon" aria-hidden="true">
            <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
        </svg>
        E-Mail
        <input class="field-text" />
    </label>
    <span class="field-error">
        String is not valid
    </span>
</div>

E-Mail String is not valid

<div class="field-group">
    <label class="field-label">
        Towns
        <select class="field-choice">
            <option></option>
            <option value="lonytown">Lonytown</option>
        </select>
    </label>
</div>

Towns

<div class="field-group">
    <label class="field-label">
        <input class="field-choice" type="checkbox" value="true" />
        <svg class="icon field-choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-checkbox"></use>
        </svg>
        <svg class="icon field-choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use>
        </svg>
        Checkbox
    </label>
</div>

Checkbox

<div class="field-group">
    <label class="field-label">
        <input class="field-choice" type="radio" name="radio" value="true" />
        <svg class="icon field-choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-circle"></use>
        </svg>
        <svg class="icon field-choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
        </svg>
        Radio A
    </label>
    <label class="field-label">
        <input class="field-choice" type="radio" name="radio" value="true" />
        <svg class="icon field-choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-circle"></use>
        </svg>
        <svg class="icon field-choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
        </svg>
        Radio B
    </label>
</div>

Radio A Radio B

<div class="field-group">
    <label class="field-label">
        <input class="field-choice" type="checkbox" name="radio" value="true" />
        <span class="field-switch"></span>
    </label>
</div>

Group

<div class="group">
    <div class="group__item background-color-primary color-text-contrast p-3">
        One
    </div>
    <div class="group__item background-color-primary color-text-contrast p-3">
        Two
    </div>
</div>

One

Two

Hero

<div class="hero">
    <img style="max-height: 400px;" src="/image.jpg" />
</div>

Icon

<svg class="icon" aria-hidden="true">
    <use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon fill-danger" aria-hidden="true">
    <use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon fill-success" aria-hidden="true">
    <use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>

Loading

<div class="loading">
    <span></span>
    <span></span>
    <span></span>
</div>

Media

<figure class="figure">
    <img class="media" src="/image.jpg" />
    <figcaption class="figure__caption">
        food truck yr franzen pabst
    </figcaption>
</figure>

Modal

<div class="modal">
    <div class="modal__inner">
        <div class="modal__title t-center">
            <svg class="icon fill-text-contrast" aria-hidden="true">
                <use xlink:href="symbol-defs.svg#icon-close"></use>
             </svg>
             Delete
          </div>
      <div class="modal__body">
          Do you really wan't to delete all files?
      </div>
      <div class="modal__footer">
          <button class="button button--outline button--danger" onclick="closeModal()">
              Confirm
          </button>
          <button class="button button--outline float-right" onclick="closeModal()">
              Reject
          </button>
       </div>
    </div>
</div>

Panel

<div class="panel">
    <div class="bar">
        <div class="bar__start">
            <button type="button" class="button button--transparent">
                <svg class="icon fill-text-contrast" aria-hidden="true">
                    <use xlink:href="symbol-defs.svg#icon-expand"></use>
                </svg>
             </button>
        </div>
        <div class="bar__main">Panel</div>
        <div class="bar__end">
            <button type="button" class="button button--transparent">
                <svg class="icon fill-text-contrast" aria-hidden="true">
                    <use xlink:href="symbol-defs.svg#icon-edit"></use>
                </svg>
            </button>
            <button type="button" class="button button--transparent">
                <svg class="icon fill-text-contrast" aria-hidden="true">
                     <use xlink:href="symbol-defs.svg#icon-close"></use>
                </svg>
            </button>
        </div>
    </div>
    <div class="panel__body">
        <div class="content m-last-child-0">
             <p>
                 Content
             </p>
        </div>
    </div>
</div>

Panel

Hallo

Progress

<div class="progress">
    <div class="progress__inner" style="width: 20%;"></div>
</div>

Sidebar

<div class="sidebar">
    <div class="sidebar__inner">
        <div class="sidebar__body">

        </div>
        <div class="sidebar__footer">
            <button type="button" class="button m-bottom-0">
                Close
            </button>
        </div>
    </div>
</div>

Sidebar + Bar

<div class="sidebar">
    <div class="sidebar__inner">

        <div class="bar">
            <div class="bar__main">
                Sidebar
            </div>
            <div class="bar__end">
                <button class="button button--transparent" type="button">
                    <svg class="icon fill-text-contrast" aria-hidden="true">
                        <use xlink:href="/symbol-defs.svg#icon-close"></use>
                    </svg>
                </button>
            </div>
        </div>
        
        <div class="sidebar__body">

        </div>
        <div class="sidebar__footer">
            <button type="button" class="button m-bottom-0">
                Close
            </button>
        </div>
    </div>
</div>

Sidebar

Table

<table class="table table--striped table--hover">
    <thead>
        <tr class="table__tr">
            <th class="table__th">A</th>
            <th class="table__th">B</th>
            <th class="table__th">C</th>
            <th class="table__th">D</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__tr">
            <td class="table__td">1</td>
            <td class="table__td">2</td>
            <td class="table__td">3</td>
            <td class="table__td">4</td>
        </tr>
        <tr class="table__tr">
            <td class="table__td">1</td>
            <td class="table__td">2</td>
            <td class="table__td">3</td>
            <td class="table__td">4</td>
        </tr>
        <tr class="table__tr">
            <td class="table__td">1</td>
            <td class="table__td">2</td>
            <td class="table__td">3</td>
            <td class="table__td">4</td>
        </tr>
    </tbody>
</table>

A	B	C	D
1	2	3	4
1	2	3	4
1	2	3	4

Tabs

<div class="tabs">
    <a class="tabs__item tabs__item--selected">
        Tab A
    </a>
    <a class="tabs__item">
        Tab B
    </a>
    <a class="tabs__item">
        Tab C
    </a>
</div>

Tab A Tab B Tab C

Tabs + Bar

<div class="bar">
    <div class="tabs tabs--contrast">
        <a class="tabs__item tabs__item--selected">
            Tab A
        </a>
        <a class="tabs__item">
            Tab B
        </a>
        <a class="tabs__item">
            Tab C
        </a>
    </div>
</div>

Tab A Tab B Tab C