Patterns

Examples of common design patterns, used throughout the Automile web app, and examples how to achieve them.

# From To

to
<div class="row row--middle">
    <div class="col">
        <div class="row">
            <div class="form-control--icon">
                <svg class="shape" aria-hidden="true">
                    <use xlink:href="#shape-calendar"></use>
                </svg>
            </div>
            <input type="text" class="form-control" id="fromDate" value="2015-05-13" placeholder="Pick a date…">
        </div>
    </div>

    <div>to</div>

    <div class="col">
        <div class="row">
            <div class="form-control--icon">
                <svg class="shape" aria-hidden="true">
                    <use xlink:href="#shape-calendar"></use>
                </svg>
            </div>
            <input type="text" class="form-control" id="toDate" value="2015-05-19" placeholder="Pick a date…">
        </div>
    </div>
</div>

# Inbox slats

ABC123 • October 5 3:23 PM – 3:24 PM
  • Bjälkgatan 1, 824 43 Hudiksvall, Sweden
  • Västra Tullgatan 49, 824 30 Hudiksvall, Sweden
ABC123

Missing Odometer Reading

Your vehicle ABC123 hasn't reported an odometer reading, please add it below.

Enter License Plate or VIN

Your vehicle ID 123455 is not reporting VIN and is thus preventing us from finding the license plate and related information about this vehicle. Please enter either one below.

ABC123 • October 7 4:07 PM

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum beatae dicta labore reiciendis minima pariatur. Sunt, voluptatem autem suscipit ipsam sapiente, laudantium laboriosam inventore vitae iste non ipsa, voluptas doloribus.

ABC123 • October 7 4:07 PM

Accident

Vehicle ABC123 has been involved in an accident.

<div class="slats">
    <div class="slat">
        <div class="row row--middle push-half--bottom">
            <div class="label text-uppercase">
                <small>ABC123 • October 5 3:23 PM – 3:24 PM</small>
            </div>
            <svg class="shape shape--merge"
                 data-tooltip="This trip is merged"
                 data-tooltip-position="right middle"
                 aria-hidden="true">
                <use xlink:href="#shape-merge"></use>
            </svg>
        </div>

        <ul class="a-to-b a-to-b--small push--bottom">
            <li>
                <svg class="shape" aria-hidden="true">
                    <use xlink:href="#shape-circle"></use>
                </svg>
                Bjälkgatan 1, 824 43 Hudiksvall, Sweden
            </li>
            <li>
                <svg class="shape" aria-hidden="true">
                    <use xlink:href="#shape-circle"></use>
                </svg>
                Västra Tullgatan 49, 824 30 Hudiksvall, Sweden
            </li>
        </ul>

        <div class="row">
            <div class="col col--one-half">
                <div class="button-group button-group--block">
                    <button class="button button--hollow">
                        <span class="rect rect--personal"></span> Personal
                    </button>
                    <button class="button button--hollow is-active">
                        <span class="rect rect--business"></span> Business
                    </button>
                    <button class="button button--hollow">
                        <span class="rect rect--other"></span> Other
                    </button>
                </div>
            </div>

            <div class="col soft--right">
                <input class="form-control" type="text" placeholder="Add a description…">
            </div>

            <button class="button button--hollow">Mark as Complete</button>
        </div>
    </div>

    <div class="slat">
        <div class="row row--bottom">
            <div class="col">
                <div class="label text-uppercase push-half--bottom"><small>ABC123</small></div>
                <h3>Missing Odometer Reading</h3>
                <p>Your vehicle <strong>ABC123</strong> hasn't reported an odometer reading, please add it below.</p>
                <input class="form-control" type="text" placeholder="Enter vehicle odometer&hellip;">
            </div>
            <button class="button button--hollow push-half--left">Save</button>
        </div>
    </div>

    <div class="slat">
        <div class="row row--bottom">
            <div class="col">
                <h3>Enter License Plate or VIN</h3>
                <p>Your vehicle <strong>ID 123455</strong> is not reporting VIN and is thus preventing us from finding the license plate and related information about this vehicle. Please enter either one below.</p>
                <input class="form-control" type="text" placeholder="Enter license plate or VIN&hellip;">
            </div>
            <button class="button button--hollow push-half--left">Save</button>
        </div>
    </div>

    <div class="slat">
        <div class="row row--bottom">
            <div class="col">
                <div class="label text-uppercase push-half--bottom"><small>ABC123 • October 7 4:07 PM</small></div>
                <h3>Lorem ipsum</h3>
                <p class="flush--bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum beatae dicta labore reiciendis minima pariatur. Sunt, voluptatem autem suscipit ipsam sapiente, laudantium laboriosam inventore vitae iste non ipsa, voluptas doloribus.</p>
            </div>
            <button class="button button--hollow push-half--left">Dismiss</button>
        </div>
    </div>

    <div class="slat">
        <div class="row row--bottom">
            <div class="col">
                <div class="label text-uppercase push-half--bottom"><small>ABC123 • October 7 4:07 PM</small></div>
                <h3>Accident</h3>
                <p>Vehicle <strong>ABC123</strong> has been involved in an accident.</p>
                <img src="http://placehold.it/644x200?text=Static+map" class="border">
            </div>
            <button class="button button--hollow">Dismiss</button>
        </div>
    </div>
