Featured post
Heading
Read Post
Read Post
Transit template style guide
Type
Headers
H1
Heading style 1
H2
Heading style 2
H3
Heading style 3
H4
Heading style 4
H5
Heading style 5
H6
Heading style 6
Type sizes
Text size large
Sample text is being used as a placeholder for real text that is normally present.
Text size medium
Sample text is being used as a placeholder for real text that is normally present.
Text size regular
Sample text is being used as a placeholder for real text that is normally present.
Text size small
Sample text is being used as a placeholder for real text that is normally present.
Text size tiny
Sample text is being used as a placeholder for real text that is normally present.
Type styles
Text style strikethrough
Sample text is being used as a placeholder for real text that is normally present.
Text style italic
Sample text is being used as a placeholder for real text that is normally present.
Text style muted
Sample text is being used as a placeholder for real text that is normally present.
Text style all caps
Sample text is being used as a placeholder for real text that is normally present.
Text style quote
Sample text is being used as a placeholder for real text that is normally present.
Type weights
Text weight Regular
text weight normal
Text weight Medium
text weight medium
Text weight Semi Bold
text weight semi bold
Type alignment
Text align left
text align left
Text align center
text align center
Text align right
text align right
Links and labels
Text Label
Text Label
Text Label Wrapper
Text Label Wrapper
Text Label
Text Link Wrapper
Text Link Wrapper
Text Link Wrapper
Text Link Block
Read more
Read more
Text Link Pill
Text Link Pill
Text Link Pill
Containers
Container Xsmall
Container Small
Container Regular
Max widths
Max width xxlarge
Max width xlarge
Max width large
Max width medium
Max width small
Max width xsmall
Max width xxsmall
Spacing
Padding
padding Global
padding bottom
padding top
padding vertical
padding horizontal
padding left
padding right
padding 0
padding tiny
padding xxsmall
padding xsmall
padding small
padding medium
padding large
Padding Xlarge
Padding XXlarge
Padding Huge
Padding Xhuge
Padding XXHuge
Margins
Margin Bottom
Margin Top
Margin Vertical
Margin Horizontal
Margin Left
Margin Right
Margin 0
Margin Tiny
Margin XXSmall
Margin XSmall
Margin Small
Margin Medium
Margin Large
Margin XLarge
Margin XXLarge
Margin Huge
Margin XHuge
Margin XXHuge
Grids
Grid 1 Column
Grid 2 Column
Grid 3 Column
Grid 4 Column
Grid 2-1 Column
Grid 1-2 Column
Flex boxes
Flex Horizontal
Flex Vertical
Flex Wrap
Rich text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
"Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present."
- Item 1
- Item 2
- Item 3
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
HTML tags
H1 Heading
Heading 1
H2 Heading
Heading 2
H3 Heading
Heading 3
H4 Heading
Heading 4
H5 Heading
Heading 5
H6 Heading
Heading 6
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Link
Text LinkBlock Quote
"Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present."
Ordered list
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Unordered list
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Image
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Images
Aspect Ratio Square
Aspect Ratio Portrait
Aspect Ratio Landscape
Aspect Ratio Widescreen
Color
Primary
Color Primary 1
Neutrals
Color Neutral 1
Color Neutral 2
Color Neutral 3
Color Neutral 4
Color Neutral 5
Color Neutral 6
Color Neutral 7
Color Neutral 8
Buttons
Button
get a quote
get a quote
Button Secondary
get a quote
get a quote
Button Dark
get a quote
get a quote
Button Inverted
Button Outline
get a quote
get a quote
Icons
Icon Xsmall
Icon Small
Icon Medium
Icon Large
Useful classes
Hidden
This class is hidden
Hidden Tablet
This class is hidden on tablet
Hidden Mobile Portrait
This class is hidden on mobile portrait
Hidden Mobile Landscape
This class is hidden on mobile landscape
Overflow Visible
Overflow Hidden
Overflow Auto
Overflow Scroll
Pointer Event Auto
Pointer Event None
Spacing Clean
Align Center
Align Left
Align Right
Z Index 1
Z Index 2
Components
Blog Thumbnail Post
Category Label
Blog post title
Author name
Date
Team Member Thumbnail
Sarah Marshall
Head of Sales
Card Features
Sustainable Shipping Initiatives
Trust in the security and reliability of your shipments
Card Summary
Card Header
This is a list item
This is a list item
This is a list item
Accordion Item
Accordion question
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.