Utilities for controlling the font family of an element.
Font sans
The quick brown fox jumps over the lazy dog.
Font serif
The quick brown fox jumps over the lazy dog.
Font mono
The quick brown fox jumps over the lazy dog.
All HTML headings, <h1> through <h6>, are available.
All H1 Headings
Heading h1
All H2 Headings
Heading h2
All H3 Headings
Heading h3
All H4 Headings
Heading h4
All H5 Headings
Heading h5
All H6 Headings
Heading h6
Heading h1 through Heading h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Title 3xl
The quick brown fox jumps over the lazy dog.
Title 2xl
The quick brown fox jumps over the lazy dog.
Title xl
The quick brown fox jumps over the lazy dog.
Title lg
The quick brown fox jumps over the lazy dog.
Title md
The quick brown fox jumps over the lazy dog.
Title sm
The quick brown fox jumps over the lazy dog.
Title xs
The quick brown fox jumps over the lazy dog.
Font [Title]
The quick brown fox jumps over the lazy dog.
Text 2xl
The quick brown fox jumps over the lazy dog.
Text xl
The quick brown fox jumps over the lazy dog.
Text lg
The quick brown fox jumps over the lazy dog.
Text base
The quick brown fox jumps over the lazy dog.
Text sm
The quick brown fox jumps over the lazy dog.
Text xs
The quick brown fox jumps over the lazy dog.
Italic
The quick brown fox jumps over the lazy dog.
Not italic
The quick brown fox jumps over the lazy dog.
Font Weight [Light]
The quick brown fox jumps over the lazy dog.
Font Weight [Normal]
The quick brown fox jumps over the lazy dog.
Font Weight [Medium]
The quick brown fox jumps over the lazy dog.
Font Weight [Semibold]
The quick brown fox jumps over the lazy dog.
Font Weight [Bold]
The quick brown fox jumps over the lazy dog.
Font Weight [Black]
The quick brown fox jumps over the lazy dog.
Letters Tighter
The quick brown fox jumps over the lazy dog.
Letters Tight
The quick brown fox jumps over the lazy dog.
Letters Normal
The quick brown fox jumps over the lazy dog.
Letters Loose
The quick brown fox jumps over the lazy dog.
Letters Looser
The quick brown fox jumps over the lazy dog.
Leading none
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Tighter
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Tight
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Normal
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Loose
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Looser
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Primaries and grays controlled by the Global Swatch feature.
Unordered list item
Unordered list item
Unordered list item
Ordered list item
Ordered list item
Ordered list item
You can add vertical spacings between lists with modifier classes. Use Column xxs, Column xs, Column sm, Column base, Column md or Column lg classes.
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
List item
You can add horizontal spacings between lists with modifier classes. Use Row xxs, Row xs, Row sm, Row base, Row md or Row lg classes.
You can combine both lists to become the checked lists or list with other icons. Use Material icons, Material icons rounded, Material icons sharp or Material icons outlined classes specific icon.
person
Profile
tune
Settings
check
Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
Sizing sm
[↓] Column xs
···[→] Row xs
···[→] Row xs
···[→] Row xs
[↓] Column sm
···[→] Row xs
···[→] Row xs
···[→] Row xs
[↓] Column sm
···[→] Row xs
···[→] Row xs
···[→] Row xs
Sizing lg
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
[↓] Column md
···[→] Row sm
···[→] Row sm
···[→] Row sm
[↓] Column md
···[→] Row sm
···[→] Row sm
···[→] Row sm
Typography
Typography licensed under the SIL Open Font License, and is free for personal and commercial use.
Changing the color and size of Material Icons
Simply apply the text color or size class to the icon.
Avatar classes are applied to the image so that it scales with the parent element. Use Avatar xs, Avatar sm, Avatar md, Avatar lg, Avatar xl, Avatar 2xl, Avatar 3xl or Avatar 4xl classes to change size.
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Avatar xs
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Avatar sm
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Avatar md
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Avatar lg
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Avatar xl
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Avatar 2xl
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Avatar 3xl
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded xs
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded sm
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded md
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded lg
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded xl
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded 2xl
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded 2xl
![](https://cdn.prod.website-files.com/64da725ccabc41e4f4e24a5c/64da725ccabc41e4f4e24c20_testimonial-01-bright-webflow-uikit.jpg)
Rounded 2xl
This is some text inside of a div block.
This is some text inside of a div block.
What’s a Rich Text element?
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.
Static and dynamic content editingp
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.