Badge

The badge module is used for adding icons or a word that denote a specific section or purpose to the content of it's parent module. Icons should be selected from the WN icon set.

    

    
        Label
        
    

     Closed 

      <span class="Badge">
    <span class="Badge-icon icon-wn-thumbup"></span>
</span>

<div class="patternLib-sml-badges">
    <span class="Badge Badge--sml">
        <span class="Badge-label">Label</span>
        <span class="Badge-icon icon-wn-thumbup"></span>
    </span>
</div>
<div class="patternLib-sml-badges">
    <span class="Badge Badge--status"> Closed </span>
</div>
    

Background Colors

The Bg (replaced Pattern), module can be applied to most block or inline-block elements. See the Style Guide for appropriate use of the Pattern within the brand guidelines.

Bg can be combined with .callout to apply padding and font coloring to the element.

      <div class="patternLib-pattern Bg Bg--primary"></div>

<div class="patternLib-pattern Bg Bg--secondary"></div>

<div class="patternLib-pattern Bg Bg--quarternary"></div>

<div class="patternLib-pattern Bg Bg--monoDark"></div>

<div class="patternLib-pattern Bg Bg--monoLight"></div>

<div class="patternLib-pattern Bg Bg--monoLightGradient"></div>

Callout

This is a custom override of the Foundation Callout component.

Callout - Viral beard try-hard, mustache salvia sartorial letterpress YOLO.
Callout Light - Scenester messenger bag artisan, mustache selvage church-key intelligentsia stumptown 90's. Hella flannel paleo, kitsch you probably haven't heard of them dreamcatcher.
Callout Secondary - Viral beard try-hard, mustache salvia sartorial letterpress YOLO.
Callout Reverse - Viral beard try-hard, mustache salvia sartorial letterpress YOLO.

      <div class="callout centered"><strong>Callout</strong> - <a href="#">Viral beard</a> try-hard, mustache salvia sartorial letterpress YOLO.</div>

<div class="callout light"><strong>Callout Light</strong> - <a href="#">Scenester messenger</a> bag artisan, mustache selvage church-key intelligentsia stumptown 90's. Hella flannel paleo, kitsch you probably haven't heard of them dreamcatcher.</div>

<div class="callout secondary"><strong>Callout Secondary</strong> - <a href="#">Viral beard</a> try-hard, mustache salvia sartorial letterpress YOLO.</div>

<div class="callout reverse"><strong>Callout Reverse</strong> - <a href="#">Viral beard</a> try-hard, mustache salvia sartorial letterpress YOLO.</div>
    

Callout with close button

    
    Callout Light -
    Scenester messenger bag artisan, mustache selvage church-key intelligentsia stumptown 90's.
     Hella flannel paleo, kitsch you probably haven't heard of them dreamcatcher. 

      <div class="callout light">
    <button type="button" class="callout-close CloseBtn"></button>
    <strong>Callout Light</strong> -
    <a href="#">Scenester messenger</a> bag artisan, mustache selvage church-key intelligentsia stumptown 90's.
     Hella flannel paleo, kitsch you probably haven't heard of them dreamcatcher. </a>
</div>
    

Colors

All colours muct be applied to your code via variables located in variables.scss.

Do not use hex colors. Do not modify these colors via color functions such as darken, lighten, saturate, etc. Do not add new colour variables unless approved.

Brand Color Palette

$color-primary-light $color-primary $color-primary-dark

$color-secondary-xlight $color-secondary-light $color-secondary $color-secondary-dark $color-secondary-xdark

$color-tertiary $color-quarternary $color-quinary

$color-mono-xxxlight $color-mono-xxlight $color-mono-xlight $color-mono-light $color-mono $color-mono-dark $color-mono-xdark $color-mono-xxdark

$body-color $body-color-dark

$font-color $font-color-light

Functional Colors

$color-success $color-info $color-warning $color-error

Social Media Colors

$color-facebook $color-twitter $color-googleplus $color-youtube $color-linkedin $color-pinterest $color-stumbleupon

Copy Break

The Copy Break module applies a line below an applied content. This creates an inner divider between content.

Small title, such as an authors name

