Use arrow buttons to see all masthead variations. Click on links to toggle

Default Masthead Specs

Height

100vh* - ((header-height) + (banner-height))

Max Height (mobile)

736px - (header-height + banner-height)

Max Height (large mobile up)

800px

*height of screen

Condensed Masthead Specs

Height

100vh* - ((header-height) + (banner-height))

Max Height (mobile)

240px

Max Height (tablet up)

500px

*height of screen

Proportional Masthead Specs

Height

% based in proportion to width of screen

Max Height (mobile)

N/A

Max Height (tablet up)

N/A

*height of screen

Proportional to Image Masthead Specs

Height

Height is defined by ratio of the primary image

Max Height (mobile)

N/A

Max Height (tablet up)

N/A

*height of screen

Example of Default masthead with SVG and site max-width - starts here

Example of 'proportional to image' masthead

Custom 'stacked' and 'proportional medium screen upwards' masthead

*T&Cs apply. Selected lines only.

*T&Cs apply. Selected lines only.

Sale page example starts here - includes items with SVGs

Module template examples - starts here

The world of Jack Wills

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec. Praesent id molestie sem, sit amet volutpat orci.

Shop new arrivals
Explore the campaign

The world of Jack Wills

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec. Praesent id molestie sem, sit amet volutpat orci.

Shop new arrivals
Explore the campaign
Shop Ladies

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec.

Shop the edit

Who we are

Who we are

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec.

Shop the edit

Who we are

Who we are

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec.

Shop the edit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus.
Shop Ladies
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus.
Shop Ladies
Shop now

Global
Commu-knit-y

Celtic-inspired cable knits, soft cashmeres, lacy cardigans, cosy crews, & V-necks.

Shop knitwear
Shop now

Know your a* dress

Discover dresses for all occasions in your favourite fits, colours, prints & styles.

Shop dresses
Shop now

Global
Commu-knit-y

Celtic-inspired cable knits, soft cashmeres, lacy cardigans, cosy crews, & V-necks.

Shop knitwear
Shop now

Know your a* dress

Discover dresses for all occasions in your favourite fits, colours, prints & styles.

Shop dresses
Shop Ladies

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec.

Shop the edit
Shop Ladies

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec.

Shop the edit
Shop Ladies

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet pulvinar neque vel rhoncus. Sed dapibus in elit eu gravida. Sed vehicula finibus magna, ac tincidunt tortor pretium nec.

Shop the edit

Tag Us #JackWills

How do your wear Jack Wills? Share a photo on Instagram & tag #JackWills for a chance to be featured if we love your look.

Jack_wills_instagram

The fabric of Jack

Go behind the seams to discover all about our products' journeys, from the factories to the shop floor.

Find out more
Jack_wills_instagram

The JW handbook

Read all about it! From features, interviews & playlists to style advice & travel guides, it's all over on the blog.

Find out more
Jack_wills_instagram

New store in St.Ives

We've just opened our doors to the people of St. Ives - pop in and say hello!

Find out more

Documentation - starts here

Headings

Headings should use the o-header class. For sizing you can use the modifyer classes ranging from 1-7. E.g. o-header--h4

You can have dynamic font sizes which are smaller for mobile and level up on larger screen. E.g. .o-header--h3-h2

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
Header 7

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
Header 7

This is a Baskerville heading

This is a Baskerville heading

This is a Baskerville heading

This is a Baskerville heading

Underlined h2 with h4 sizing

Primary header

Sub header

Sub header

Primary header

Sub header

Primary header

Items

Items are the building block of the site. Wherever you need a picture and related copy use an item

Modifyer classes

  • o-item__image--100vw
  • o-item__image--fitscreen
  • o-item__content--overlay
  • o-item__content--overlayMiddle
  • o-item__content--overlayStretched
Shop now

Against the elements

Coats & jackets designed to keep you warm, dry & stylish from the Central line to the coastline.

Shop jackets
Shop now
Shop Jackets

Against the elements

Coats & jackets designed to keep you warm, dry & stylish from the Central line to the coastline.

Shop jackets

Buttons

Buttons use the class o-btn

Underlined links use the class o-link

For 2 or more grouped buttons, wrap buttons in element with class of o-buttons

Modifyer classes

  • o-btn--sm
  • o-btn--md
  • o-btn--lg
  • o-btn--plain
  • o-btn--basic
  • o-btn--primary
Button sizes

Standard button - small

Gill Sans Caps

Standard button

Gill Sans Caps

Standard button - large

Gill Sans Caps

Basic button - small

Gill Sans Caps

