Plain UI 0.1-alpha

Components

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>
<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>
String is not valid

Icon

Progress

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

Loading

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

Panel

Test

Hallo

Modal

Table

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

Hero

Media

food truck yr franzen pabst

Slider

food truck yr franzen pabst
food truck yr franzen pabst
food truck yr franzen pabst
food truck yr franzen pabst
food truck yr franzen pabst