In the works of Gibson, a predominant concept is the concept of postcultural language.t

Page title, usually within a Hero module

However, a number of narratives concerning not, in fact, modernism, but submodernism exist. Foucault’s model of dialectic discourse implies that class has significance.

Page title in a reversed Hero module

If one examines socialist realism, one is faced with a choice: either accept Lacanist obscurity or conclude that the purpose of the observer is significant form, but only if truth is distinct from reality.

      <h4 class="CopyBreak">Small title, such as an authors name</h4>
<p>In the works of Gibson, a predominant concept is the concept of postcultural language.t</p>

<div class="segment-centered">
    <h1 class="CopyBreak CopyBreak--centered CopyBreak--thick">Page title, usually within a Hero module</h1>
    <h3 class="standfirst">However, a number of narratives concerning not, in fact, modernism, but submodernism exist. Foucault’s model of dialectic discourse implies that class has significance.</h3>
</div>

<div class="segment-centered callout reverse">
    <h1 class="CopyBreak CopyBreak--centered CopyBreak--thick CopyBreak--reverse">Page title in a reversed Hero module</h1>
    <h3 class="standfirst">If one examines socialist realism, one is faced with a choice: either accept Lacanist obscurity or conclude that the purpose of the observer is significant form, but only if truth is distinct from reality.</p>
</div>
    

Flag Set

    USA

      <span class="Flag Flag--usa">USA</span>

Andorra Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Bermuda Bhutan Bolivia Bosnia and Herzegovina Botswana Brazil Brunei Bulgaria Cambodia Cameroon Canada Cayman Islands Chile China Colombia Costa Rica Croatia Cuba Curacao Cyprus Czech Republic Denmark Dominican Republic Ecuador Egypt El Salvador Estonia Falkland Islands Fiji Finland France French Polynesia Georgia Germany Gibraltar Greece Greenland Guam Guatemala Honduras Hong Kong Hungary Iceland India Indonesia Iran Ireland Israel Italy Jamaica Japan Kazakhstan Kenya Kuwait Kyrgyzstan Laos Latvia Lithuania Luxembourg Macao Macedonia Madagascar Malaysia Maldives Malta Mauritius Mexico Moldova Monaco Mongolia Morocco Nepal Netherlands New Caledonia New Zealand Nicaragua Norway Oman Pakistan Palau Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Qatar Romania Russia Samoa San Marino Saudi Arabia Singapore Slovakia Slovenia Solomon Islands South Africa South Korea Spain Sri Lanka Sweden Switzerland Taiwan Tajikistan Thailand Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Turks and Caicos Islands Ukraine United Arab Emirates United Kingdom Uruguay Uzbekistan USA Vanuatu Venezuela Vietnam Virgin Islands

Graphic Icon

The Graphic module uses advanced svg sprite methods to create a stylistically complex icons library.

For information on the how and why of sprites read the following:

Creating new Graphic icons

It's important that new icons adhere to a consistant asethetic (tone, colour pallette, line shape, etc.), as the existing icons.

Specifications:

The final svg output should be optimised for the web. All strokes should be outlined, paths should be joined where possibly, and where possible, as few paths / shapes as possible are used.
The viewport (artboard size), should be 100px squared and the icon itself should be centered and no bigger than 98px on it's longest length.
The filename must be prepended with the module name 'Graphic-' and saved to the local dev. directory /src/wn/svg/graphic/
When saving the svg from Illustrator, use these settings

Implementing Graphic icons

Note: SVG can't be served via the CDN at this stage: Read more here.

    
      <div class="patternLib-graphicIcon">
    <svg title="Notebook icon" class="Graphic" role="img">
        <use xlink:href="source/img/symbol/graphic-sprite-1.svg#Graphic-notebook"></use>
    </svg>

    <svg title="Notebook icon" class="Graphic Graphic--responsive" role="img">
        <use xlink:href="source/img/symbol/graphic-sprite-1.svg#Graphic-notebook"></use>
    </svg>
</div>

#Graphic-ambulance

#Graphic-backpack

#Graphic-badge

#Graphic-balloon

#Graphic-books

#Graphic-business

#Graphic-calendar

#Graphic-computer

#Graphic-connection

