Accordion
Custom override of the Foundation accordion component. Refer to Foundation docs as needed.
-
What’s covered when skiing or boarding?
We’ve tried to give you the freedom to learn or hone your snow skills by helping cover some of those nasty accidents. For further info, click here.
-
How do I get to the medical centre if I’m injured on the mountain?
Contact our emergency assistance team if you can so that they can help you off the mountain and to the care you need. You may wish to have ski patrol contact the team if you’re not feeling the best. For further info, click here.
-
What if the airline damages my board/skis?
If your board or skis are damaged by the airline, World Nomads can help cover some of the cost to replace them. For further info, click here.
-
Does my travel insurance cover medical costs upfront or do I have to pay and claim later?
If you’re hospitalized because of an accident, the insurer may help cover these costs upfront. For further info, click here.
<ul class="accordion" data-accordion>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">What’s covered when skiing or boarding?</a>
<div class="accordion-content" data-tab-content>
We’ve tried to give you the freedom to learn or hone your snow skills by helping cover some of those nasty accidents. For further info, <a href="https://helpdesk.worldnomads.com/customer/en_us/portal/articles/2405914-travel-insurance-am-i-covered-for-skiing-snowboarding-?b_id=12919">click here</a>.
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">How do I get to the medical centre if I’m injured on the mountain?</a>
<div class="accordion-content" data-tab-content>
Contact our emergency assistance team if you can so that they can help you off the mountain and to the care you need. You may wish to have ski patrol contact the team if you’re not feeling the best. For further info, <a href="https://helpdesk.worldnomads.com/customer/en_us/portal/articles/2402019-travel-insurance-and-medical-transport-evacuation-and-repatriation?b_id=12919">click here</a>.
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">What if the airline damages my board/skis?</a>
<div class="accordion-content" data-tab-content>
If your board or skis are damaged by the airline, World Nomads can help cover some of the cost to replace them. For further info, <a href="https://helpdesk.worldnomads.com/customer/en_us/portal/articles/2408663-am-i-covered-if-my-bags-have-been-damaged-?b_id=12919">click here</a>.
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Does my travel insurance cover medical costs upfront or do I have to pay and claim later?</a>
<div class="accordion-content" data-tab-content>
If you’re hospitalized because of an accident, the insurer may help cover these costs upfront. For further info, <a href="https://helpdesk.worldnomads.com/customer/en_us/portal/articles/2411297-does-my-travel-insurance-cover-medical-costs-upfront-or-do-i-have-to-pay-and-claim-later-?b_id=12919">click here</a>.
</div>
</li>
</ul>
Accordion Section
The Accordion Section module is used to create collapsible content sections.
This is some content that users may not want to see.
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.
This is some content that users may not want to see.
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.
<div class="AccordionSection nst-component">
<button class="AccordionSection-title nst-toggle">Collapsible Section Heading</button>
<div class="nst-content">
<div class="AccordionSection-inner">
<h3>This is some content that users may not want to see.</h3>
<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>
</div>
</div>
<div class="AccordionSection nst-component nst-is-collapsed">
<button class="AccordionSection-title nst-toggle">Collapsible Section Heading</button>
<div class="nst-content">
<div class="AccordionSection-inner">
<h3>This is some content that users may not want to see.</h3>
<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>
</div>
</div>
Alert & Notifications
Alerts should be used to dynamically to make the user aware of important information, such as server issues, changes to pricing, etc.
Notes: * Use the sub-module Alert--fade to auto fade out alerts. * To use the default close mechanism add data-alert-close to the alert close button.
Alert Success: an abundance of deconstructions concerning neocapitalist materialism may be discovered.
Alert Info: the subject is contextualised into a social realism.
Alert Warning: a number of constructivisms concerning the role of the poet as observer exist.
Socialism
Capitalist Narratives
Alert Error: It could be said that if neocapitalist materialism holds, the works of Spelling are an example of mythopoetical Marxism. The main theme of the works of Spelling is not, in fact, discourse, but neodiscourse.<div class="Alert Alert--success">
<button class="Alert-close IconBtn IconBtn--close" data-alert-close></button>
Alert Success: an abundance of deconstructions concerning <a href="">neocapitalist materialism</a> may be discovered.
</div>
<div class="Alert Alert--info">
<button class="Alert-close IconBtn IconBtn--close"></button>
Alert Info: the subject is contextualised into a <a href="">social realism</a>.
</div>
<div class="Alert Alert--warning">
<p>Alert Warning: a number of constructivisms concerning the role of the <a href="">poet as observer</a> exist.</p>
<button class="Alert-lastItem button small">Do something</button>
</div>
<div class="Alert Alert--error">
<span class="Alert-label">Socialism</span>
<h4 class="Alert-title">Capitalist Narratives</h4>
Alert Error: It could be said that if neocapitalist materialism holds, the works of Spelling are an <a href="">example of mythopoetical Marxism</a>. The main theme of the works of Spelling is not, in fact, discourse, but neodiscourse.
</div>
Alert Notifications
Alert Notifications demand an additional level of attention from users. As such they are floated above all content at the bottom (right on desktop), of the users screen.
The AlertNotifications wrapper module is required. The --fade sub-module is not required though it is recommended.
Fail
You've broken the thing!
Alert Notification Error: thus, if subcultural dialectic theory holds, we have to choose between deconstructivist theory and Derridaist reading.<div class="patternLib-notifications">
<div class="AlertNotifications AlertNotifications--fade">
<div class="Alert Alert--error">
<button class="Alert-close IconBtn IconBtn--close Icon--reverse" data-alert-close></button>
<span class="Alert-label">Fail</span>
<h4 class="Alert-title">You've broken the thing!</h4>
Alert Notification Error: thus, if <a href="">subcultural dialectic theory holds</a>, we have to choose between deconstructivist theory and Derridaist reading.
</div>
</div>
</div>
App Store Button
The AppStore module displays an app store download button in any part of the site where it is applied. Currently we only have a version for the iTunes App Store. The link used should have no content text.
Autocomplete
The Autocomplete modal lets you pass in an array whioh it uses to autocomplete. Only used by Sheepgate currently.
<form class="Sheepgate-form">
<div class="Input Input--icon">
<label>Search for your country of residence</label>
<div class="Input-field">
<span id="Sheepgate-country-icon" class="Input-icon Icon--sml Sheepgate-icon Icon--square icon-wn-globe"></span>
<input placeholder="e.g. United Kingdom, Australia" type="text" name="location-autocomplete"
id="location-autocomplete" tabindex="1" autocomplete="off" class="Sheepgate-input" />
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('input[name="location-autocomplete"]').autoComplete({
minChars: 1,
source: function (term, suggest) {
term = term.toLowerCase();
var countryList = ["Australia", "India", "Canada", "Japan"];
var matches = [];
for (i = 0; i < countryList.length; i++)
if (~countryList[i].toLowerCase().indexOf(term)) matches.push(countryList[i]);
suggest(matches);
}
});
});
</script>
Bread Crumbs
The BreadCrumb module is built to comply with the Google Structured Data specification.
<ol id="breadcrumbs" itemtype="http://schema.org/BreadcrumbList" class="BreadCrumb">
<li itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/travel-safety">
<span itemprop="name">Travel Safety</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/travel-safety/eastern-europe">
<span itemprop="name">Eastern Europe</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
<div class="patternLib-breadcrumb callout reverse">
<ol id="breadcrumbs" itemtype="http://schema.org/BreadcrumbList" class="BreadCrumb BreadCrumb--reverse">
<li itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/travel-safety">
<span itemprop="name">Travel Safety</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="/travel-safety/eastern-europe">
<span itemprop="name">Eastern Europe</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
</div>
Buttons
Button styles can be applied to <a> or <button> elements.
If your button is a link to another page or anchor, please use the <a> element. While if your button performs an action, such as submitting a form or triggering a javascript function, then use a <button> element.
Button Themes
Button themes should be chosen based on hierarchical usage. Primary button is used as the main cta on a page and should ideally be used once only.
Any other buttons or anchors need to be secondary, default or alterantive. When used on a background colour or image, the alternative button is the preferred choice.
<a class="button primary" href="">Button Primary</a>
<button class="button secondary">Button Secondary</button>
<button class="button">Button / Button Tertiary</button>
<button class="button arrow">Button Arrow</button>
<button class="button alt-dark">Button Alt-dark</button>
<button class="button anchor">Button Anchor</button>
<span>This is an <button class="button anchor anchor--inline">Button Anchor Inline</button></span>
<div class="row">
<div class="patternLib-buttons-light small-12 column">
<button class="button alt-light">Button Alt-light</button>
</div>
</div>
Button Sizes
<button class="button small">Button Small</button>
<button class="button">Button</button>
<button class="button large">Button Large</button>
Button Sizes with Icon
<button class="button small"><span class="button-icon icon-wn-play"></span> Button Small</button>
<button class="button"><span class="button-icon icon-wn-search"></span> Button</button>
<button class="button large"><span class="button-icon icon-wn-tag"></span> Button Large</button>
Functional States
<button class="button disabled">Button Disabled</button>
<button class="button processing">Button processing</button>
<button class="button button--toggle alt-dark">Show</button>
<button class="button button--toggle button--toggle-is-active alt-dark">Hide</button>
Button group
<div class="button-group">
<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
</div>
Social Buttons
Social Buttons can be used individually or as part of the Social Share module.
<button class="SocialBtn SocialBtn-facebook">
<span class="SocialButton-label">Facebook</span>
<span class="icon-wn-facebook"></span>
</button>
<button class="SocialBtn SocialBtn-twitter">
<span class="SocialButton-label">Twitter</span>
<span class="icon-wn-twitter"></span>
</button>
<button class="SocialBtn SocialBtn-pinterest">
<span class="icon-wn-pinterest-p"></span>
</button>
<button class="SocialBtn SocialBtn-googleplus">
<span class="icon-wn-google-plus"></span>
</button>
<button class="SocialBtn SocialBtn-linkedin">
<span class="icon-wn-linkedin"></span>
</button>
<button class="SocialBtn SocialBtn-stumbleupon">
<span class="icon-wn-stumbleupon"></span>
</button>
DatePicker
The Datepicker can be used to enable multiple or single day selection.
<input type="text" id="datepicker" placeholder="Tue, 5 Nov 2019"/>
<script>
setTimeout(function(){
// Set theme to WN - needs to be done only once when package loads.
mobiscroll.customTheme('WN', 'material');
mobiscroll.calendar('#datepicker',{
display: 'center',
theme: 'WN',
dateFormat: 'D, d M yy',
buttons: ['set', 'cancel'],
weekDays: 'short',
});
},2000);
</script>
The Range can be used to choose range of dates, used for trip date selection.
<input type="text" id="rangePicker" placeholder="Tue, 5 Nov 2019"/>
<script>
setTimeout(function(){
mobiscroll.range('#rangePicker',{
display: 'center',
theme: 'WN',
dateFormat: 'D, d M yy',
buttons: ['set', 'cancel'],
weekDays: 'short',
});
},2000);
</script>
Filter
A simple JavaScript-based filter component. It has an unordered list of categories, and items that are categorized in another unordered list below it.
Use the data-filter-tag attribute to define the categories, then use the data-filter attribute to categorize each data object into a respective category.
Categories require the js-filter class, and objects require the js-filter-item class.
You can specify a category with an empty data-filter-tag attribute. If you do, the filter script will unfilter and display every item. This is generally best used as the default selected item.
- All
- Filter 1
- Filter 2
- Object 1 [Filter1]
- Object 2 [Filter1]
- Object 3 [Filter2]
- Object 4 [Filter2]
<div class="Filter">
<ul class="Filter-category">
<li class="Filter-item js-filter Filter-is-selected" data-filter-tag="">All</li>
<li class="Filter-item js-filter" data-filter-tag="Filter1">Filter 1</li>
<li class="Filter-item js-filter" data-filter-tag="Filter2">Filter 2</li>
</ul>
<ul class="Filter-objects">
<li class="js-filterItem" data-filter-item="Filter1">Object 1 [Filter1]</li>
<li class="js-filterItem" data-filter-item="Filter1">Object 2 [Filter1]</li>
<li class="js-filterItem" data-filter-item="Filter2">Object 3 [Filter2]</li>
<li class="js-filterItem" data-filter-item="Filter2">Object 4 [Filter2]</li>
</ul>
</div>
Form Default Elements
Forms use the default Foundation form library. Some components have been customised and others have been unused. If it's in this pattern library, it's safe to use.
<form>
<fieldset>
<legend>Basic Form Elements</legend>
<label>
Input
<input type="text" placeholder="steve@email.com" />
</label>
<label for="textInput">
Input
<input id="textInput" type="text" placeholder="steve@email.com" />
</label>
<label class="Input">
Input with help text
<input class="Input-field" type="password" aria-describedby="passwordHelpText" />
<span class="help-text">Your password must have at least 10 characters, a number, and an Emoji.</span>
</label>
<label class="Input">Text Area
<textarea class="Input-field" rows="4"></textarea>
<span class="help-text">0 of 30,000,000 sentences</span>
</label>
<label>Select Menu
<select>
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="spain">Spain</option>
</select>
</label>
<label>Multiple Select Menu
<select multiple>
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="spain">Spain</option>
</select>
</label>
</fieldset>
</form>
<form>
<fieldset>
<legend>Inline Inputs and Buttons</legend>
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="number" />
<div class="input-group-button">
<input type="submit" class="button primary" value="Submit" />
</div>
</div>
<div class="input-group input-group--mono">
<input class="input-group-field" type="number">
<div class="input-group-button">
<input type="submit" class="button" value="Submit" />
</div>
</div>
<div class="input-group input-group--increment">
<div class="input-group-button">
<button class="button alt-dark">
<span class="icon-wn-minus"></span>
</button>
</div>
<input class="input-group-field" type="number" value="300">
<div class="input-group-button">
<button class="button alt-dark">
<span class="icon-wn-plus"></span>
</button>
</div>
</div>
</fieldset>
</form>
<form>
<fieldset>
<legend>Forms using the grid</legend>
<div class="flexrow">
<div class="col-sm-6">
<label>Field 1
<input type="text" />
</label>
</div>
<div class="col-sm-3">
<label>Field 2
<input type="text" />
</label>
</div>
<div class="col-sm-3">
<label>Field 3
<input type="text" />
</label>
</div>
</div>
<div class="flexrow">
<div class="col-sm-8">
<label>Field 4
<input type="text" />
</label>
</div>
<div class="col-sm-4">
<span class="Form-rowOffset">Offset item</span>
</div>
</div>
<div class="flexrow">
<div class="col-sm-4">
<label>Field 5
<input type="text" />
</label>
</div>
<div class="col-sm-4">
<label class="Input">
<span class="is-not-visible">Users can't see me</span>
<input class="Input-field" type="text" placeholder="Offset input" />
</label>
</div>
<div class="col-sm-4">
<label>Field 6
<input type="text" />
</label>
</div>
</div>
<div class="flexrow">
<div class="col-sm-8">
<label>Field 4
<input type="text">
</label>
</div>
<div class="col-sm-4">
<span class="Form-rowOffset">Offset item</span>
</div>
</div>
</fieldset>
</form>
<div class="flexrow center-md">
<div class="col-sm-12">
<form class="inline-form">
<fieldset>
<legend><h4>More stories from our Nomads?</h4></legend>
<div class="callout dynamic-form">
<div class="flexrow bottom-sm">
<div class="col-sm-12 col-md-4">
<label>Email</label>
<div class="form-field-element form-field-element-email-field">
<input type="text" placeholder="your@email.com"/>
</div>
</div>
<div class="col-sm-12 col-md-4">
<label>Where are you from?</label>
<div class="form-field-element form-field-element-enumeration">
<select>
<option value="">Please select</option>
<option value="Australia">Australia</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="form-field-element form-field-element-button">
<button class="button primary">Subscribe now</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Form Input Module & Validation
You'll need to create custom validation controls for these, until we can work on a more modular approach.
<form>
<fieldset>
<div class="callout validation">
<ul>
<li>Please enter a valid password</li>
<li>Please select a dropdown value</li>
</ul>
</div>
<div class="Input Input--required">
<label for="input-required" class="Input-label">Required field</label>
<input id="input-required" class="Input-field" type="text" aria-required="true" />
</div>
<div class="Input">
<label for="input-date" class="Input-label">Button field</label>
<button type="button" id="input-date" class="Input-field Input-buttonField">
29 Jan 2018
</button>
</div>
<div class="Input">
<label for="input-country" class="Input-label">Select with placeholder</label>
<select id="input-country" class="Input-field" required>
<option value hidden>Choose a country</option>
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="spain">Spain</option>
</select>
</div>
<div class="Input Input-is-valid">
<label for="input-email" class="Input-label">Input Validation Success</label>
<input id="input-email" class="Input-field" type="email" placeholder="steve@email.com" />
</div>
<div class="Input Input-is-valid">
<label for="input-country2" class="Input-label">Multiple Select Menu</label>
<select id="input-country2" class="Input-field" multiple>
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="spain">Spain</option>
</select>
</div>
<div class="Input Input-is-invalid">
<label for="input-email2" class="Input-label">Input Validation Failure</label>
<input id="input-email2" class="Input-field" type="text" placeholder="steve@email.com" />
<span class="Input-message">Please enter a valid email address</span>
</div>
<div class="Input Input-is-invalid Input--reverse">
<label for="input-email3" class="Input-label">Reverse text color - Validation Failure</label>
<input id="input-email3" class="Input-field" type="text" placeholder="steve@email.com" />
<span class="Input-message">Please enter a valid email address</span>
</div>
<div class="Input Input-is-invalid">
<label for="input-password" class="Input-label">Input Validation with help text</label>
<input id="input-password" class="Input-field" type="text" />
<span class="help-text">Your password must have at least 10 characters, a number, and an Emoji.</span>
<span class="Input-message">Please enter a valid password</span>
</div>
<div class="Input Input-is-invalid">
<label for="input-country3" class="Input-label">Multiple Select Menu</label>
<select id="input-country3" class="Input-field" multiple>
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="spain">Spain</option>
</select>
<span class="Input-message">Please select one or more options</span>
</div>
<div class="Input Input-is-invalid">
<label for="input-email3" class="Input-label">Email a quote</label>
<div class="input-group">
<input id="input-email3" class="input-group-field Input-field" type="email">
<div class="input-group-button">
<input type="submit" class="button primary" value="Submit">
</div>
</div>
<span class="Input-message">Please use an actual email</span>
</div>
</fieldset>
</form>
Form, Steps & Pagination
The Form module featuring stylised form steps (fieldsets), and the FormPagination module.
Note: The html fieldset element can be replaced with a div, though this is not advised for semantic reasons. Use Form-indent for elements required to be outside of fieldsets but matching the fieldset indent.
<div class="FormPagination FormPagination--centered">
<a href="#step1" class="FormPagination-step FormPagination-step-is-active">
<span class="FormPagination-icon Icon--md Icon--circle"></span>
</a>
<a href="#step2" class="FormPagination-step">
<span class="FormPagination-icon Icon--md Icon--circle"></span>
</a>
</div>
<form class="Form">
<fieldset class="Form-fieldset SectionBreak">
<div class="Form-legend">
<legend>Your travel Details</legend>
</div>
<label>
Input <span class="copy-is-required">*</span>
<input type="text" placeholder="steve@email.com" />
</label>
<label>Select Menu
<select>
<option value="australia">Australia</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="spain">Spain</option>
</select>
</label>
</fieldset>
<div class="Form-indent">
<label class="Form-label">Upload a cover image for your video. Less than 1mb in size, 800 * 600 pixels in dimension.</label>
<button class="Form-label-sibling button">Selet image to upload</button>
</div>
<fieldset class="Form-fieldset SectionBreak">
<div class="Form-legend">
<legend>Your Options</legend>
</div>
<div class="Checkbox Checkbox--blocks">
<span class="Form-label">Forgetting Lyotard <span class="copy-is-required">*</span></span>
<div class="Checkbox-wrapper">
<span class="Checkbox-input">
<input type="checkbox" id="check8" />
<label for="check8">
<span class="Checkbox-button"></span>
An abundance of theories
</label>
</span>
<span class="Checkbox-input">
<input type="checkbox" id="check9" />
<label for="check9">
<span class="Checkbox-button"></span>
The textual paradigm of narrative
</label>
</span>
<span class="Checkbox-input">
<input type="checkbox" id="check10" />
<label for="check10">
<span class="Checkbox-button"></span>
Constructivism and textual postcultural theory
</label>
</span>
</div>
</div>
<div class="Radio Radio--blocks">
<span class="Form-label">Dialectic deappropriation</span>
<div class="Radio-wrapper">
<div class="Radio-input">
<input type="radio" id="radio12" name="radio4" />
<label for="radio12">
<span class="Radio-button"></span>
The subject is interpolated
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio13" name="radio4" />
<label for="radio13">
<span class="Radio-button"></span>
Dialectic deappropriation to analyse and read society
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio14" name="radio4" />
<label for="radio14">
<span class="Radio-button"></span>
Several sublimations concerning constructivism exist
</label>
</div>
</div>
</div>
</fieldset>
<div class="Form-indent">
<button class="button primary arrow">Submit</button>
</div>
</form>
Form Radio Buttons
Radio buttons let a user select ONE of a limited number of choices.
<form>
<fieldset>
<div class="Radio">
<input type="radio" id="radio01" name="radio" checked />
<label for="radio01">
<span class="Radio-button"></span>
Option 1
</label>
</div>
<div class="Radio">
<input type="radio" id="radio02" name="radio" />
<label for="radio02">
<span class="Radio-button"></span>
Option 2
</label>
</div>
<div class="Radio">
<input type="radio" id="radio03" name="radio" />
<label for="radio03">
<span class="Radio-button"></span>
Option 3
</label>
</div>
</fieldset>
<fieldset>
<div class="Radio Radio--inline">
<input type="radio" id="radio04" name="radio2" checked />
<label for="radio04">
<span class="Radio-button"></span>
Option 1
</label>
</div>
<div class="Radio Radio--inline">
<input type="radio" id="radio05" name="radio2" />
<label for="radio05">
<span class="Radio-button"></span>
Option 2
</label>
</div>
<div class="Radio Radio--inline">
<input type="radio" id="radio06" name="radio2" />
<label for="radio06">
<span class="Radio-button"></span>
Option 3
</label>
</div>
</fieldset>
</form>
Use the Radio--blocks sub-module for a better experience for mobile users.
<form>
<fieldset>
<div class="Radio Radio--blocks">
<span class="Form-label">Radio--blocks sub-module</span></span>
<div class="Radio-wrapper">
<div class="Radio-input">
<input type="radio" id="radio07" name="radio3" />
<label for="radio07">
<span class="Radio-button"></span>
In a sense, Marx suggests the use of precultural Marxism to attack hierarchy.
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio08" name="radio3" />
<label for="radio08">
<span class="Radio-button"></span>
Subject is interpolated
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio09" name="radio3" />
<label for="radio09">
<span class="Radio-button"></span>
Read and attack consciousness
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio10" name="radio3" />
<label for="radio10">
<span class="Radio-button"></span>
Precultural libertarianism
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio11" name="radio3" />
<label for="radio11">
<span class="Radio-button"></span>
Premise of social realism
</label>
</div>
</div>
</div>
</fieldset>
<span class="Form-label">Radio--images sub-module</span></span>
Use the Radio--images with Radio--blocks for radio checkboxes with images. E.g. for the Guide2Go Scholarship
Fits 3 in a row on desktop and 2 on mobile.
<fieldset>
<div class="Radio Radio--blocks Radio--images">
<div class="Radio-wrapper">
<div class="Radio-input">
<input type="radio" id="radio21" name="radio20" />
<div class="Radio-image">
<img
src="https://media.worldnomads.com/testing/cover_australia.jpg"
alt="cover australia"
/>
</div>
<label for="radio21">
<span class="Radio-button"></span> The insider's guide to
Vietnam, Cambodia & Laos
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio20" name="radio20" />
<div class="Radio-image">
<img
src="https://media.worldnomads.com/testing/cover_colombia.jpg"
alt="cover colombia"
/>
</div>
<label for="radio20">
<span class="Radio-button"></span> Colombia The Insider's Guide
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio23" name="radio20" />
<div class="Radio-image">
<img
src="https://media.worldnomads.com/testing/cover_colombia.jpg"
alt="cover japan"
/>
</div>
<label for="radio23">
<span class="Radio-button"></span> Colombia The Insider's Guide
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio17" name="radio20" />
<div class="Radio-image">
<img
src="https://media.worldnomads.com/testing/cover_usa.jpg"
alt="cover japan"
/>
</div>
<label for="radio17">
<span class="Radio-button"></span> USA Where Nomads Go
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio15" name="radio20" />
<div class="Radio-image">
<img
src="https://media.worldnomads.com/testing/cover_vietnam_cambodia_laos.jpg"
alt="cover japan"
/>
</div>
<label for="radio15">
<span class="Radio-button"></span> Vietnam Cambodia & Laos The Insider's Guide
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio16" name="radio20" />
<div class="Radio-image">
<img
src="https://media.worldnomads.com/testing/cover_australia.jpg"
alt="cover australia"
/>
</div>
<label for="radio16">
<span class="Radio-button"></span> Australia The Insider's Guide
</label>
</div>
</div>
</div>
</fieldset>
</form>
Validation applies a border around a list of checkboxes and displays an error message. Requires the Input-is-invalid class for the error message styling.
<form>
<fieldset>
<div class="Radio Radio--blocks Radio-is-valid">
<span class="Form-label">Valid Radio blocks</span>
<div class="Radio-wrapper">
<div class="Radio-input">
<input type="radio" id="radio22" name="radio4" />
<label for="radio22">
<span class="Radio-button"></span>
In a sense, Marx suggests the use of precultural Marxism to attack hierarchy.
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio23" name="radio4" />
<label for="radio23">
<span class="Radio-button"></span>
Subject is interpolated
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio24" name="radio4" />
<label for="radio24">
<span class="Radio-button"></span>
Read and attack consciousness
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio15" name="radio4" />
<label for="radio15">
<span class="Radio-button"></span>
Precultural libertarianism
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio16" name="radio4" />
<label for="radio16">
<span class="Radio-button"></span>
Premise of social realism
</label>
</div>
</div>
</div>
<div class="Radio Radio--blocks Radio-is-invalid">
<span class="Form-label">Invalid Radio blocks</span>
<div class="Radio-wrapper">
<div class="Radio-input">
<input type="radio" id="radio17" name="radio5" />
<label for="radio17">
<span class="Radio-button"></span>
In a sense, Marx suggests the use of precultural Marxism to attack hierarchy.
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio18" name="radio5" />
<label for="radio18">
<span class="Radio-button"></span>
Subject is interpolated
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio19" name="radio5" />
<label for="radio19">
<span class="Radio-button"></span>
Read and attack consciousness
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio20" name="radio5" />
<label for="radio20">
<span class="Radio-button"></span>
Precultural libertarianism
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio21" name="radio5" />
<label for="radio21">
<span class="Radio-button"></span>
Premise of social realism
</label>
</div>
</div>
<span class="Radio-message">Please select at least one option.</span>
</div>
</fieldset>
</form>
Use the Radio--overlap sub-module with Radio--blocks to overlay the button over the content.
<form>
<fieldset>
<div class="Radio Radio--blocks Radio--overlap">
<span class="Form-label">Radio--overlap sub-module</span></span>
<div class="Radio-wrapper">
<div class="Radio-input">
<input type="radio" id="radio31" name="radio6" />
<label for="radio31">
<span class="Radio-button"></span>
<picture class="Avatar Avatar--lge">
<source srcset="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg"/>
<img src="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg" alt="Richard's Profile Image"/>
</picture>
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio32" name="radio6" />
<label for="radio32">
<span class="Radio-button"></span>
<picture class="Avatar Avatar--lge">
<source srcset="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg"/>
<img src="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg" alt="Richard's Profile Image"/>
</picture>
</label>
</div>
<div class="Radio-input">
<input type="radio" id="radio33" name="radio6" />
<label for="radio33">
<span class="Radio-button"></span>
<picture class="Avatar Avatar--lge">
<source srcset="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg"/>
<img src="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg" alt="Richard's Profile Image"/>
</picture>
</label>
</div>
</div>
<span class="Radio-message">Please select at least one option.</span>
</div>
</fieldset>
</form>
Use Radio-blocks with list
<form>
<fieldset>
<div class="Radio Radio--blocks Radio-is-valid">
<div class="Radio-wrapper">
<div class="Radio-input">
<input name="option0" type="radio" id="option01">
<label for="option01">
<span class="Radio-button"></span>
Level 1
<ul class="Radio-input-list">
<li>
professional / clerical or administrative work / working as a classroom teacher
/ classroom assistant / au pair / nanny or child minder
</li>
<li>cross country / Nordic skiing on marked trails</li>
<li>snowblading</li>
</ul>
</label>
</div>
<div class="Radio-input">
<input name="option0" type="radio" id="option02">
<label for="option02">
<span class="Radio-button"></span>
Level 2
<ul class="Radio-input-list">
<li>dry slope</li>
<li>cross country / Nordic skiing on marked trails</li>
<li>snowblading</li>
</ul>
</label>
</div>
<div class="Radio-input">
<input name="option0" type="radio" id="option03">
<label for="option03">
<span class="Radio-button"></span>
Level 3
<ul class="Radio-input-list">
<li>up to 6,000 metres on recognised routes</li>
</ul>
</label>
</div>
</div>
</div>
</fieldset>
</form>
Form Checkboxes
The custom Checkbox allows you to select a single value for submission in a form (or not).
Note: callout reverse used for presentation purposes only.
<form>
<div class="Checkbox">
<input type="checkbox" id="check1" />
<label for="check1">
<span class="Checkbox-button"></span>
Checkbox
</label>
</div>
<span class="Form-label">Invalid Checkbox</span>
<div class="Checkbox Checkbox-is-invalid">
<input type="checkbox" id="check2" />
<label for="check2">
<span class="Checkbox-button"></span>
<span class="Form-label">
Checkbox with an exceptionally long label that probably spans multiple lines... small batch coloring book readymade lo-fi, mixtape hella 3 wolf moon gluten-free.
</span>
</label>
</div>
<span class="Form-label">Checkbox - reverse text & links color</span>
<div class="callout reverse">
<div class="Checkbox Checkbox--reverse">
<input type="checkbox" id="check3" />
<label for="check3">
<span class="Checkbox-button"></span>
<span class="Form-label">
I agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Use.</a>
</span>
</label>
</div>
</div>
</form>
Inline Checkboxes
<form>
<div class="Checkbox Checkbox--inline">
<input type="checkbox" id="check23" />
<label for="check23">
<span class="Checkbox-button"></span>
Cats
</label>
</div>
<div class="Checkbox Checkbox--inline">
<input type="checkbox" id="check24" />
<label for="check24">
<span class="Checkbox-button"></span>
Dogs
</label>
</div>
<div class="Checkbox Checkbox--inline">
<input type="checkbox" id="check25" />
<label for="check25">
<span class="Checkbox-button"></span>
Lamas
</label>
</div>
</form>
Checkbox Blocks
Multiple checkboxes can be implemented to mimic a multiselect, in a highly mobile friendly fashion. The Checkbox--blocks sub-module is a good candidate for this.
Note: Checkbox--blocks are not recommended for use within grid-columns < 12.
<form>
<div class="Checkbox Checkbox--blocks">
<span class="Form-label">Multiple Checkboxes with the Checkbox--blocks sub-module</span>
<div class="Checkbox-wrapper">
<div class="Checkbox-input">
<input type="checkbox" id="check3" />
<label for="check3">
<span class="Checkbox-button"></span>
In the works of Stone, a predominant concept is the concept of subconstructive art.
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check4" />
<label for="check4">
<span class="Checkbox-button"></span>
Neodialectic theory
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check5" />
<label for="check5">
<span class="Checkbox-button"></span>
Batailleist `powerful communication’
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check6" />
<label for="check6">
<span class="Checkbox-button"></span>
Truth as a paradox
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check7" />
<label for="check7">
<span class="Checkbox-button"></span>
Semiotic paradigm
</label>
</div>
</div>
</div>
<div class="Checkbox Checkbox--blocks Checkbox--expanded">
<span class="Form-label">Full width Checkbox--blocks, using the Checkbox--expanded sub-module</span>
<div class="Checkbox-wrapper">
<div class="Checkbox-input">
<input type="checkbox" id="check11" />
<label for="check11">
<span class="Checkbox-button"></span>
Postcapitalist cultural theory and subcapitalist nationalism.
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check12" />
<label for="check12">
<span class="Checkbox-button"></span>
Joyce examines textual discourse.
</label>
</div>
</div>
</div>
</form>
Validation applies a border around a list of checkboxes and displays an error message. Requires the Input-is-invalid class for the error message styling.
<form>
<fieldset>
<div class="Checkbox Checkbox--blocks Checkbox-is-valid">
<span class="Form-label">Valid Checkbox List</span>
<div class="Checkbox-wrapper">
<div class="Checkbox-input">
<input type="checkbox" id="check13" />
<label for="check13">
<span class="Checkbox-button"></span>
In the works of Stone, a predominant concept is the concept of subconstructive art.
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check14" />
<label for="check14">
<span class="Checkbox-button"></span>
Neodialectic theory
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check15" />
<label for="check15">
<span class="Checkbox-button"></span>
Batailleist `powerful communication’
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check16" />
<label for="check16">
<span class="Checkbox-button"></span>
Truth as a paradox
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check17" />
<label for="check17">
<span class="Checkbox-button"></span>
Semiotic paradigm
</label>
</div>
</div>
</div>
<div class="Checkbox Checkbox--blocks Checkbox-is-invalid">
<span class="Form-label">Invalid Checkbox List</span>
<div class="Checkbox-wrapper">
<div class="Checkbox-input">
<input type="checkbox" id="check18" />
<label for="check18">
<span class="Checkbox-button"></span>
In the works of Stone, a predominant concept is the concept of subconstructive art.
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check19" />
<label for="check19">
<span class="Checkbox-button"></span>
Neodialectic theory
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check20" />
<label for="check20">
<span class="Checkbox-button"></span>
Batailleist `powerful communication’
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check21" />
<label for="check21">
<span class="Checkbox-button"></span>
Truth as a paradox
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check22" />
<label for="check22">
<span class="Checkbox-button"></span>
Semiotic paradigm
</label>
</div>
</div>
<span class="Checkbox-message">Please select at least one option.</span>
</div>
</fieldset>
</form>
Use the Checkbox--overlap sub-module with Checkbox--blocks to overlay the button over the content.
<form>
<fieldset>
<div class="Checkbox Checkbox--blocks Checkbox--overlap">
<span class="Form-label">Checkbox--overlap sub-module</span></span>
<div class="Checkbox-wrapper">
<div class="Checkbox-input">
<input type="checkbox" id="check31" name="check6" />
<label for="check31">
<span class="Checkbox-button"></span>
<picture class="Avatar Avatar--lge">
<source srcset="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg"/>
<img src="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg" alt="Richard's Profile Image"/>
</picture>
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check32" name="check6" />
<label for="check32">
<span class="Checkbox-button"></span>
<picture class="Avatar Avatar--lge">
<source srcset="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg"/>
<img src="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg" alt="Richard's Profile Image"/>
</picture>
</label>
</div>
<div class="Checkbox-input">
<input type="checkbox" id="check33" name="check6" />
<label for="check33">
<span class="Checkbox-button"></span>
<picture class="Avatar Avatar--lge">
<source srcset="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg"/>
<img src="https://cdn.worldnomads.net/Media/Default/LearnImages/photo2016/wn-prfl-richard.jpg" alt="Richard's Profile Image"/>
</picture>
</label>
</div>
</div>
<span class="Checkbox-message">Please select at least one option.</span>
</div>
</fieldset>
</form>
Form Switches
<form>
<div class="Switch">
<input type="checkbox" id="switch1" />
<label for="switch1"></label>
Switch
</div>
<div class="Switch Switch--yesNo">
<input type="checkbox" id="switch2" />
<label for="switch2"></label>
Yes or No Switch
</div>
</form>
Icon Buttons
The IconBtn, previously CloseBtn. Turn icons from the icon set into a button.
New icons need to be added manually via the module file.
<button class="IconBtn IconBtn--close">Close</button>
<button class="IconBtn IconBtn--edit">Edit</button>
<button class="IconBtn IconBtn--delete">Delete</button>
<div class="callout reverse">
<button class="IconBtn IconBtn--close IconBtn--reverse">Close</button>
</div>
Pagination
The pagination component is implemented based on the markup specified in the Pager component HTML in the NomadsFoundation Orchard theme.
<div class="Pagination Pagination--center">
<ul class="Pagination-inner">
<li><a href="#" class="Pagination-first"></a></li>
<li><a href="#" class="Pagination-previous"></a></li>
<li><span class="Pagination-ellipsis"></span></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><span class="Pagination-current">4</span></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><span class="Pagination-ellipsis"></span></li>
<li><a href="#" class="Pagination-next"></a></li>
<li><a href="#" class="Pagination-last"></a></li>
</ul>
</div>
Page Progress
The Page Progress module is used to denote the progress of a user across multiple views, typically for multi-page forms.
- Step 1.
- Step 2.
- Step 3.
- Step 4.
- Step 5.
<ol class="PgProgress">
<li class="PgProgress-is-complete">Step 1.</li>
<li class="PgProgress-is-current">Step 2.</li>
<li>Step 3.</li>
<li>Step 4.</li>
<li>Step 5.</li>
</ol>
Pill
The Pill module. Typically used in the country selector.
New Zealand
Sweden
Croatia
<span class="Pill">
New Zealand
</span>
<span class="Pill Pill--primary">
<span class="Pill-label">Sweden</span>
<button class="Pill-close IconBtn IconBtn--close IconBtn--reverse"></button>
</span>
<span class="Pill Pill--secondary">
<span class="Pill-label">Croatia</span>
<button class="Pill-close IconBtn IconBtn--close IconBtn--reverse"></button>
</span>
PlaceAutoComplete
The PlaceAutoComplete module. Used for customizing the style autocomplete dropdown of Google's places API. Places API is used in address fields of angular purchase path.
Play Overlay & Lity
The Play overlay module can be applied to any inline-block or block element. Typical usage is to combine it with the Lity plugin to create a media lightbox.
Note: you may need the .Play--ie class if your Play module is overflowing the grid in Internet Explorer.
<a class="Play" href="https://www.youtube.com/watch?v=QtY2L2UShyA?autohide=1&showinfo=0&controls=0" title="Play media" data-lity>
<img src="https://cdn.worldnomads.net/Media/Default/travelinsurance/wn-ti-media-thumbnail-3.jpg" alt="These Norwegian Cross Country Skiiers Are Dangerous!" />
</a>
<div class="patternLib-play">
<a class="Play Play--sml" href="https://www.youtube.com/watch?v=QtY2L2UShyA?autohide=1&showinfo=0&controls=0" title="Play media" data-lity>
<img src="https://cdn.worldnomads.net/Media/Default/travelinsurance/wn-ti-media-thumbnail-3.jpg" alt="These Norwegian Cross Country Skiiers Are Dangerous!" />
</a>
</div>
If using Wistia instead of YouTube, then Lity isn't required, but you will require the JavaScript files required by Wistia itself.
This also has an example of a Play module made to scale to full width (you should make sure the image is actually big enough to cover the width of the container it will be placed into):
<div class="patternLib-wistia">
<span class="Promo-wistia wistia_embed wistia_async_9aauyonzih popover=true popoverContent=link">
<a class="Play Play--fullWidth" href="#">
<img src="//cdn.worldnomads.net/Media/Default/LearnImages/writing2017/tws-learnvid-placeholder.jpg" alt="Are you an aspiring travel writer? Click the video to find out more." />
</a>
</span>
</div>
<script src="//fast.wistia.com/embed/medias/9aauyonzih.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
Price Total
Used to display the purchase or quote total on a page. Typical use is along the purchase path.
$281.00
AUD
$281.00
AUD
<div class="PriceTotal">
<span class="PriceTotal-amount">$281.00</span>
<span class="PriceTotal-currency">AUD</span>
</div>
<div class="PriceTotal PriceTotal--small">
<span class="PriceTotal-amount">$281.00</span>
<span class="PriceTotal-currency">AUD</span>
</div>
Search Panel
Used to search content
<form class="SearchPanel">
<label for="textInput" class="SearchPanel-Label">
Search helpdesk
</label>
<div class="SearchPanel-Container">
<input class="SearchPanel-Input" id="textInput" type="text" placeholder="e.g. Am I covered, Can't login" />
<button class="button SearchPanel-Button">Search</button>
</div>
</form>
Story
A story can be used to visually communicate a simple story or journey. It’s best used to highlight a flow of key features based on the context of your page, with each story point relating to the next. A minimum of 3 and a maximum of 5 icons may be used to convey the story. A story must be inside a container for it to work properly.
-
A total of
2142 Travelers
-
donated
$3452
(25% funded) -
to help improve
Water & Sanitation
<div class="container">
<ol class="Story Story--connected">
<li class="Story-item">
<div class="Story-icon-container">
<span class="Icon--xxlge Icon--circle Icon--border-default Story-item-icon icon-wn-user">
</span>
</div>
<p class="Story-text">A total of
<br />
<strong>2142 Travelers</strong>
<br />
</p>
</li>
<li class="Story-item">
<div class="Story-icon-container">
<span class="Icon--xxlge Icon--circle Icon--border-default Story-item-icon icon-wn-wallet"> </span>
</div>
<p class="Story-text">donated
<br />
<strong>$3452</strong>
<br />
<small>(25% funded)</small>
</p>
</li>
<li class="Story-item">
<div class="Story-icon-container">
<span class="Icon--xxlge Icon--circle Icon--border-default Story-item-icon icon-wn-heart">
</span>
</div>
<p class="Story-text">to help improve
<br />
<strong>Water & Sanitation</strong>
<br />
</p>
</li>
</ol>
</div>
Slide Toggle
The Slide Toggle is a section / content toggle mechanism.
It animates slide effects with CSS and Slide Toggle plugin is no longer need.
The nst slide toggle module is now deprecated.
<button class="js-slideToggle button alt-dark small">
Show/Hide
</button>
<div class="js-slideToggle-component SlideToggle SlideToggle--spaced SlideToggle-is-hidden">
<div class="SlideToggle-content">
<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>
</div>
Social Share
The Social Share module can be applied anywhere. The script file for this module is src/common/js/custom/wng.ShareTool.js
The counter hits a 3rd party API to get an actual count of shares. It will also look for a meta tag in the document head (data-totalshares), which is applied via certain CMS article types, and uses this as an override. The override will only occur if it is greater than the actual count of shares.
<div class="SocialShare">
<span class="sharedcount SocialShare-count">
<div class="total SocialShare-count-total"></div>
<p class="SocialShare-count-share">Shares</p>
</span>
<button class="SocialBtn SocialBtn-facebook" data-sharetool="true">
<span class="SocialButton-label">Facebook</span>
<span class="icon-wn-facebook"></span>
</button>
<button class="SocialBtn SocialBtn-twitter" data-sharetool="true">
<span class="SocialButton-label">Twitter</span>
<span class="icon-wn-twitter"></span>
</button>
<button class="SocialBtn SocialBtn-pinterest" data-sharetool="true">
<span class="icon-wn-pinterest-p"></span>
</button>
<button class="SocialBtn SocialBtn-googleplus" data-sharetool="true">
<span class="icon-wn-google-plus"></span>
</button>
<button class="SocialBtn SocialBtn-linkedin" data-sharetool="true">
<span class="icon-wn-linkedin"></span>
</button>
<button class="SocialBtn SocialBtn-stumbleupon" data-sharetool="true">
<span class="icon-wn-stumbleupon"></span>
</button>
</div>
Social Stats
The Social Stats module can be applied on all content based pages on the WN site. Script for it is located in src/wn/js/main/wn-socialStats.js.
By extending the js-socialStats class on it, it will give functionality to the module, based on assigned social roles for each button:
- social-role="like" creates a Like/+1 functionality for the button. This is made in such a way that once a user likes a page, it cannot be un-liked.
- social-role="share" toggles a Social Share module display.
- social-role="comment" navigates the user to the Comments section of the page
4125
1234
966
7
<div class="segment-margin">
<div class="SocialStats SocialStats--sml">
<div class="SocialStats-item">
<span class="SocialStats-icon Icon-sml icon-wn-see"></span> <small>4125</small>
</div>
<div class="SocialStats-item">
<span class="SocialStats-icon Icon-sml icon-wn-heart"></span> <small>1234</small>
</div>
<div class="SocialStats-item">
<span class="SocialStats-icon Icon-sml icon-wn-share"></span> <small>966</small>
</div>
<div class="SocialStats-item">
<span class="SocialStats-icon Icon-sml icon-wn-bubbles"></span> <small>7</small>
</div>
</div>
</div>
<div class="SocialStats js-socialStats">
<div class="SocialStats-item">
<span class="SocialStats-icon Icon--md Icon--circle icon-wn-heart" social-role="like"></span> <small><strong>998 Inspired</strong></small>
</div>
<div class="SocialStats-item">
<span class="SocialStats-icon Icon--md Icon--circle icon-wn-share" social-role="share"></span> <small><strong>536k Shared</strong></small>
</div>
<div class="SocialStats-item">
<span class="SocialStats-icon Icon--md Icon--circle icon-wn-bubbles" social-role="comment"></span> <small><strong>27 Comments</strong></small>
</div>
<div class="SocialShare">
<button class="SocialBtn SocialBtn-facebook facebook" data-sharetool="true">
<span class="icon-wn-facebook"></span>
</button>
<button class="SocialBtn SocialBtn-twitter twitter" data-sharetool="true">
<span class="icon-wn-twitter"></span>
</button>
<button class="SocialBtn SocialBtn-pinterest pinterest" data-sharetool="true">
<span class="icon-wn-pinterest-p"></span>
</button>
<button class="SocialBtn SocialBtn-googleplus googleplus" data-sharetool="true">
<span class="icon-wn-google-plus"></span>
</button>
<button class="SocialBtn SocialBtn-linkedin linkedin" data-sharetool="true">
<span class="icon-wn-linkedin"></span>
</button>
<button class="SocialBtn SocialBtn-stumbleupon stumbleupon" data-sharetool="true">
<span class="icon-wn-stumbleupon"></span>
</button>
</div>
</div>
Sticky
Sometimes you won't things to be sticky. This will make things sticky in relation to their parent container.
Typically used for side bar navigation
Note: This won't work for IE and crappy browsers.
Sticky element
<div class="patternLib-sticky callout">
<div class="Sticky">
<h4>Sticky element</h4>
</div>
</div>
<div class="patternLib-sticky callout">
<nav class="NavList Sticky">
<h3 class="NavList-title">Related Articles</h3>
<ul class="NavList-menu">
<li>
<a href="#">Do I need a license to ride a motorbike in Thailand</a>
</li>
<li>
<a href="#">Do I need travel insurance to ride a motorbike in Thailand</a>
</li>
</ul>
</nav>
</div>
Tables
| Activities | Premium | Edit |
|---|---|---|
| Level 1 | ||
| Badminton | $300 | |
| Level 2 | ||
| Swimming | $250 | |
| Aerobics | $400 | |
| Athletics | $20 | |
| Total | $99.99 | |
<table class="Table">
<thead>
<tr>
<th>Activities</th>
<th><a href="#">Premium</a></th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">Level 1</th>
</tr>
<tr>
<td class="Table-border-none">Badminton</td>
<td class="Table-border-none">$300</td>
<td class="Table-border-none">
<button class="IconBtn IconBtn--edit">Edit</button>
</td>
</tr>
<tr><th colspan="3">Level 2</th></tr>
<tr>
<td>Swimming</td>
<td>$250</td>
<td>
<button class="IconBtn IconBtn--edit">Edit</button>
</td>
</tr>
<tr>
<td>Aerobics</td>
<td>$400</td>
<td>
<button class="IconBtn IconBtn--edit">Edit</button>
</td>
</tr>
<tr>
<td>Athletics</td>
<td>$20</td>
<td>
<button class="IconBtn IconBtn--edit">Edit</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Total
</td>
<td colspan="2">
$99.99
</td>
</tr>
</tfoot>
</table>
Tag
The Tag module, typically used for catagory tagging in the CMS.
<span class="Tag">Tag</span>
<a href="" class="Tag">Tag</a>
<a href="" class="Tag Tag--primary">Tag Primary</a>
<a href="" class="Tag Tag--secondary">Tag Secondary</a>
Timer
The Timer module can be used to represent a variety of times, dates or events.
Note: callouts used for presentation purposes only.
14
Days
20
Hours
17
Minutes
14
Days
20
Hours
17
Minutes
14
Feb
Applications close
14
Feb
Applications close
<div class="Timer">
<span class="Timer-cell">
14
<small class="Timer-detail">Days</small>
</span>
<span class="Timer-cell">
20
<small class="Timer-detail">Hours</small>
</span>
<span class="Timer-cell">
17
<small class="Timer-detail">Minutes</small>
</span>
</div>
<div class="callout reverse">
<div class="Timer Timer--reverse">
<span class="Timer-cell">
14
<small class="Timer-detail">Days</small>
</span>
<span class="Timer-cell">
20
<small class="Timer-detail">Hours</small>
</span>
<span class="Timer-cell">
17
<small class="Timer-detail">Minutes</small>
</span>
</div>
</div>
<div class="Timer Timer--single">
<span class="Timer-cell">
14
<small class="Timer-detail">Feb</small>
</span>
<span class="Timer-cell">
Applications close
</span>
</div>
<div class="callout reverse">
<div class="Timer Timer--single Timer--reverse">
<span class="Timer-cell">
14
<small class="Timer-detail">Feb</small>
</span>
<span class="Timer-cell">
Applications close
</span>
</div>
</div>
UI Icons
UI Icons are a graphic / illustrative module used for interactive situations that require increased engagement.
Both the glyph icon and the small peripheral icon can be changed by selecting a differnt icon from the Icomoon icon set.
Note: only select, higher detailed icons should be used as the central glyph. Talk to a designer to ensure you're using the correct icons.
<button class="UIcon">
<span class="UIcon-inner" title="Add a sports gear item">
<span class="UIcon-icon Icon--xsml icon-wn-plus"></span>
<span class="UIcon-glyph icon-wn-paddle-board"></span>
</span>
</button>
<button class="UIcon UIcon--secondary" title="Add a tech or camera item">
<span class="UIcon-inner">
<span class="UIcon-icon Icon--xsml icon-wn-plus"></span>
<span class="UIcon-glyph icon-wn-laptop"></span>
</span>
</button>
<button class="UIcon UIcon--secondary" title="Add a peraonal item">
<span class="UIcon-inner">
<span class="UIcon-icon Icon--xsml icon-wn-plus"></span>
<span class="UIcon-glyph icon-wn-boot"></span>
</span>
<strong class="UIcon-label">Personal Items</strong>
</button>
<button class="UIcon UIcon--secondary UIcon-is-selected title="Add a peraonal item">
<span class="UIcon-inner">
<span class="UIcon-icon Icon--xsml icon-wn-plus"></span>
<span class="UIcon-glyph icon-wn-boot"></span>
</span>
<strong class="UIcon-label">Selected</strong>
</button>