Breeze Typography

Headings

All HTML headings, <h1> through <h6>, are available. Additionally, .h1 through .h6 classes are also available. You can also emphasize the text using <strong> tags.

.h1 Breeze Heading

.h2 Breeze Heading

.h3 Breeze Heading

.h4 Breeze Heading

.h5 Breeze Heading

.h6 Breeze Heading

Texts

Breeze provides a set of useful css helpers for work with text.

Class name	Result
font-serif	Serif font-family
font-sans	Sans font-family
font-mono	Monospace font-family

font-thin	Font-weight 100
font-extralight	Font-weight 200
font-light	Font-weight 300
font-normal	Font-weight 400
font-medium	Font-weight 500
font-semibold	Font-weight 600
font-bold	Font-weight 700
font-extrabold	Font-weight 800
font-black	Font-weight 900

text-xs	Extra small font-size
text-sm	Small font-size
text-base	Base font-size
text-lg	Large font-size
text-xl	Extra large font-size
text-2xl	Exxtra large font-size
text-3xl	Exxxtra large font-size
text-4xl	Exxxxtra large font-size
text-5xl	Exxxxxtra large font-size

leading-tight	Breeze is a free, open-source performant frontend for Magento and Adobe Commerce. It consists of two parts: A module that replaces default JS stack with our own implementation. We removed a bunch of js libraries and greatly reduced script evaluation time. This part could be used on top of custom Luma-based theme. A theme created from scratch with built-in critical and deferred CSS splitting, razor sharp images for all devices, RTL support, keyboard navigation. It doesn't use Luma or Blank theme as its base.
leading-snug	Breeze is a free, open-source performant frontend for Magento and Adobe Commerce. It consists of two parts: A module that replaces default JS stack with our own implementation. We removed a bunch of js libraries and greatly reduced script evaluation time. This part could be used on top of custom Luma-based theme. A theme created from scratch with built-in critical and deferred CSS splitting, razor sharp images for all devices, RTL support, keyboard navigation. It doesn't use Luma or Blank theme as its base.
leading-normal	Breeze is a free, open-source performant frontend for Magento and Adobe Commerce. It consists of two parts: A module that replaces default JS stack with our own implementation. We removed a bunch of js libraries and greatly reduced script evaluation time. This part could be used on top of custom Luma-based theme. A theme created from scratch with built-in critical and deferred CSS splitting, razor sharp images for all devices, RTL support, keyboard navigation. It doesn't use Luma or Blank theme as its base.
leading-relaxed	Breeze is a free, open-source performant frontend for Magento and Adobe Commerce. It consists of two parts: A module that replaces default JS stack with our own implementation. We removed a bunch of js libraries and greatly reduced script evaluation time. This part could be used on top of custom Luma-based theme. A theme created from scratch with built-in critical and deferred CSS splitting, razor sharp images for all devices, RTL support, keyboard navigation. It doesn't use Luma or Blank theme as its base.
leading-loose	Breeze is a free, open-source performant frontend for Magento and Adobe Commerce. It consists of two parts: A module that replaces default JS stack with our own implementation. We removed a bunch of js libraries and greatly reduced script evaluation time. This part could be used on top of custom Luma-based theme. A theme created from scratch with built-in critical and deferred CSS splitting, razor sharp images for all devices, RTL support, keyboard navigation. It doesn't use Luma or Blank theme as its base.

Lists

Unordered list <ul>

First item
Second
- Subitem of the second item
Third item

Ordered list <ol>

First item
Second
1. Subitem
Third item

Unstyled list .unstyled

First item
Second item
- Subitem
Third item

Tables

Regular table <table>

#	Firstname	Lastname	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Mobile-friendly table .table

#	Firstname	Lastname	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Colors

color-brand

color-brand-secondary

color-success

color-danger

color-info

color-base

color-link

color-muted

color-subtle

bg-base

bg-muted

bg-subtle

Shadows

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

shadow-sm-around

shadow-around

shadow-md-around

shadow-lg-around

shadow-xl-around

shadow-2xl-around

Dark Section

Use .color-invert class name on the section with dark background and Breeze will change text, buttons, forms, and links to match this new dark background. This feature is handy when using the dark image in the slider and regular links or buttons looks odd.