Typography Example (Version 2)

All Variants

display-large - The quick brown fox jumps.

display-medium - The quick brown fox jumps.

display-small - The quick brown fox jumps.

headline-large - The quick brown fox jumps.

headline-medium - The quick brown fox jumps.

headline-small - The quick brown fox jumps.

title-large - The quick brown fox jumps.

title-medium - The quick brown fox jumps.
title-small - The quick brown fox jumps.
label-large - The quick brown fox jumps.label-medium - The quick brown fox jumps.label-small - The quick brown fox jumps.body-large - The quick brown fox jumps.body-medium - The quick brown fox jumps.body-small - The quick brown fox jumps.

Semantic Elements

Heading 1

Paragraph with body-large style

Colors

Primary Color Text

Secondary Color Text

Tertiary Color Text

Error Color Text

On Surface Color Text

Link Underline

No underline linkHover underline linkAlways underline link

By clicking "Accept", you agree to our Terms of Service and Privacy Policy

Display

Cortado iced

Enter my new flame: the iced cortado. A cortado is an espresso with an equal amount of steamed milk. I drink it when I want a caffeine pick-me-up without the bitterness or acidity of pure espresso.

Label

Shop popular categories:

Navigation

Code & Terminal

To install the package, run npm install @material/web in your terminal.

Press Ctrl + C to copy or Ctrl + V to paste.

Common terminal commands:

cd - Change directory

ls - List files

mkdir - Create directory

Blockquotes

Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs

Material Design 3

Material 3 is the latest version of Google's open-source design system. It brings new features that help teams build high-quality digital experiences.

Learn more about Material 3

Code example with explanation: const [count, setCount] = useState(0);

Keyboard shortcut with explanation:

Ctrl + Shift + P

Opens the command palette in VS Code, allowing quick access to all commands. Ctrl + Shift + P