#Graphic-crafts

#Graphic-desk

#Graphic-diver

#Graphic-form

#Graphic-globe

#Graphic-learn

#Graphic-map

#Graphic-megaphone

#Graphic-notebook

#Graphic-safe

#Graphic-sign

#Graphic-skyscraper

#Graphic-support

#Graphic-tools

#Graphic-typewriter

#Graphic-university

Icon

WN Icons are always outlined unless breaking guidelines (social icons) or it causes weak affordance (play button).

Icon Sizes

Fixed icon sizes. All icons accross the site should be one of the following sizes.

    
      <span class="Icon--xsml icon-wn-edit"></span>

<span class="Icon--sml icon-wn-flight"></span>

<span class="Icon--md icon-wn-warning"></span>

<span class="Icon--lge icon-wn-favourite"></span>

<span class="Icon--xlge icon-wn-location"></span>

Circle Icons

Circle icons can be applied to all icons except the --xsml variant. All social media icons should be circle icons. Social icons are always in circles.

    
1

W

N

G

      <span class="Icon--sml Icon--circle icon-wn-notification"></span>

<span class="Icon--md Icon--circle icon-wn-fire"></span>

<span class="Icon--lge Icon--circle icon-wn-settings"></span>

<span class="Icon--xlge Icon--circle icon-wn-fire"></span>

<span class="Icon--xxlge Icon--circle icon-wn-fire"></span>

<span class="Icon--md Icon--circle">1</span>

<span class="Icon--lge Icon--circle">W</span>

<span class="Icon--xlge Icon--circle">N</span>

<span class="Icon--xxlge Icon--circle">G</span>

Reversed Icons

    
      <div class="callout reverse">

    <span class="Icon--reverse icon-wn-warning"></span>

    <span class="Icon--sml Icon--circle Icon--reverse icon-wn-facebook"></span>

</div>

Navigation Icons

    
      <a href="" class="Icon--nav icon-wn-star"></a>

<button class="Icon--md Icon--circle Icon--nav icon-wn-check"></button>

<div class="patternLib-icon-nav callout reverse">

    <a href="" class="Icon--reverse Icon--nav icon-wn-facebook"></a>

    <button class="Icon--md Icon--circle Icon--reverse Icon--nav icon-wn-twitter"></button>

</div>

Icon Set

Icons are managed via Icomoon. New icons are added only as needed.

Icons can be applied via a class on a span or via the content of a pseudo-element.

icon-wn-handwash icon-wn-camper icon-wn-backpack-lge icon-wn-boot paddle-board icon-wn-laptop icon-wn-trash-o icon-wn-briefcase icon-wn-info icon-wn-reload icon-wn-medical-emergency icon-wn-air icon-wn-helmet icon-wn-ball icon-wn-bike icon-wn-flag-race icon-wn-mountain icon-wn-snowflake icon-wn-wave icon-wn-heli icon-wn-book icon-wn-see icon-wn-backpack icon-wn-play icon-wn-download icon-wn-film icon-wn-writing icon-wn-globe icon-wn-mobile icon-wn-insider-guide icon-wn-plus icon-wn-attach icon-wn-chevron-right icon-wn-minus icon-wn-credit-card icon-wn-edit icon-wn-cart icon-wn-file icon-wn-folder icon-wn-forbidden icon-wn-bars icon-wn-navicon icon-wn-reorder icon-wn-link icon-wn-print icon-wn-question icon-wn-quotes-left icon-wn-quotes-right icon-wn-close icon-wn-search icon-wn-settings icon-wn-share icon-wn-check icon-wn-exclamation-triangle icon-wn-warning icon-wn-calendar icon-wn-flight icon-wn-location icon-wn-luggage icon-wn-navigation icon-wn-paper-plane icon-wn-pin icon-wn-tag icon-wn-world icon-wn-cook-book icon-wn-picture icon-wn-time icon-wn-travel-photo icon-wn-wallet icon-wn-bubbles icon-wn-call icon-wn-email icon-wn-star icon-wn-star-hollow icon-wn-notification icon-wn-user icon-wn-fire icon-wn-illness icon-wn-health icon-wn-shield icon-wn-award icon-wn-umbrella icon-wn-trifold icon-wn-thumbup icon-wn-thumbdown icon-wn-heart icon-wn-roaddirections icon-wn-lightbulb icon-wn-speachbubble icon-wn-home icon-wn-twitter icon-wn-facebook icon-wn-google-plus icon-wn-linkedin icon-wn-angle-right icon-wn-stumbleupon icon-wn-pinterest-p icon-wn-instagram icon-wn-youtube icon-wn-skype icon-wn-vimeo icon-wn-flickr icon-wn-water-sanitation icon-wn-sustainable-communities icon-wn-poverty icon-project icon-wn-peace-justice icon-wn-maternal-health icon-wn-infrastructure icon-wn-impact icon-wn-equality icon-wn-environment icon-wn-energy icon-wn-employment icon-wn-education icon-wn-donated icon-wn-podcast

    
      <span class="icon-wn-exclamation-triangle"></span>

