*T&Cs apply. Selected lines only.


Default Masthead
A default masthead (inc it's content e.g SVG) responds to the window / screen height.
You can make this adhere to the site max width by adding the following classes u-max-site-width u-mx-auto
Alternatively, you can add a container class if you want gutters
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
*T&Cs apply. Selected lines only.
Custom 'stacked' and 'proportional medium screen upwards' masthead


*T&Cs apply. Selected lines only.
*T&Cs apply. Selected lines only.
Enter code: FRIENDS25
*T&Cs apply. Selected lines only.
Sale page example starts here - includes items with SVGs
Primary header
Sub header
Sub header
Primary header
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 arrivalsExplore 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 arrivalsExplore the campaign



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 editLorem 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





Global
Commu-knit-y
Celtic-inspired cable knits, soft cashmeres, lacy cardigans, cosy crews, & V-necks.
Shop knitwear
Know your a* dress
Discover dresses for all occasions in your favourite fits, colours, prints & styles.
Shop dresses


Global
Commu-knit-y
Celtic-inspired cable knits, soft cashmeres, lacy cardigans, cosy crews, & V-necks.
Shop knitwear
Know your a* dress
Discover dresses for all occasions in your favourite fits, colours, prints & styles.
Shop dresses



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
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
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 editTag 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.




















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
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
New store in St.Ives
We've just opened our doors to the people of St. Ives - pop in and say hello!
Find out moreDocumentation - 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





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

Against the elements

Against the elements
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 CapsStandard button
Gill Sans CapsStandard button - large
Gill Sans CapsBasic button - small
Gill Sans CapsBasic button
Gill Sans CapsBasic button - large
Gill Sans CapsDefault Colour
Standard button
Gill Sans CapsStandard button - small
Gill Sans CapsSecondary button
Gill Sans CapsPrimary button
Gill Sans CapsBasic button
Gill Sans CapsAdditional Colour
Icon buttons
Inverted buttons
Inverted buttons with shadow
Button Collection
Default
Grouped
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