• Pattern Library
  • Introduction

Base

Custom settings Colors Logotype Iconograpy Flags Animations Layout Typography Inputs Tables

Layout

Page layout, intro Main Margins Sidebar Footer Grid

Components

Address Bar Buttons Datatables Dialogs Filetree Formrow Iconbox Media object Menus Messages Meters Month picker Navigation bars Overlays Paginate Paper Password requirements Menu search box
Select boxes Sets Siteselector Slider Switch Table Tabs Tick (check boxes and radio buttons) Toggles Trays

Tools

Utilities Sass mixins

Menu search box

.SearchBox

This is a fancy search box that is used e.g. for domain search.

The descendant elements are required for the search box to work properly.

Example

Markup

<form class="SearchBox" action="" title="Search domain name">
    <p class="SearchBox-wrapper">
        <input class="SearchBox-input" type="text" placeholder="Search domain" />
        <button class="SearchBox-submit Icon Icon--search"></button>
    </p>
</form>

This is the Atomia Pattern Library

Copyright © 2016 Atomia. All rights reserved.

Automatically generated using kss-node.