</div>

# Trip slats

Extend .slat with .slat--business, .slat--personal, or .slat--other to add colored left border to slats.

TUO683 • October 5 3:23 PM – 3:24 PM
  • Bjälkgatan 1, 824 43 Hudiksvall, Sweden
  • Västra Tullgatan 49, 824 30 Hudiksvall, Sweden
  • 02:25
  • 183.1 km
  • TUO683
  • 16.5 liter
View
TUO683 • October 5 3:23 PM – 3:24 PM
  • Bjälkgatan 1, 824 43 Hudiksvall, Sweden
  • Västra Tullgatan 49, 824 30 Hudiksvall, Sweden
  • 02:25
  • 183.1 km
  • TUO683
  • 16.5 liter
View 
<div class="slats">
    <div class="slat slat--business is-active">
        <div class="row row--collapsed row--middle">
            <label class="control checkbox" style="margin-top: -1em;">
                <input type="checkbox" checked>
                <span class="control-indicator"></span>
            </label>

            <div class="col">
                <div class="row row--middle">
                    <div class="col col--one-half">
                        <div class="row push-half--bottom">
                            <div class="label text-uppercase">
                                <small>TUO683 • October 5 3:23 PM – 3:24 PM</small>
                            </div>
                            <svg class="shape shape--merge"
                                 data-tooltip="This trip is merged"
                                 data-tooltip-position="right middle"
                                 aria-hidden="true">
                                <use xlink:href="#shape-merge"></use>
                            </svg>
                        </div>

                        <ul class="a-to-b a-to-b--small">
                            <li>
                                <svg class="shape" aria-hidden="true">
                                    <use xlink:href="#shape-circle"></use>
                                </svg>
                                Bjälkgatan 1, 824 43 Hudiksvall, Sweden
                            </li>
                            <li>
                                <svg class="shape" aria-hidden="true">
                                    <use xlink:href="#shape-circle"></use>
                                </svg>
                                Västra Tullgatan 49, 824 30 Hudiksvall, Sweden
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul class="list-bare">
                            <li>02:25</li>
                            <li>183.1 km</li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul class="list-bare">
                            <li>TUO683</li>
                            <li>16.5 liter</li>
                        </ul>
                    </div>
                    <div class="button-group">
                        <a class="button button--hollow" href="#">View</a>
                        <button class="button button--hollow button--narrow">
                            <svg class="shape" aria-hidden="true">
                                <use xlink:href="#shape-caret-down"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slat slat--personal">
        <div class="row row--collapsed row--middle">
            <label class="control checkbox" style="margin-top: -1em;">
                <input type="checkbox">
                <span class="control-indicator"></span>
            </label>

            <div class="col">
                <div class="row row--middle">
                    <div class="col col--one-half">
                        <div class="row push-half--bottom">
                            <div class="label text-uppercase">
                                <small>TUO683 • October 5 3:23 PM – 3:24 PM</small>
                            </div>
                            <svg class="shape shape--merge"
                                 data-tooltip="This trip is merged"
                                 data-tooltip-position="right middle"
                                 aria-hidden="true">
                                <use xlink:href="#shape-merge"></use>
                            </svg>
                        </div>

                        <ul class="a-to-b a-to-b--small">
                            <li>
                                <svg class="shape" aria-hidden="true">
                                    <use xlink:href="#shape-circle"></use>
                                </svg>
                                Bjälkgatan 1, 824 43 Hudiksvall, Sweden
                            </li>
                            <li>
                                <svg class="shape" aria-hidden="true">
                                    <use xlink:href="#shape-circle"></use>
                                </svg>
                                Västra Tullgatan 49, 824 30 Hudiksvall, Sweden
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul class="list-bare">
                            <li>02:25</li>
                            <li>183.1 km</li>
                        </ul>
                    </div>
                    <div class="col">
                        <ul class="list-bare">
                            <li>TUO683</li>
                            <li>16.5 liter</li>
                        </ul>
                    </div>
                    <div class="button-group">
                        <a class="button button--hollow" href="#">View</a>
                        <button class="button button--hollow button--narrow">
                            <svg class="shape" aria-hidden="true">
                                <use xlink:href="#shape-caret-down"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

