DhHeadline / DhBody / DhLabel
Three stateless presets mapped to the Material 3 type scale. `as` picks the semantic element; `size` picks the visual tier.
Headline / Display / Title
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<DhHeadline as="h1" size="display-md">Welcome</DhHeadline>
<DhHeadline as="h2" size="headline-lg">Section</DhHeadline>
<DhHeadline size="title-md">Subsection</DhHeadline>Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
<DhBody size="lg">Larger body copy.</DhBody>
<DhBody size="md">Default paragraph.</DhBody>
<DhBody size="sm">Footnote or helper detail.</DhBody>Label
<DhLabel size="lg">BIG LABEL</DhLabel>
<DhLabel size="md">Medium label</DhLabel>
<DhLabel size="sm">Small caption</DhLabel>
<!-- Wire to an <input> -->
<DhLabel as="label" for="email" size="lg">Email</DhLabel>
<input id="email" />Semantic override
`as` picks the element for the outline; `size` picks the visual tier.
<h1> with headline-sm visuals
<h3> with title-md visuals
<!-- Visually headline-sm but semantically h1 -->
<DhHeadline as="h1" size="headline-sm">Welcome</DhHeadline>
<!-- Native <label> with for= -->
<DhLabel as="label" for="field">Field label</DhLabel>