Element Guide

Buttons

Always add "btn" class to a button.

Some button classes can be combined:

<a class="btn btn-primary btn-lg btn-block" href="#">Large primary block button</a>

<button>Button tag</button>

Button

<a class="btn" href="#">Button</a>

Primary button

<a class="btn btn-primary" href="#">Primary button</a>

Invert button

<a class="btn btn-invert" href="#">Invert button</a>

Block button

<a class="btn btn-block" href="#">Block button</a>

Button XS

<a class="btn btn-xs" href="#">Button XS</a>

Button SM

<a class="btn btn-sm" href="#">Button SM<a>

Button LG

<a class="btn btn-lg" href="#">Button LG</a>

Button XL

<a class="btn btn-xl" href="#">Button XL</a>

Nowrap

<a class="btn btn-nowrap" href="#">Nowrap</a>

<a class="btn btn-dropdown" href="#">Dropdown</a>

Button wrapper

Use when adding multiple buttons next to each other. This class adds some margin around the buttons.

Button 1 Button 2 Button 3

<div class="btns">
<a href="#" class="btn">Button 1</a>
    <a href="#" class="btn">Button 2</a>
    <a href="#" class="btn">Button 3</a>
</div>

Line container

Button

<div class="line-container">
    <span>
        <a href="#" class="btn btn-primary">Button</a>
    </span>
</div>

Headings

Title H1

Title H2

Title H3

Title H4

Title H5

<h1>Title H1</h1>

Brand H1

Brand H2

Brand H3

Brand H4

Brand H5

<h1 class="brand">Brand H1</h1>

Even margin

Get margin-bottom value and set it as margin-top

<h2 class="even-margin">Even margin</h2>

Heading - use pixel size

CSS class font-size-140 makes this text 140% bigger, but heading size stays the same when using h-pixel-size class!

<div class="font-size-140 h-pixel-size">
<h2>Heading</h2>
<p>Text that gets bigger!</p>
</div>

Text and fonts

Font-family-*

* = bold, black, light, thin, regular, medium, base

Bold: GalanoGrotesqueAlt-Bold
Black: GalanoGrotesqueAlt-Black
Light: GalanoGrotesqueAlt-Light
Thin: GalanoGrotesqueAlt-Thin
Regular: GalanoGrotesqueAlt-Regular
Medium: GalanoGrotesqueAlt-Medium
Base: GalanoGrotesqueAlt-Regular

<span class="font-family-bold">Bold text</span>

Font-size-*

* = 50, 60, 70, ..., 200, 250, 300

<span class="font-size-50">Font size is 50% from the original</span>

Text alignment

Left, center, right

<div class="text-left">Left aligned text</div>

<div class="text-center">Centered text</div>

<div class="text-right">Right aligned text</div>

Text color

Brand colored text

<span class="brand-color">Brand colored text</span>

Navigations

Tabs

<ul class="nav nav-tabs">
    <li><a href="#">First item</a></li>
    <li class="active"><a href="#">Second item</a></li>
    <li><a href="#">Third item</a></li>
    <li><a href="#">Fourth item</a></li>
    <li><a href="#">Fifth item</a></li>
    <li><a href="#">Sixth item</a></li>
    <li><a href="#">Seventh item</a></li>
    <li><a href="#">Eighth item</a></li>
    <li><a href="#">Ninth item</a></li>
    <li><a href="#">Tenth item</a></li>
</ul>

Pill tabs

<ul class="nav nav-pills">
<li><a href="#">First item</a></li>
<li class="active"><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
<li><a href="#">Fourth item</a></li>
<li><a href="#">Fifth item</a></li>
<li><a href="#">Sixth item</a></li>
<li><a href="#">Seventh item</a></li>
<li><a href="#">Eighth item</a></li>
<li><a href="#">Ninth item</a></li>
<li><a href="#">Tenth item</a></li>
</ul>

Sidebar links

Inline blocks in mobile, blocks in desktop.

<nav class="nav sidebar-links">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li class="active"><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</nav>

Panels

Panel

<div class="panel">Panel</div>

Panel Invert

<div class="panel invert">Panel Invert</div>

Forms

Example form

Example form with Magento's form validation.

<form action="" method="get" data-mage-init='{"validation":{}}'>
    <div class="fields">
        <div class="field required">
            <label for="fname">Firstname</label>
            <div><input id="fname" type="text" name="firstname" data-validate='{"required":true}' /></div>
        </div>
        <div class="field required">
            <label for="lname">Lastname<</label>
            <div><input id="lname" type="text" name="lastname" data-validate='{"required":true}' /></div>
        </div>
        <div class="field">
            <label for="email">Email</label>
            <div><input id="email" type="text" value="" name="email" data-validate='{"validate-email":true}' /></div>
            <div><div class="tooltip"><div>?</div><div>Email address is not used for marketing.</div></div></div>
        </div>
        <div class="field">
            <label>Sex</label>
            <div class="label-buttons">
                <input type="radio" value="male" id="male" name="sex" checked="checked" /><label for="male">Male</label>
                <input type="radio" value="female" id="female" name="sex" /><label for="female">Female</label>
            </div>
        </div>
        <div class="field">
            <label> </label>
            <div><input type="submit" class="btn btn-primary" value="Submit" /></div>
        </div>
    </div>