Illustrations

These illustrations use the graphic module (which creates advanced SVGS).

        
    #Graphic-ski

      <div class="patternLib-illustration">
    <svg title="Person with skis icon" class="Graphic" role="img">
        <use xlink:href="source/img/symbol/graphic-sprite-1.svg#Graphic-ski"></use>
    </svg>
    <div>#Graphic-ski</div>
</div>
    

#Graphic-ski

#Graphic-account

#Graphic-opportunities

#Graphic-savelives

#Graphic-wnteam

#Graphic-covid-costs

#Graphic-reaptriation-remains

#Graphic-covid-travel-costs

Brand Logos

The World Nomads logo is an inline svg element group. It features png fallbacks for browsers not supporting svg. The module can be custom sized via layouts, though the no-svg fallback is fixed size.

Use an a tag to turn the logo into a link.

    
      <a href="#" class="BrandLogo" title="World Nomads">
    <span class="BrandLogo-img"></span>
    <span class="BrandLogo-fallback"></span>
</a>

<span class="BrandLogo BrandLogo--stacked" title="World Nomads">
    <span class="BrandLogo-img"></span>
    <span class="BrandLogo-fallback"></span>
</span>

<div class="callout reverse">

    <span class="BrandLogo BrandLogo--reverse" title="World Nomads">
        <span class="BrandLogo-img"></span>
        <span class="BrandLogo-fallback"></span>
    </span>

    <a href="#" class="BrandLogo BrandLogo--stacked BrandLogo--reverse" title="World Nomads">
        <span class="BrandLogo-img"></span>
        <span class="BrandLogo-fallback"></span>
    </a>

</div>

Trust Partner Logos

Trust Partner logos are normalised, monochrome, SVG versions of our partners logos.

Single Implementation and Sizes

    
      <span class="TrustPartner">
    <span class="TrustPartner-contiki" title="Contiki logo"></span>
</span>
<div class="TrustPartner TrustPartner--sm">
    <span class="TrustPartner-contiki" title="Contiki logo"></span>
</div>

TrustPartner block section

The TrustPartner block is a common layout pattern for showing a set of partner logos, typically used on landing pages and the purchase path.

Common usage examples:

    



Trusted by:


As featured in:


  

      <!-- Use case 01: purchase path -->
<ul class="TrustPartner
           TrustPartner--sm
           TrustPartner--block
           TrustPartner--blockBreak
           TrustPartner--singleRow">
    <li class="TrustPartner-letsgo" title="Let's Go logo"></li>
    <li class="TrustPartner-lonelyplanet" title="Lonely Planet logo"></li>
    <li class="TrustPartner-nomadicmatt" title="Nomadic Matt logo"></li>
    <li class="TrustPartner-roomorama" title="Roomorama logo"></li>
    <li class="TrustPartner-roughguides" title="Rough Guides logo"></li>
    <li class="TrustPartner-topdeck" title="Top Deck logo"></li>
</ul>

