Buttons can be either button or a tags. The Btn--spaced sub-module can be used to space any button module, including TypeBtn from the content below.
<button class="Btn Btn--primary">Primary button</button>
<a href="" class="Btn Btn--secondary">Secondary button</a>
<button class="Btn">Default button</button>
<button class="Btn Btn--spaced">Spaced button</button>
<button class="Btn Btn--light">Light button</button>
<button class="Btn Btn--expanded">Full width button</button>
<button class="Btn Btn--alert">Big bad alert button</button>
Mobile friendly CTA button widths:
<button class="Btn Btn--cta">My width is 100% on small screens</button>
Large light buttons in a grid:
<div class="section section--dark row">
<div class="col-sm-3 col-lg-2">
<button class="Btn Btn--spaced Btn--light Btn--expanded col-child-align">
<strong>Mobile Phone</strong>
</button>
</div>
<div class="col-sm-3 col-lg-2">
<button class="Btn Btn--spaced Btn--light Btn--expanded col-child-align">
<strong>Tablet / E-reader</strong>
</button>
</div>
<div class="col-sm-3 col-lg-2">
<button class="Btn Btn--spaced Btn--light Btn--expanded col-child-align">
<strong>Laptop / Notebook</strong>
</button>
</div>
<div class="col-sm-3 col-lg-2">
<button class="Btn Btn--spaced Btn--light Btn--expanded col-child-align">
<strong>Camera Equipment</strong>
</button>
</div>
<div class="col-sm-3 col-lg-2">
<button class="Btn Btn--spaced Btn--light Btn--expanded col-child-align">
<strong>Other Personal Handheld Electronic</strong>
</button>
</div>
<div class="col-sm-3 col-lg-2">
<button class="Btn Btn--spaced Btn--light Btn--expanded col-child-align">
<strong>Clothing / Accessories</strong>
</button>
</div>
</div>
The TypeBtn module is used as the lowest form of heirarchy for buttons. This does not include base styled anchor tags.
The TypeBtn--anchor sub-module is used for instances where a button is the semantically best option, but it is styled as a base anchor tag.
<a href="" class="TypeBtn">Single-origin coffee</a>
<button class="TypeBtn TypeBtn--secondary">Single-origin coffee</button>
<button class="TypeBtn TypeBtn--anchor">Ethical kickstarter</button>
<button class="TypeBtn TypeBtn--anchorLight">Stumptown man braid</button>
<button class="TypeBtn TypeBtn--padding">Shoreditch food truck</button>
<button class="TypeBtn TypeBtn--inline">Celiac pabst succulents</button>
<button class="TypeBtn TypeBtn--sm">Hashtag banjo cred</button>
<a href="" class="TypeBtn TypeBtn--icon">
<svg class="Icon" title="arrow left icon" role="img">
<use xlink:href="#arrowLeft"></use>
</svg>
<span class="TypeBtn-label">
Blue bottle succulents
</span>
</a>
<button class="TypeBtn TypeBtn--sm TypeBtn--icon">
<svg class="Icon" title="share icon" role="img">
<use xlink:href="#share"></use>
</svg>
<span class="TypeBtn-label">
Hashtag banjo cred
</span>
</button>
The IconBtn module is used for UI button elements that only feature an icon.
Notes: as of the time of writing, the icon set has not been implemented, hence the single close button example.
<button class="IconBtn">
<svg class="Icon Icon--circle Icon--xlg" title="close icon" role="img">
<use xlink:href="#close"></use>
</svg>
</button>
All forms should be namespaced by the Form class. We don't globally style form elements. This gives us the flexibility to introduce new form modules in the future, without impacting existing modules.
<form class="Form">
<fieldset>
<legend>A standard form</legend>
<div class="Input">
<label>Default Input module</label>
<div class="Input-field">
<input type="text" placeholder="Type here" />
</div>
</div>
<div class="Input Input--icon">
<label>Input module with an icon</label>
<div class="Input-field">
<svg class="Input-icon Icon" title="location icon" role="img">
<use xlink:href="#location"></use>
</svg>
<input type="text" placeholder="Type here" />
</div>
</div>
<div class="Input">
<label>Default Select module</label>
<div class="Input-field">
<select required>
<option value="" hidden>Placeholder</option>
<option>Tea</option>
<option>coffee</option>
<option>soda</option>
</select>
</div>
</div>
<div class="Input Input-is-valid">
<label>Valid Input module</label>
<div class="Input-field">
<input type="text" placeholder="Type here" />
</div>
</div>
<div class="Input Input-is-invalid">
<label>Invalid Input module</label>
<div class="Input-field">
<input type="email" placeholder="Type here" />
</div>
<span class="Input-message">Validation message</span>
</div>
</fieldset>
<fieldset>
<legend>Inputs using the grid for layout</legend>
<div class="row">
<div class="col-sm-6 col-lg-3 col-xl-2">
<div class="Input">
<label>Name</label>
<div class="Input-field">
<input type="text" placeholder="Rick James" />
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-xl-2">
<div class="Input">
<label>Email</label>
<div class="Input-field">
<input type="email" placeholder="[email protected]" />
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-xl-2">
<div class="Input">
<label>Phone</label>
<div class="Input-field">
<input type="tel" placeholder="02 9484 95039" />
</div>
</div>
</div>
</div>
</fieldset>
</form>
Buttons can be grouped together:
<div class="Input">
<label>Item value</label>
<div class="Input-group">
<div class="Input-prefix"> - </div>
<div class="Input-field">
<input class="Input-has-prefix"
type="number"
placeholder="Value (max $4000)" />
</div>
<div class="Input-prefix"> + </div>
</div>
</div>
<div class="Input Input-is-valid">
<label>Date of birth</label>
<div class="Input-group">
<div class="Input-field">
<select class="Input-has-postfix">
<option>01</option>
</select>
</div>
<div class="Input-prefix Input-postfix"> / </div>
<div class="Input-field">
<select class="Input-has-prefix Input-has-postfix">
<option>Feb</option>
</select>
</div>
<div class="Input-prefix Input-postfix"> / </div>
<div class="Input-field">
<select class="Input-has-prefix">
<option>1975</option>
</select>
</div>
</div>
</div>
<form class="Form">
<div class="Input">
<label>
Do you have a promo code?
</label>
<div class="Input-group">
<div class="Input-buttons">
<div class="Input-button">
<div>Promo code</div>
<span class="primary-font">USAVE10</span>
</div>
<div class="Input-button">
<div>Discount</div>
<span class="primary-font">-$15.32</span>
</div>
</div>
<button class="TypeBtn TypeBtn--padding">
Remove
</button>
</div>
</div>
</form>
<div class="Input Input-stacked">
<div class="Input-group">
<div class="Input-field">
<input type="text" placeholder="How can we help you today?" />
</div>
</div>
<button class="Btn Btn--primary">Search</button>
</div>
Input Blocks are a custom radio or checkbox input implementation. Using the grid we can define max-widths as well as ensure they remain of equal width and height.
As the label is a container, most html content could be added within the InputBlock.
By applying the --checkbox or --radio sub module, as well as changing the input type, we can handle both input types in the same way.
<!-- basic radio InputBlock -->
<div class="InputBlock InputBlock--radio">
<input type="radio" id="inputblock01" name="inputblock1" />
<label for="inputblock01">
<span class="InputBlock-button"></span>
I like cats
</label>
</div>
<!-- basic checkbox InputBlock -->
<div class="InputBlock InputBlock--checkbox">
<input type="checkbox" id="inputblock02" name="" />
<label for="inputblock02">
<span class="InputBlock-button"></span>
Send me cats
</label>
</div>
<!-- Centered InputBlocks within the responsive grid -->
<div class="row">
<div class="col-sm-6 col-md-2 col-lg-1">
<div class="InputBlock InputBlock--centered InputBlock--radio">
<input type="radio" id="inputblock03" name="inputblock3" />
<label for="inputblock03">
<span class="InputBlock-button"></span>
$100
</label>
</div>
</div>
<div class="col-sm-6 col-md-2 col-lg-1">
<div class="InputBlock InputBlock--centered InputBlock--radio">
<input type="radio" id="inputblock04" name="inputblock3" />
<label for="inputblock04">
<span class="InputBlock-button"></span>
$200
</label>
</div>
</div>
<div class="col-sm-6 col-md-2 col-lg-1">
<div class="InputBlock InputBlock--centered InputBlock--radio">
<input type="radio" id="inputblock05" name="inputblock3" />
<label for="inputblock05">
<span class="InputBlock-button"></span>
$300
</label>
</div>
</div>
</div>
<!-- Checkbox InputBlock's within the grid using the grid height alignment class, col-child-align -->
<div class="row">
<div class="col-sm-6 col-lg-2">
<div class="InputBlock InputBlock--centered InputBlock--checkbox col-child-align">
<input type="checkbox" id="inputblock06" name="" />
<label for="inputblock06">
<span class="InputBlock-button"></span>
Vape cray knausgaard heirloom thundercats. Crucifix synth small batch adaptogen jean shorts poke pour-over fixie tilde kogi disrupt brooklyn gluten-free cray put a bird on it.
</label>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="InputBlock InputBlock--centered InputBlock--checkbox col-child-align">
<input type="checkbox" id="inputblock07" name="" />
<label for="inputblock07">
<span class="InputBlock-button"></span>
Tacos normcore lo-fi irony, pok pok plaid.
</label>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="InputBlock InputBlock--centered InputBlock--checkbox col-child-align">
<input type="checkbox" id="inputblock08" name="" />
<label for="inputblock08">
<span class="InputBlock-button"></span>
Biodiesel readymade vexillologist, man bun craft.
</label>
</div>
</div>
</div>
<form class="Form">
<fieldset>
<div class="Radio">
<input type="radio" id="travellers1" name="travellers" />
<label for="travellers1">
<span class="Radio-button"></span>
Just me
</label>
</div>
<div class="Radio">
<input type="radio" id="travellers2" name="travellers" />
<label for="travellers2">
<span class="Radio-button"></span>
Me and this other guy
</label>
</div>
</fieldset>
<fieldset>
<div class="Radio Radio--inline">
<input type="radio" id="travellers3" name="travellers" />
<label for="travellers3">
<span class="Radio-button"></span>
Ninjas
</label>
</div>
<div class="Radio Radio--inline">
<input type="radio" id="travellers4" name="travellers" />
<label for="travellers4">
<span class="Radio-button"></span>
Pirates
</label>
</div>
</fieldset>
</form>
<form class="Form">
<fieldset>
<div class="Checkbox">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<span class="Checkbox-button"></span>
Yes, I like kittens
</label>
</div>
<div class="Checkbox Input-is-invalid">
<input type="checkbox" id="checkbox2" />
<label for="checkbox2">
<span class="Checkbox-button"></span>
Yes, I like birds
<span class="Input-message">You must like birds</span>
</label>
</div>
</fieldset>
<fieldset>
<div class="Checkbox Checkbox--inline">
<input type="checkbox" id="checkbox3" />
<label for="checkbox3">
<span class="Checkbox-button"></span>
I agree to the things
</label>
</div>
<div class="Checkbox Checkbox--inline">
<input type="checkbox" id="checkbox4" />
<label for="checkbox4">
<span class="Checkbox-button"></span>
I will pay the money
</label>
</div>
</fieldset>
</form>
The Navbar component is a horizontal navigation menu bar. It is composed of the following structure:
Navbar the main class around the navbar component.
Navbar-nav the navigation menu container
Navbar-brand the left-side of the main container which is always visible and usually contains the brand logo (BrandLogo component)
Navbar-toggle the toggle button that open and closes the navbar menu on tablet and mobile devices.
Navbar-icon the menu icon that is displayed on the toggle button.Navbar-menu the right-side of the main container that hold the menu items.
Navbar-primary the container for primary menu items on the left.Navbar-secondary the container for secondary menu items on the right.The primary and secondary menus have the following structure:
Navbar-item the top-level items on the navbar, this can be an <a> or <div>.
Navbar-link the anchor item for the dropdown menu. It displays an arrow to signify it has a dropdown menu.
Navbar-dropdown the dropdown menu container for navbar menu items and dividers
Navbar-menuitem the dropdown menu itemsNavbar-divider a horizontal line to separate navbar menu items.Note that for dropdown menus, you must:
Navbar-has-dropdown class on the Navbar-item, andinput.checkbox element between the Navbar-item and the Navbar-link. This allows collapsible menus in mobile view.If you want to keep the Navbar stuck to the top of the browser then apply Navbar-is-fixed to the <header> element.
<header class="Navbar">
<nav class="Navbar-nav" role="navigation" aria-label="main navigation" data-navbar>
<div class="Navbar-brand">
<a class="Navbar-item BrandLogo BrandLogo--responsive" href="/" title="Travel Insurance Direct">
</a>
<button class="Navbar-toggle" aria-label="menu" aria-expanded="false" data-navbar-toggle>
<div class="Navbar-icon"></div>
</button>
</div>
<div class="Navbar-menu">
<div class="Navbar-primary">
<a class="Navbar-item" href="#">Home</a>
<div class="Navbar-item Navbar-has-dropdown">
<input type="checkbox" />
<a class="Navbar-link">Plans</a>
<div class="Navbar-dropdown">
<a class="Navbar-menuitem" href="#">International travel</a>
<a class="Navbar-menuitem" href="#">Domestic travel</a>
<a class="Navbar-menuitem" href="#">Frequent travel</a>
</div>
</div>
</div>
<div class="Navbar-secondary">
<div class="Navbar-item Navbar-has-dropdown">
<input type="checkbox" />
<a class="Navbar-link">Destinations</a>
<div class="Navbar-dropdown">
<a class="Navbar-menuitem" href="#">Australia</a>
<a class="Navbar-menuitem" href="#">Bali</a>
<a class="Navbar-menuitem" href="#">Japan</a>
<a class="Navbar-menuitem" href="#">New Zealand</a>
<a class="Navbar-menuitem" href="#">United Kingdom</a>
<hr class="Navbar-divider" />
<a class="Navbar-menuitem" href="#"><strong>More destinations</strong></a>
</div>
</div>
<a class="Navbar-item" href="#">Customer service</a>
<a class="Navbar-item" href="#">
<svg class="Icon" title="user" role="img"><use xlink:href="#user"></use></svg>
My account
</a>
<div class="Navbar-item">
<a class="Btn Btn--primary Btn--sm" href="#">
Get a quote
</a>
</div>
</div>
</div>
</nav>
</header>
The Toggle is a section / content toggle mechanism.
It animates elements into an out of the page.
Best used with static elements.
Hella vexillologist master cleanse pour-over air plant. Lumbersexual cliche celiac hot chicken. Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia. Tilde meggings mumblecore wayfarers, actually post-ironic enamel pin. Live-edge tofu bicycle rights art party la croix. Lumbersexual slow-carb fam hammock. Vaporware selfies meditation, celiac fingerstache air plant small batch actually ethical.
<button id="showhidebutton" class="Btn">
Show/Hide
</button>
<div id="toggle" class="Toggle">
<p>Hella vexillologist master cleanse pour-over air plant. Lumbersexual cliche celiac hot chicken. Viral gastropub pickled, craft beer fixie succulents lumbersexual tofu mustache gentrify brooklyn chia. Tilde meggings mumblecore wayfarers, actually post-ironic enamel pin. Live-edge tofu bicycle rights art party la croix. Lumbersexual slow-carb fam hammock. Vaporware selfies meditation, celiac fingerstache air plant small batch actually ethical.</p>
</div>
<script type="text/javascript">
const btn = document.getElementById('showhidebutton');
const toggleEl = document.getElementById('toggle');
const visibleClass = 'Toggle-is-visible';
btn.addEventListener(
'click',
() =>
toggleEl.classList.contains(visibleClass)
? toggleEl.classList.remove(visibleClass)
: toggleEl.classList.add(visibleClass)
);
</script>
A tooltip module for showing additional content on mouseover. Intended to be used with javascript (not provided here - see e.g. the common angular tooltip directive) to position content properly.
<small class="Tooltip fineprint">
Kids go free!
<svg class="Icon Icon--circle Icon--md" role="img" title="info icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#info"></use>
</svg>
<div class="Tooltip-content">
This means your dependent children or grandchildren under the age of 21 at the date of policy issue who are travelling with
you.
</div>
</small>