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>
<a class="btn" href="#">Button</a>
<a class="btn btn-primary" href="#">Primary button</a>
<a class="btn btn-invert" href="#">Invert button</a>
<a class="btn btn-block" href="#">Block button</a>
<a class="btn btn-xs" href="#">Button XS</a>
<a class="btn btn-sm" href="#">Button SM<a>
<a class="btn btn-lg" href="#">Button LG</a>
<a class="btn btn-xl" href="#">Button XL</a>
<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.
<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
<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
<div class="panel">Panel</div>
<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
<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
<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
<div class="bg-gradient-top-grey">Gradient: top grey, bottom white</div>
<div class="bg-gradient-bottom-grey">Gradient: top white, bottom grey</div>
<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.
<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.
<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.
<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.
<div class="mobile-toggler">Toggle</div> <div>Content</div>
Slide toggler
Toggler with animation. Animation speed is 200ms.
<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.
<div class="mobile-slide-toggler">Toggle</div> <div>Content</div>
Toggle panel
List of togglable items.
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. 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 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.
<div class="toggler visible-mobile-only">Toggle</div> <div>Content</div>
.plusminus
Arrow icon is replaced with +/- signs.
<div class="toggler plusminus">Toggle</div> <div>Content</div>
.no-arrow
Arrow icon is hidden.
<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>