<!-- Use case 02: landing pages -->
<ul class="TrustPartner
           TrustPartner--block
           TrustPartner--blockBreak
           TrustPartner--blockCentered">
    <li>Trusted by:</li>
    <li class="TrustPartner-lonelyplanet" title="Lonely Planet logo"></li>
    <li class="TrustPartner-bootsnall" title="BootsnAll logo"></li>
    <li class="TrustPartner-contiki" title="Contiki logo"></li>
    <li class="TrustPartner-couchsurfing" title="Couchsurfing logo"></li>
    <li class="TrustPartner-eurail" title="Eurail logo"></li>
    <li class="TrustPartner-gapyear" title="Gapyear logo"></li>
</ul>

<ul class="TrustPartner TrustPartner--block TrustPartner--blockBreak TrustPartner--blockCentered TrustPartner--opaque">
    <li>As featured in:</li>
    <li class="TrustPartner-telegraph" title="Telegraph"></li>
    <li class="TrustPartner-thetimes" title="The Times"></li>
    <li class="TrustPartner-thewashingtonpost" title="Washington Post"></li>
    <li class="TrustPartner-cbs" title="CBS"></li>
    <li class="TrustPartner-condenast" title="Condenast"></li>
    <li class="TrustPartner-forbes" title="Forbes"></li>
    <li class="TrustPartner-travelleisure" title="TravelLeisure"></li>
</ul>
    

TrustPartner logo set

Our current set or partner logos. If you require an additional logo, contact a front-end dev.

    
      <div class="TrustPartner">
    <span class="TrustPartner-bootsnall" title="BootsnAll logo"></span>
    <span class="TrustPartner-contiki" title="Contiki logo"></span>
    <span class="TrustPartner-couchsurfing" title="Couchsurfing logo"></span>
    <span class="TrustPartner-eurail" title="Eurail logo"></span>
    <span class="TrustPartner-gapyear" title="Gapyear logo"></span>
    <span class="TrustPartner-interail" title="Interail logo"></span>
    <span class="TrustPartner-intrepid" title="Intrepid logo"></span>
    <span class="TrustPartner-ivhq" title="International Volunteer HQ logo"></span>
    <span class="TrustPartner-kathmandu" title="Kathmandu logo"></span>
    <span class="TrustPartner-letsgo" title="Let's Go logo"></span>
    <span class="TrustPartner-lonelyplanet" title="Lonely Planet logo"></span>
    <span class="TrustPartner-nomadicmatt" title="Nomadic Matt logo"></span>
    <span class="TrustPartner-roomorama" title="Roomorama logo"></span>
    <span class="TrustPartner-roughguides" title="Rough Guides logo"></span>
    <span class="TrustPartner-topdeck" title="Top Deck logo"></span>
    <span class="TrustPartner-tourradar" title="Tourradar logo"></span>
    <span class="TrustPartner-travelfish" title="Travel Fish logo"></span>
    <span class="TrustPartner-travelhappy" title="Travel Happy logo"></span>
    <span class="TrustPartner-gap360" title="gap360 logo"></span>
    <span class="TrustPartner-grayl" title="grayl logo"></span>
    <span class="TrustPartner-hostelworld" title="hostelworld logo"></span>
    <span class="TrustPartner-nomadasarous" title="nomadasarous logo"></span>
    <span class="TrustPartner-thebb" title="the broke backpacker logo"></span>
    <span class="TrustPartner-fpn FooterTrustLogo" title="Footprints network logo"></span>
    <span class="TrustPartner-adventuretconservation FooterTrustLogo" title="Footprints network logo"></span>
    <span class="TrustPartner-adventuretravel FooterTrustLogo" title="Footprints network logo"></span>
    <span class="TrustPartner-wyse FooterTrustLogo" title="Footprints network logo"></span>
    <span class="TrustPartner-pata FooterTrustLogo" title="Footprints network logo"></span>
    <span class="TrustPartner-beta FooterTrustLogo" title="Footprints network logo"></span>
    <span class="TrustPartner-ustia FooterTrustLogo" title="Footprints network logo"></span>

</div>

Underwriter Logos

Underwriter logos. Pretty straight forward.

    Bupa
Nationwide
Axa
Coverholder at Lloyd's
AIG
MillStream
Zurich
Chubb
Trip Mate

  

      <span class="Underwriter Underwriter--bupa">Bupa</span>
