# 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>`
food truck yr franzen pabst

## 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>`
Delete
Do you really wan't to delete all files?

## 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>`

## 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