J&Co. Style Guide
Last updated May 16, 2026
Typography
HTML tags define default Heading styles. Also available are utility classes when typography doesn't match HTML tags.
All H1 Headings
HTML h1 – This is an h1 heading in sentence form.
u-text-h1
Heading h1 – This is an h1 heading in sentence form.
All H2 Headings
HTML h2 – This is an h2 heading in sentence form.
u-text-h2
Heading h2 – This is an h2 heading in sentence form.
All H3 Headings
HTML h3 – This is an h3 heading in sentence form.
u-text-h3
Heading h3 – This is an h3 heading in sentence form.
All H4 Headings
HTML h4 – This is an h4 heading in sentence form.
u-text-h4
Heading h4 – This is an h4 heading in sentence form.
All H5 Headings
HTML h5
u-text-h5
Heading h5
All H6 Headings
HTML h6
u-text-h6
Heading h6
Paragraph text styling
All Paragraphs
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.
All Links
All Linksu-text-link
text-linku-text-link-no-underline
link-no-underlineu-text-large
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.
u-text-medium
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.
u-text-small
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.
Additional text utilities
u-text-transform-uppercase
u-text-transform-uppercase
u-text-bold
u-text-bold
u-text-underline
u-text-underline
u-text-strikethrough
u-text-strikethrough
u-line-clamp-1
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.
u-line-clamp-2
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.
u-line-clamp-3
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. 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.
u-text-family-primary
u-text-family-primary
u-text-family-secondary
u-text-family-secondary
Text alignment classes
u-text-align-left
text-align-left
u-text-align-center
text-align-center
u-text-align-right
text-align-right
Rich text styling
u-rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
u-rich-text-clear
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
u-rich-text-clear-h1
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
u-rich-text-clear-h2
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a block quote
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
Colors
Manage recurring text colors.
u-text-color-dark
u-text-color-dark
u-text-color-light
u-text-color-light
Manage recurring background colors.
u-bg-dk-brown
u-bg-brown
u-bg-white
u-bg-cream
u-bg-red
u-bg-orange
u-bg-blue
u-bg-lt-blue
u-bg-green
u-bg-tan
UI Elements
Buttons
Icons
Available component icons
Column Structure
Defined and flexible core structure we can use on all or most pages.
u-container-xs
u-container-small
u-container
u-container-full
u-columns-12
u-columns-10
u-columns-8
u-columns-6
u-columns-4
u-columns-2
u-columns-1
Flexbox
Horizontal Flex Utilities
u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch
u-hflex-wrap
Vertical Flex Utilities
u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between
Spacing
Padding
none
xxs
xs
small
main
medium
large
xl
xxl
Gap
u-gap-none
u-gap-xxs
u-gap-xs
u-gap-small
u-gap-main
u-gap-medium
u-gap-large
u-gap-xl
u-gap-xxl
Utility Classes
Useful utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-desktop
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-hidden
overflow-scroll
u-zindex-0
u-zindex-1
u-zindex-2
u-zindex-3
u-zindex-unset
u-zindex-negative
u-radius-none
u-radius-main
u-radius-round
u-width-full
u-height-full
u-text-margin-none
u-text-margin-none
u-color-faded
u-color-faded
u-button-margin-none
view insight
u-margin-trim
u-img-cover
u-position-relative
u-position-sticky
u-position-docking
u-position-absolute
u-position-fixed
u-padding-inset
u-events-none
Borders
Various border utility classes.
u-border-all
u-border-horiz
u-border-vert
u-border-top
u-border-bottom
u-border-left
u-border-right
u-border-nobottom
u-border-notop
Images
Utility styles for images.
u-img-shrink
u-radius-none
u-radius-small
u-radius-main
u-radius-round
Forms
Form Elements