<span class="Underwriter Underwriter--nationwide">Nationwide</span>
<span class="Underwriter Underwriter--axa">Axa</span>
<span class="Underwriter Underwriter--lloyds">Coverholder at Lloyd's</span>
<span class="Underwriter Underwriter--aig">AIG</span>
<span class="Underwriter Underwriter--mill">MillStream</span>
<span class="Underwriter Underwriter--zurich">Zurich</span>
<span class="Underwriter Underwriter--chubb">Chubb</span>
<span class="Underwriter Underwriter--tripmate">Trip Mate</span>
    

Overlay

The overlay component simply applies a dark overlay layer on top of an background image. Float content to the front that you don't want to overlay by wrapping them inside an Overlay-content class.

    
      <div class="Overlay">
    <img src="//cdn.worldnomads.net/Media/Default/competitions/relative-distance/wn-2017-rd-coundown2.jpg"/>
</div>

Content within the Overlay requires a greater z-index to sit above the overlay's pseudo-element.

This is some content

Before they sold out photo booth umami try-hard yuccie, poke etsy iceland. Offal VHS tilde, tumeric shabby chic man bun godard irony tousled. Echo park master cleanse glossier iceland, tumeric cray la croix green juice VHS chia. Dreamcatcher gochujang cray listicle. Af master cleanse normcore vinyl cronut lo-fi hoodie, locavore man bun small batch. Pug jean shorts venmo twee, photo booth direct trade tbh small batch. Ennui post-ironic YOLO lumbersexual crucifix.

Migas tofu church-key marfa retro. Asymmetrical schlitz intelligentsia, tousled health goth hoodie hot chicken knausgaard locavore mlkshk. Pok pok selfies bicycle rights trust fund, yr migas literally. Kogi salvia cardigan crucifix. Sustainable YOLO shabby chic everyday carry. Austin edison bulb wolf, chambray DIY authentic kickstarter affogato pop-up tote bag. DIY kale chips pop-up viral shoreditch XOXO selfies, pork belly humblebrag.

      <section class="Overlay callout reverse patternLib-overlay">
    <div class="Overlay-content">
        <h2 class="Overlay-copy">This is some content</h2>
        <p class="Overlay-copy">Before they sold out photo booth umami try-hard yuccie, poke etsy iceland. Offal VHS tilde,
        tumeric shabby chic man bun godard irony tousled. Echo park master cleanse glossier iceland, tumeric cray la croix green juice
        VHS chia. Dreamcatcher gochujang cray listicle. Af master cleanse normcore vinyl cronut lo-fi hoodie, locavore man bun small batch.
        Pug jean shorts venmo twee, photo booth direct trade tbh small batch. Ennui post-ironic YOLO lumbersexual crucifix.</p>
        <p class="Overlay-copy">Migas tofu church-key marfa retro. Asymmetrical schlitz intelligentsia, tousled health goth
        hoodie hot chicken knausgaard locavore mlkshk. Pok pok selfies bicycle rights trust fund, yr migas literally. Kogi salvia cardigan
        crucifix. Sustainable YOLO shabby chic everyday carry. Austin edison bulb wolf, chambray DIY authentic kickstarter affogato pop-up
        tote bag. DIY kale chips pop-up viral shoreditch XOXO selfies, pork belly humblebrag.</p>
    </div>
</section>
    

The Overlay module can be combined with the Blockquote and Author modules to form a Testimonial object.

            
                This was the first time I ever purchased travel insurance and I am so glad I did.
            
        

                     Filing a claim was surprisingly easy and when the claim was finally processed, I was reimbursed for all of my expenses including things like the extra week in the hotel I didn't get to take advantage of.
                
                        
                        
                    
                        Lisa Fryer,
World Nomads Emergency Assistance
                    

      <div class="Pattern Pattern--secondary segment-pad segment-margin">
    <div class="row">
        <div class="small-12 column">
            <blockquote class="Blockquote font-size-lge">
                This was the first time I ever purchased travel insurance and I am so glad I did.
            </blockquote>
        </div>
    </div>
</div>