</form>

Label buttons

Label needs to be right after the input element.

Radio buttons

First Second Third Fourth

<div class="label-buttons">
    <input type="radio" value="1" name="rb" id="rb1" checked="checked" /><label for="rb1">First</label>
    <input type="radio" value="1" name="rb" id="rb2" /><label for="rb2">Second</label>
    <input type="radio" value="1" name="rb" id="rb3" /><label for="rb3">Third</label>
    <input type="radio" value="1" name="rb" id="rb4" /><label for="rb4">Fourth</label>
</div>

Checkboxes

First Second Third Fourth

<div class="label-buttons">
    <input type="checkbox" value="1" name="cb" id="cb1" checked="checked" /><label for="cb1">First</label>
    <input type="checkbox" value="1" name="cb" id="cb2" /><label for="cb2">Second</label>
    <input type="checkbox" value="1" name="cb" id="cb3" /><label for="cb3">Third</label>
    <input type="checkbox" value="1" name="cb" id="cb4" /><label for="cb4">Fourth</label>
</div>

Backgrounds

Gradient: top grey, bottom white

<div class="bg-gradient-top-grey">Gradient: top grey, bottom white</div>

Gradient: top white, bottom grey

<div class="bg-gradient-bottom-grey">Gradient: top white, bottom grey</div>

Brand color as background color

<div class="brand-background">Brand color as background color</div>

Promo grid

Additional classes to use with promo-grid:

invert – Changes background color to white. Uses panel colors by default.
grid-width-* (* = 2-6) – How many tiles are shown per row in desktop view. Default = 3.
limited limit-* (* = 2-9) – Limit how many tiles are shown.

<div class="promo-grid">

    <div class="promo-tile">
        <a href="#">
            <img />
        </a>
        <h4>
            <a href="#">First promo tile!</a>
        </h4>
        <p>Promo Tile 1<br>Nov 20. 2017</p>
    </div>

    <div class="promo-tile">
        ...
    </div>

 </div>

Show All button:

<button onClick="jQuery('.promo-grid').removeClass('limited'); jQuery(this).fadeOut(200);">Show All</button>

Images

Use figure and figcaption tags when image has a caption.

Caption text

    <figure>
     <img />
     <figcaption>Caption text</figcaption>
    </figure>

Tables

Default

Col 1	Col 2	Col 3
Item	Item	Item
Item	Item	Item
Item	Item	Item

<table>

Bordered

Col 1	Col 2	Col 3
Item	Item	Item
Item	Item	Item
Item	Item	Item

<table class="table table-bordered">

Lined

Col 1	Col 2	Col 3
Item	Item	Item
Item	Item	Item
Item	Item	Item

<table class="table table-lined">

Additional classes

Compact

Col 1	Col 2	Col 3
Item	Item	Item
Item	Item	Item
Item	Item	Item

<table class="table table-bordered table-compact">

Light borders

Col 1	Col 2	Col 3
Item	Item	Item

<table class="table table-bordered light-borders">

Inner borders

Col 1	Col 2	Col 3
Item	Item	Item
Item	Item	Item

<table class="table table-bordered inner-borders">

Sidebar menu

Add code to CMS block and inject it to a page with a widget. Use "Sidebar Additional" container in the widget.

<ul class="sidebar-menu">
    <li><a href="#">Item 1</a></li>
    <li>
        <div class="toggler">Item 2</div>
        <ul>
            <li><a href="#">Subitem 2-1</a></li>
            <li><a href="#">Subitem 2-2</a></li>
            <li><a href="#">Subitem 2-3</a></li>
        </ul>
    </li>
    <li>
        <div class="toggler">Item 3</div>
        <ul>
            <li><a href="#">Subitem 3-1</a></li>
            <li><a href="#">Subitem 3-2</a></li>
            <li><a href="#">Subitem 3-3</a></li>
        </ul>
    </li>
</ul>

Dividers

Add border and some margin and padding to top/bottom of an element.

First (divider at bottom)

Second (divider at bottom)

Third

<div class="divider-at-top">Divider at top</div>
<div class="divider-at-bottom">Divider at bottom</div>

Togglers

Open/close containers. Toggler class adds an arrow next to the element, and hides the next sibling element. When toggler is clicked, visibility (CSS display) of the next sibling element is changed. Toggler do not add any styles to the element, except the arrow icon. Examples below have some inline styles added.