# Vehicle slats

  • Volkswagen Sharan 2.0 TDI
  • ABC123
  • Diesel
  • Trailer Hitch
  • Manual
  • N/A
View
  • Audi A6 Avant
  • ABC123
  • Petrol
  • Trailer Hitch
  • Automatic
  • 13761.7 km
View 
<div class="slats">
    <div class="slat">
        <div class="row row--middle">
            <img src="https://content.automile.se/vinlogo/volkswagen.png" width="60" height="60">

            <div class="col col--one-half slat__title">
                <ul>
                    <li>Volkswagen Sharan 2.0 TDI</li>
                    <li>ABC123</li>
                </ul>
            </div>

            <div class="col">
                <ul class="list-bare">
                    <li>Diesel</li>
                    <li>Trailer Hitch</li>
                </ul>
            </div>

            <div class="col">
                <ul class="list-bare">
                    <li>Manual</li>
                    <li>N/A</li>
                </ul>
            </div>

            <div class="button-group">
                <a class="button button--hollow" href="#">View</a>
                <button class="button button--hollow button--narrow">
                    <svg class="shape" aria-hidden="true">
                        <use xlink:href="#shape-caret-down"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <div class="slat">
        <div class="row row--middle">
            <img src="https://content.automile.se/vinlogo/audi.png" width="60" height="60">

            <div class="col col--one-half slat__title">
                <ul>
                    <li>Audi A6 Avant</li>
                    <li>ABC123</li>
                </ul>
            </div>

            <div class="col">
                <ul class="list-bare">
                    <li>Petrol</li>
                    <li>Trailer Hitch</li>
                </ul>
            </div>

            <div class="col">
                <ul class="list-bare">
                    <li>Automatic</li>
                    <li>13761.7 km</li>
                </ul>
            </div>

            <div class="button-group">
                <a class="button button--hollow" href="#">View</a>
                <button class="button button--hollow button--narrow">
                    <svg class="shape" aria-hidden="true">
                        <use xlink:href="#shape-caret-down"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

# Toolbar

The toolbar often includes a couple of filtering options and a search field.

 
<div class="row">
    <div class="col">
        <div class="select">
            <select>
                <option>Name (a-z)</option>
                <option>Name (z-a)</option>
            </select>
        </div>
    </div>

    <div class="col">
        <div class="select">
            <select>
                <option>Name (a-z)</option>
                <option>Name (z-a)</option>
            </select>
        </div>
    </div>

    <div class="col">&nbsp;</div>

    <div class="col">
        <div class="row">
            <div class="form-control--icon">
                <svg class="shape" aria-hidden="true">
                    <use xlink:href="#shape-search"></use>
                </svg>
            </div>
            <input type="text" class="form-control" placeholder="Find geofence…">
        </div>
    </div>
</div>

If it’s only two items on that row, we can use extend our .row with .row--space-between to place the items in our .row on each side.

<div class="row row--space-between">
    <div class="col col--one-quarter">
        <div class="select">
            <select>
                <option>Name (a-z)</option>
                <option>Name (z-a)</option>
            </select>
        </div>
    </div>

    <div class="col col--one-quarter">
        <div class="row">
            <div class="form-control--icon">
                <svg class="shape" aria-hidden="true">
                    <use xlink:href="#shape-search"></use>
                </svg>
            </div>
            <input type="text" class="form-control" placeholder="Find geofence…">
        </div>
    </div>
</div>