Basic button

Gill Sans Caps

Basic button - large

Gill Sans Caps
Default Colour

Standard button

Gill Sans Caps

Standard button - small

Gill Sans Caps

Secondary button

Gill Sans Caps

Primary button

Gill Sans Caps

Basic button

Gill Sans Caps

Containers

Use the class container for general puporse containers. It defines gutters and max-width for all screen sizes

For a container with the maximum site width but no gutters use the class u-site-max-width in combination with u-mx-auto for centering.

Related classes

  • container-md
  • container-lg
  • u-max-width-1 REM based equivalent to three wide column
  • u-max-width-2 REM based equivalent to four wide column
  • u-max-width-3 REM based equivalent to eight wide column
  • u-max-width-4 REM based equivalent to ten wide column
  • u-max-width-5 REM based equivalent to eleven wide column

Sections

When defining blocks of content use a section element with a class of o-section

This adds vertical padding and adjacent sections apply a divider by default

Related classes

  • o-section--divider
  • o-section--divider-none
  • o-section--divider-none-top
  • o-section--divider-none-bottom
  • o-section--divider-sm
  • o-section--divider-top-sm
  • o-section--divider-bottom-sm
  • o-section--divider--max-width-1
  • o-section--divider--max-width-2
  • o-section--divider--max-width-3
  • o-section--divider--max-width-4

Grid

A grid layout can be defined with a grid wrapper element

Columns are direct children of the grid element and defined with a column class

Columns widths can be defined on the column element by using the following convention [number] wide class

three wide

three wide

three wide

three wide

two wide

six wide

four wide

Related grid element classes

  • relaxed
  • very relaxed
  • stackable
  • padded
  • gutterless
  • equal width
  • [number] wide
  • horizontally padded
  • vertically padded
  • left floated
  • right floated
  • top aligned
  • middle aligned
  • bottom aligned
  • left aligned
  • right aligned
  • center aligned
  • justified
  • centered

Rows

Rows are groups of columns which are aligned horizontally.

Rows can either be explicit, marked with an additional row element, or implicit, automatically occurring when no more space is left in a previous row.

After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm.

column

column

column

column

column

column

column

Negative Margins

Since all grid columns include gutters, grids use negative margins to make sure that the first and last columns sit flush with content outside the grid.

In some cases, like when a column or row is colored, you may want to avoid using negative margins. You can do this by using a padded grid variation.

column

column

column

column

column

column

column

column

column

column

column

Nested grids

column

column

column

column

column

column

column

Clearing content

Row wrappers will automatically clear previous columns, making them useful when using floated variations.

column

column

column

column

column

Reponsive Grid

Columns (and rows) can have their width defined at multiple breakpoints. Use the convention [number] wide [screen]

column

column

column

column

column

Equal Width Grid

Make all columns equal width equal width

column

column

column

column

column

Stackable Grid

Make columns stack on mobile (below 768px). Use stackable

column

column

column

Gutterless Grid

Use gutterless

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Column 7

Column 8

Column 9

Column 10

Column 11

Column 12

Relaxed Grid

Use relaxed

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Very Relaxed Grid

Use very relaxed

Column 1

Column 2

Column 3

Menu

Please note: There are some existing | transitional CSS conflict issues with the menu that won't exist on new CSS.

Default menu (including header)

Equal width menu

This example below also includes underline on hover style and a submenu.

Vertical menu

This example below also includes underline on hover style and a submenu.

Stackable menu

Stacks to select-style menu on mobile

Behaivioral requirements not yet done

Ultility classes

There are many useful ultility classes which you can use to build layouts and style content

Please refer to less files within less/utility for a reference

Layout

  • u-max-width-[1-5]
  • u-max-site-width
  • u-[direction]-0
  • u-[direction]-auto

See /less/utility/layout.less for more

Flex

  • u-flex
  • u-inline-flex
  • u-flex-column
  • u-flex-column-reverse
  • u-items-start
  • u-items-end

See /less/utility/flex.less for more

Margin

  • u-mt[1-5]
  • u-mb[1-5]
  • u-ml[1-5]
  • u-mr[1-5]
  • u-mx[1-5]
  • u-my[1-5]
  • u-my[1-5]
  • u-mx-auto
  • u-mxn[1-5]

See /less/utility/margin.less for more

Padding

  • u-pt[1-5]
  • u-pb[1-5]
  • u-pl[1-5]
  • u-pr[1-5]
  • u-px[1-5]
  • u-py[1-5]
  • u-py[1-5]

See /less/utility/flex.less for more

SVGs

UI

Care guide

Social

Payment