Stylesheet
XPS Dark Blue
#00338D
XPS Blue
#00A9E0
XPS Green
#7AB800
XPS Slate
#333C41
XPS Orange
#DD4814
XPS Yellow
#F0AB00
XPS Pink
#C50084
XPS Teal
#009AA6
XPS Black
#1D1D1D
XPS White
#FFFFFF
XPS Keyline Grey
#D4DBE2
XPS Light Grey
#F0F3F6
Hero
60 Gotham Bold / 40 Mobile
Hero thin
40 Gotham Thin / 33 Mobile
Stats
52 Gotham Bold / 35 Mobile
H1
52 Gotham Bold / 35 Mobile
H2 / 22 Mobile
32 Gotham Bold
Lead
29 Gotham Bold / 21 Mobile
H3
27 Gotham Medium / 20 Mobile
H4
22 Gotham Book / 19 Mobile
H5
17 Gotham Bold / 16 Mobile
Body
16 Gotham Book / 16 Mobile
Buttons
Inline text example link
Blockquotes
Big Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Small Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Hero
60 Gotham Bold / 40 Mobile
Hero thin
40 Gotham Thin / 33 Mobile
Stats
52 Gotham Bold / 35 Mobile
H1
52 Gotham Bold / 35 Mobile
H2 / 22 Mobile
32 Gotham Bold
Lead
29 Gotham Bold / 21 Mobile
H3
27 Gotham Medium / 20 Mobile
H4
22 Gotham Book / 19 Mobile
H5
17 Gotham Bold / 16 Mobile
Body
16 Gotham Book / 16 Mobile
Buttons
Inline text example link
Blockquotes
Big Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Small Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Hero
60 Gotham Bold / 40 Mobile
Hero thin
40 Gotham Thin / 33 Mobile
Stats
52 Gotham Bold / 35 Mobile
H1
52 Gotham Bold / 35 Mobile
H2 / 22 Mobile
32 Gotham Bold
Lead
29 Gotham Bold / 21 Mobile
H3
27 Gotham Medium / 20 Mobile
H4
22 Gotham Book / 19 Mobile
H5
17 Gotham Bold / 16 Mobile
Body
16 Gotham Book / 16 Mobile
Buttons
Inline text example link
Blockquotes
Big Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Small Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Hero
60 Gotham Bold / 40 Mobile
Hero thin
40 Gotham Thin / 33 Mobile
Stats
52 Gotham Bold / 35 Mobile
H1
52 Gotham Bold / 35 Mobile
H2 / 22 Mobile
32 Gotham Bold
Lead
29 Gotham Bold / 21 Mobile
H3
27 Gotham Medium / 20 Mobile
H4
22 Gotham Book / 19 Mobile
H5
17 Gotham Bold / 16 Mobile
Body
16 Gotham Book / 16 Mobile
Buttons
Inline text example link
Blockquotes
Big Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Small Blockquote
Semper feugiat nibh sed pulvinar proin gravida a diam sollicitudin tempor id fames ac turpis egestas integer eget feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit tincidunt vitae semper quis lectus nulla at volutpat diam ut dolor sed viverra ipsum nunc aliquet bibendum tristique magna sit amet purus gravida.
Desktop homepage lock-up - Hero Thin & Hero
Other banners lock-up - H2 & Hero Thin
Options in Pink, Teal and Violet
Section Container Blue (with lines)
Options in Yellow, Green, Orange, Pink, Blue, Blue Light, Blue Dark, Teal
Add class 'section-lines-right' for right alignment of X
Add class 'section-lines-offset' to position X partly off screen - needs enough depth to show
Classes can be combine for right alignment and off screen
Accordion white on light grey background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Accordion light grey on white background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Accordion alternate colourways
Options in Green, Orange, Yellow, Pink, Blue, Blue Dark
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Content footnote style
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fermentum vel nunc vel iaculis. Morbi eget ligula sed mi sagittis malesuada sed eget leo.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse fermentum vel nunc vel iaculis.
- Morbi eget ligula sed mi sagittis malesuada sed eget leo.
Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Tabs Grey
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non felis sit amet massa varius ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum quis quam at felis maximus maximus eu at enim.
Cras vestibulum vel lacus a consectetur. Curabitur elementum quis sem sit amet fringilla. Etiam tincidunt purus ex, id eleifend erat blandit vitae. Nullam id blandit eros. Nam faucibus bibendum quam a volutpat. Etiam est lectus, suscipit vitae sapien at, congue elementum leo.