Navbars

Standard navbar

<!-- Standard navbar -->
<nav class="nav-standard">
    <a class="nav-item" href="#">Navbar</a>
    <a class="nav-item" href="#">Номе</a>
    <a class="nav-item" href="#">Features</a>
    <a class="nav-item u-pull-right" href="#">About</a>
</nav>
                    

Primary navbar

Primary navbar with brand header and forms

<!-- Primary navbar -->
<nav class="nav-primary">
    <a class="nav-item primary" href="#">Primary navbar</a>
    <a class="nav-item" href="#"><i class="material-icons">home</i> Номе</a>
    <div class="nav-item nav-extra">Features
        <ul>
            <li><a href="#"><i class="material-icons">looks_one</i> First feature</a></li>
            <li><a href="#"><i class="material-icons">looks_two</i> Second feature</a></li>
        </ul>
    </div>
    <div class="nav-item nav-extra u-pull-right info u-color-info">
        <i class="material-icons">info</i>
        <ul class="u-set-info">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

<!-- Primary navbar with brand header and forms -->
<nav class="nav-primary u-padding-off">
    <div class="brand">
        <a href="#"><img src="img/logo.svg"></a>
        <h1 class="u-font-xl u-margin-off">Brand name</h1>
    </div>
    <form class="u-pull-right">
        <ul class="group nav-item">
            <li><input class="u-full-width" placeholder="Search..." type="search"></li>
            <li><button class="icons" type="submit"><i class="material-icons">search</i></button></li>
        </ul>
    </form>
</nav>
                    

Breadcrumb navbar

<!-- Breadcrumb navbar -->
<nav class="nav-standard breadcrumb">
    <a href="#">Home level</a>
    <a href="#">First level</a>
    <a href="#">Second level</a>
    <span">Curent open level</span>
</nav>
                    

Forms

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

<!-- Forms -->
<form class="u-full-width">
    <div class="row">
        <div class="six columns">
            <label for="exampleEmailInput">Your email</label>
            <input class="u-full-width" placeholder="your@mailbox.com" id="exampleEmailInput" type="email">
        </div>
        <div class="six columns">
            <label for="exampleRecipientInput">Reason for contacting</label>
            <select class="u-full-width" id="exampleRecipientInput">
                <option value="Option 1">Questions</option>
                <option value="Option 2">Advices</option>
                <option value="Option 3">Admiration</option>
            </select>
        </div>
    </div>
    <label for="exampleMessage">Message</label>
    <textarea class="u-full-width" placeholder="Here type your text" id="exampleMessage"></textarea>
    <div class="row">
        <div class="six columns">
            <label>
                <input type="checkbox">
                <div class="checkbox"></div>
                <span class="label-body">check a copy to yourself</span>
            </label>
        </div>
        <div class="six columns">
            <label>
                <input type="radio" name="anyname" checked="checked">
                <div class="radio"></div>
                <span class="label-body">plant text</span>
            </label>
            <label>
                <input type="radio" name="anyname">
                <div class="radio"></div>
                <span class="label-body">html body</span>
            </label>
        </div>
    </div>
    <input class="button-primary" value="Submit" type="submit">
    <input class="button-primary" value="Reset" type="reset">
</form>
                    

Groups

Groups combining input element with icon, standard, primary color and color icon buttons.

<!-- Button group -->
<ul class="group">
    <li><a class="button">Anchor button</a></li>
    <li><button>Button element</button></li>
</ul>
                        

<!-- Form group -->
<form>
    <ul class="group">
        <label>Form group label</label>
        <li><input placeholder="Placeholder..." type="text"></li>
        <li><input class="button-primary" value="Submit" type="submit"></li>
    </ul>
</form>
                        

Disabling elements

<!-- Disabled anchor buttons -->
<a class="button disabled">Anchor button</a>
                        

<!-- Buttons and inputs disabled elements -->
<button disabled>Button element</button>
<input value="submit input" type="submit" disabled>
                        

<!-- Disabled extra buttons -->
<ul class="extra-button">
    <button class="arrow" disabled>Button element</button>
    <ul>
        <li>...</li>
    </ul>
</ul>
                        

<!-- Disabled check and radio buttons -->
<label class="check-button">
    <input type="checkbox" checked disabled>
    <div class="button">
        <i class="material-icons check">check</i>
        <i class="material-icons uncheck">block</i>
        Check button
    </div>
</label>
                        

<!-- Any types input -->
<input type="text" disabled>

<!-- Select -->
<select disabled>
    <option>...</option>
</select>

<!-- Textarea -->
<textarea disabled></textarea>

<!-- Checkbox -->
<label>
    <input type="checkbox" disabled>
    <div class="checkbox"></div>
    <span class="label-body">...</span>
</label>

<!-- Radio buttons -->
<label>
    <input type="radio" checked="checked" disabled>
    <div class="radio"></div>
    <span class="label-body">checked</span>
</label>
<label>
    <input type="radio" disabled>
    <div class="radio"></div>
    <span class="label-body">unchecked</span>
</label>
                        

Lists

<!-- Basic list -->
<ul>
    <li>Item 1</li>
    <li>
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>
                            

<!-- Ordered list -->
<ol>
    <li>Item 1</li>
    <li>
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li>Item 3</li>
</ol>
                            

Cards

Standard cards

Rally 038

The car's 1,759.3 cc four-cylinder engine combined supercharging and turbocharging to reduce turbo lag at low engine speeds. The car produced a maximum output of 480 horsepower (350 kW).



Primary color cards

To create primary color cards use a background utility classes.

Success card title

Asperiores, enim, odio, accusantium, quam sapiente velit placeat porro hic nostrum temporibus saepe repellendus cupiditate illum modi nam consequuntur quos rem eaque magni eveniet eum officiis necessitatibus eligendi ex nobis.

Link ...

Warning card title

Quo, culpa debitis molestiae nihil minima quos beatae atque officia. Sunt doloremque debitis quaerat explicabo accusamus amet dolorem officiis sed sequi maxime. Accusantium hic!

Link ...

<!-- Standard card -->
<div class="card">
    <img class="u-full-width" src="image16x9.jpg">
    <div class="block">
        <h3>Card title</h3>
        <p>The main text area of the card</p>
        <button class="button">Button element</button>
    </div>
</div>
                    

<!-- Array cards -->
<div class="cards">
    <div class="card">...</div>
    ...
    <div class="card">...</div>
</div>
                        

Tables

<table class="u-full-width">
    <thead>
        <tr>
            <th>Place</th>
            <th>Name</th>
            <th>Location</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>#1</td>
            <td>Toivonen / Cresto</td>
            <td>54ème Rallye Automobile de Monte-Carlo</td>
            <td>10:11:24</td>
        </tr>
        <tr>
            <td>#2</td>
            <td>Alén / Kivimäki</td>
            <td>36th International Swedish Rally</td>
            <td>5:11:13</td>
        </tr>
    </tbody>
</table>
                    

Utilities