<div class="Overlay segment-pad patternLib-testimonial">
    <div class="row">
        <div class="small-12 column">
            <div class="Overlay-content">
                <blockquote class="Blockquote Blockquote--hasAuthor Blockquote--reverse font-size-lge">
                     Filing a claim was surprisingly easy and when the claim was finally processed, I was reimbursed for all of my expenses including things like the extra week in the hotel I didn't get to take advantage of.
                </blockquote>
                <div class="Author Author--reverse">
                    <picture class="Avatar Avatar--sml">
                        <source srcset="https://cdn.worldnomads.net/Media/Default/travelinsurance/ti-avatar-lisaf.jpg"/>
                        <img src="https://cdn.worldnomads.net/Media/Default/travelinsurance/ti-avatar-lisaf.jpg" alt="Lisa's portrait photo" alt="Author's Avatar"/>
                    </picture>
                    <div class="Author-profile">
                        <strong>Lisa Fryer,</strong><br><small class="Author-title">World Nomads Emergency Assistance</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    

Pay Card Icons

The Pay Card module is used for showing accepted credit cards and highlighting the card type being entered.

    
      <div>
    <span class="PayCard PayCard--mc" title="MasterCard"></span>
    <span class="PayCard PayCard--visa PayCard-is-selected" title="VISA"></span>
    <span class="PayCard PayCard--amex" title="American Express"></span>
    <span class="PayCard PayCard--jcb" title="Japan credit Bureau card"></span>
    <span class="PayCard PayCard--maestro" title="Maestro"></span>
</div>

Typography

Global base typographic element styles. Do not override these element styles for any reason. The brand typography needs to remain consistant across the site. No exceptions!

The World Nomads font Proxima Nova (Regular and Bold)

Notes: Font CSS styles can be applied to any element by using the .font-size- classes from _extensions.scss within your HTML. Alternatively the classes can be extended using SCSS extensions, though this shoud be used with caution. It will generate bloated CSS.

h1 - Four loko poutine gluten-free, try-hard VHS iPhone trust fund.

h2 - Vinyl kogi tilde poutine brooklyn, butcher squid paleo celiac

h3 - Brunch ethical messenger bag intelligentsia seitan art party.

h4 - Craft beer fanny pack cronut fixie pabst cold-pressed bicycle rights swag tattooed, green juice tacos wolf brooklyn fashion axe.

h5 - Sustainable next level hella before they sold out drinking vinegar pork belly.

Master cleanse kitsch migas drinking vinegar, artisan food truck aesthetic. Whatever gochujang church-key, jean shorts master cleanse listicle tote bag keytar craft beer heirloom 90's. Paleo cray blue bottle gastropub irony whatever, truffaut food truck messenger bag flannel mumblecore keffiyeh.

Twee butcher flexitarian listicle tumblr wayfarers.

      <h1>h1 - Four loko poutine gluten-free, try-hard VHS iPhone trust fund.</h1>
<h2>h2 - Vinyl kogi tilde poutine brooklyn, butcher squid paleo celiac</h2>
<h3>h3 - Brunch ethical messenger bag intelligentsia seitan art party.</h3>
<h4>h4 - Craft beer fanny pack cronut fixie pabst cold-pressed bicycle rights swag tattooed, green juice tacos wolf brooklyn fashion axe.</h4>
<h5>h5 - Sustainable next level hella before they sold out drinking vinegar pork belly.</h5>
<p>Master cleanse kitsch migas drinking vinegar, artisan food truck aesthetic. Whatever gochujang church-key, jean shorts master cleanse listicle tote bag keytar craft beer heirloom 90's. Paleo cray blue bottle gastropub irony whatever, truffaut food truck messenger bag flannel mumblecore keffiyeh.</p>
<small>Twee butcher flexitarian listicle tumblr wayfarers.</small>
    

Special condition (a) and Special exclusion (iv) apply.

      <p class="font-color-light font-size-sml">Special condition (a) and Special exclusion (iv) apply.</p>
    

h1 - Four loko poutine gluten-free, try-hard VHS iPhone trust fund.

Heading details: 8^th December 2016

Standfirst - Four dollar toast mlkshk whatever wayfarers, chartreuse cray before they sold out pop-up organic locavore marfa gentrify fashion axe williamsburg tousled.

