Franklin
Design system & brand guide
Brand & visual identity
Tone of voice
Component library
V.1.2.60
Menu
Getting started
Introduction
Installation
Publishing the system
Creating a component
Foundations
Color
Space
Grid
Generic
Layout
Wrapper
Typography
Flow
Iconography
Approach to CSS
Utilities
Components
Accordion
Alert
Error
Warning
Success
Different icon
With link
Multiline
Back to top
Breadcrumb
Button
Red
Blue
White
Utility blue
Outline green
Outline white
Small
Loading
Disabled
Campaign
Switch
Petrol
Blue
Orange
No image
Comparison table
Many products
Eyebrow
Blue
Blue step 2
Grey
Petrol
Red
Utility blue
Utility blue step 3
Utility blue step 3 with icon
Utility orange
White
Facet
Multiple
Features table
Filter search
Footer
Gallery
Header
Blog
Store
Hero
With content
With background image
With breadcrumb
With call to action
Homepage
Homepage (light)
Homepage with video
Hotspot image
Icons
Internal nav
Sticky on scroll
Meta box
Simple
Off-canvas
Mobile only
Option list
In columns
Post meta
With series
With author link
Prose
With lede
Left blockquote
Quote
With logo
Scroll spy
Series
Slat
White - spaced
White - no spacing
Grey
Concentric
Dots
Crystal
Arc
Large padding
Table
Fixed Layout
Vertical headers
No headers
Center
Responsive
Responsive 3 rows
Non-responsive 3 rows
Tabs
Scroll shadows
Tabs - radio
Text with icon
As link
Align right
USP
Bordered
With icon
With eyebrow
With link
YouTube
Cards
Card
Product Card - Promotional
Product Card - Detailed
Product card - Range (no image)
Product - Card Store
Article card - Whitepaper Medium
Article card - Blog post
Featured event card - Future
Featured event card - Past
Featured event card - Multi
Event card - Future (home)
Event card - Series part (home)
Event card - Past (home)
Event card - Past (home) multicolumn
Event card - Past (away)
Article card - single
Article card - Alt
Article card - Whitepaper
Career card
Product card - single
In-person event card
In-person event card with image
On-demand event card
On-demand event card with image
Event series card
Event series card with image
Existing customer card
Large
Featured article card
Industry card
Heading only
Measurement type card
Product card
With features list
Product signpost
Bordered
Search result card
Signpost
Vertical
Bordered
Technology card
Forms
Checkbox
Checked
Disabled
Input
With error
With error message
With button
Disabled
Radio
Checked
Disabled
Select
Selected option
With error
With error message
Disabled
Textarea
With error
With error message
Disabled
Toggle
Toggled on
Disabled
Example patterns
Overview
Form inputs
Grid of cards
New Style Form
USPs
Example pages
Overview
Creating a page
Blog
Blog post
Card test
Events hub
Home
Industry
Past webinar
Product
Products
Range
Request a quote
Thank you for contacting us
Webinar
Webinars
Webinars - featured layout
Ω Altcha
Ω Cloudflare Turnstile
Ω hCaptcha
Eyebrow
Example
Code
Context
Variants
BitBucket
Toggle background
Open fullscreen
<
span
class
=
"
mp c-eyebrow
"
>
Product range
</
span
>
Copy
{
"text"
:
"Product range"
,
"colour"
:
""
}
Copy
Eyebrow
Blue
Blue step 2
Grey
Petrol
Red
Utility blue
Utility blue step 3
Utility blue step 3 with icon
Utility orange
White