Toggler

Content is hidden in all viewport sizes.

Toggle

<div class="toggler">Toggle</div>
<div>Content</div>

Mobile toggler

In desktop view, arrow icon is hidden and content is shown. In mobile view works like a normal toggler.

Toggle

<div class="mobile-toggler">Toggle</div>
<div>Content</div>

Slide toggler

Toggler with animation. Animation speed is 200ms.

Toggle

<div class="slide-toggler">Toggle</div>
<div>Content</div>

Mobile slide toggler

In desktop view, toggler is hidden and content is shown. In mobile view works like a normal slide toggler.

Toggle

<div class="mobile-slide-toggler">Toggle</div>
<div>Content</div>

Toggle panel

List of togglable items.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta dui metus, quis molestie est euismod eget. Donec sagittis mauris vestibulum massa vehicula, eu tincidunt neque faucibus. Sed consequat finibus turpis at vulputate. Curabitur ut fermentum tortor. Duis venenatis nec justo vitae vestibulum. Praesent aliquet mauris et tortor interdum, non congue eros fringilla. Mauris mattis sagittis felis, et aliquam sem. Fusce tempor sem eget nibh scelerisque, sit amet tincidunt tortor semper. Sed scelerisque eros lorem, vitae aliquet dui egestas non.

In hac habitasse platea dictumst

In hac habitasse platea dictumst. Nunc posuere, mi nec ornare feugiat, lorem ipsum pretium nulla, non molestie arcu mi blandit arcu. Ut sollicitudin viverra justo, pulvinar lacinia eros elementum sit amet. Fusce consequat est id mauris bibendum semper. In tempor nisl ac mauris pharetra, lacinia gravida mauris congue. Nullam faucibus imperdiet nunc vitae ullamcorper. Nam tempor nec elit vel molestie.

Vestibulum egestas

Vestibulum egestas tristique nulla vel pharetra. Pellentesque in tristique nisl. Curabitur venenatis consequat dui sed placerat. Etiam dictum ante sit amet diam vulputate consectetur. Mauris sed leo varius, malesuada mi a, ornare lorem. Aenean sit amet dapibus arcu, ut dictum eros. Maecenas lacinia rutrum lacinia. Quisque sed gravida risus. Praesent et nisi sit amet orci sollicitudin euismod sed eu justo. Suspendisse ut vehicula mi. Praesent sed purus sit amet sapien eleifend convallis. Aliquam pellentesque mauris vitae leo dictum, vitae accumsan ipsum vehicula. Integer nec nisl dui. In in ornare est. Sed congue tristique nisl nec molestie.

<div class="toggle-panel">
    <div class="slide-toggler plusminus">Title</div>
    <div>
        Content
    </div>
</div>
<div class="toggle-panel">
    ...
</div>

Additional classes to use with toggler:

.visible-mobile-only

Show toggle button only in mobile view.

Toggle

<div class="toggler visible-mobile-only">Toggle</div>
<div>Content</div>

.plusminus

Arrow icon is replaced with +/- signs.

Toggle

<div class="toggler plusminus">Toggle</div>
<div>Content</div>

.no-arrow

Arrow icon is hidden.

Toggle

<div class="toggler">Toggle</div>
<div>Content</div>

Design - Layout Update XML

Customize page layout in CMS pages.

Remove breadcrumbs

<referenceContainer name="page.top">
    <referenceBlock name="breadcrumbs" remove="true" />
</referenceContainer>

Add hero banner (Ambientia_Banners)

<referenceContainer name="banner.area.hero">
    <block class="Ambientia\Banners\Block\Widget\Banner">
        <arguments>
            <argument name="identifier" xsi:type="string">IDENTIFIER-HERE</argument>
        </arguments>
    </block>
</referenceContainer>

Element Guide

Buttons

Button wrapper

Line container

Headings

Title H1

Title H2

Title H3

Title H4

Title H5

Brand H1

Brand H2

Brand H3

Brand H4

Brand H5

Even margin

Heading - use pixel size

Text and fonts

Font-family-*

Font-size-*

Text alignment

Text color

Navigations

Tabs

Pill tabs

Sidebar links

Panels

Forms

Example form

Label buttons

Radio buttons

Checkboxes

Backgrounds

Promo grid

First promo tile!

Second promo tile!

Third promo tile!

Fourth promo tile!

Fifth promo tile!

Sixth promo tile!

Additional classes to use with promo-grid:

Images

Tables

Default

Bordered

Lined

Additional classes

Compact

Light borders

Inner borders

Sidebar menu

Dividers

Togglers

Toggler

Mobile toggler

Slide toggler

Mobile slide toggler

Toggle panel

Additional classes to use with toggler:

.visible-mobile-only

.plusminus

.no-arrow

Design - Layout Update XML

Remove breadcrumbs

Add hero banner (Ambientia_Banners)