Twee butcher flexitarian listicle tumblr wayfarers. Locavore ramps craft beer, distillery brooklyn keffiyeh skateboard readymade mlkshk man braid trust fund master cleanse shabby chic cornhole PBR&B. Neutra kickstarter mixtape semiotics, bitters sartorial forage sriracha kale chips whatever listicle.

h2 - Vinyl kogi tilde poutine brooklyn, butcher squid paleo celiac

Health goth dreamcatcher direct trade, bitters kogi thundercats irony pitchfork pop-up neutra literally. Plaid ethical man bun, four dollar toast franzen fap aesthetic roof party hella poutine venmo affogato.

h3 - Brunch ethical messenger bag intelligentsia seitan art party.

Before they sold out austin tofu, literally man braid leggings humblebrag YOLO cold-pressed disrupt kogi fanny pack yuccie green juice fashion axe. Four dollar toast taxidermy DIY, 3 wolf moon crucifix chambray pinterest green juice YOLO waistcoat fashion axe XOXO.

h4 - Craft beer fanny pack cronut fixie pabst cold-pressed bicycle rights swag tattooed, green juice tacos wolf brooklyn fashion axe.

Paragraph - Nor was the pulpit itself without a trace of the same sea-taste that had achieved the ladder and the picture. Its panelled front was in the likeness of a ship's bluff bows, and the Holy Bible rested on a projecting piece of scroll work, fashioned after a ship's fiddle-headed beak.

h5 - Sustainable next level hella before they sold out drinking vinegar pork belly.

Crucifix pickled pour-over, fingerstache pug echo park ramps aesthetic fap post-ironic tofu normcore shabby chic williamsburg lomo. Salvia food truck microdosing synth, heirloom humblebrag ennui vinyl four dollar toast art party letterpress green juice.

List item 1
List item 2
List item 3

      <h1>h1 - Four loko poutine gluten-free, try-hard VHS iPhone trust fund.</h1>
<div class="headingDetails">Heading details: 8<sup>th</sup> December 2016</div>
<h2 class="standfirst">Standfirst - Four dollar toast mlkshk whatever wayfarers, chartreuse cray before they sold out pop-up organic locavore marfa gentrify fashion axe williamsburg tousled.</h2>
<p>Twee butcher flexitarian listicle tumblr wayfarers. Locavore ramps craft beer, distillery brooklyn keffiyeh skateboard readymade mlkshk man braid trust fund master cleanse shabby chic cornhole PBR&B. Neutra kickstarter mixtape semiotics, bitters sartorial forage sriracha kale chips whatever listicle.</p>

<h2>h2 - Vinyl kogi tilde poutine brooklyn, butcher squid paleo celiac</h2>
<p>Health goth dreamcatcher direct trade, bitters kogi thundercats irony pitchfork pop-up neutra literally. Plaid ethical man bun, four dollar toast franzen fap aesthetic roof party hella poutine venmo affogato.</p>

<h3>h3 - Brunch ethical messenger bag intelligentsia seitan art party.</h3>
<p>Before they sold out austin tofu, literally man braid leggings humblebrag YOLO cold-pressed disrupt kogi fanny pack yuccie green juice fashion axe. Four dollar toast taxidermy DIY, 3 wolf moon crucifix chambray pinterest green juice YOLO waistcoat fashion axe XOXO.</p>

<h4>h4 - Craft beer fanny pack cronut fixie pabst cold-pressed bicycle rights swag tattooed, green juice tacos wolf brooklyn fashion axe.</h4>
<p><strong>Paragraph</strong> - Nor was the pulpit itself without a trace of the same sea-taste that had achieved the ladder and the picture. Its panelled front was in the likeness of a ship's bluff bows, and the Holy Bible rested on a projecting piece of scroll work, fashioned after a ship's fiddle-headed beak.</p>

<h5>h5 - Sustainable next level hella before they sold out drinking vinegar pork belly.</h5>
<p>Crucifix pickled pour-over, fingerstache pug echo park ramps aesthetic fap post-ironic tofu normcore shabby chic williamsburg lomo. Salvia food truck microdosing synth, heirloom humblebrag ennui vinyl four dollar toast art party letterpress green juice.</p>

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
    