Utility classes that can be used to apply our typography styles to elements.
<h1 ods-text="display size:5xl">Display 5xl Regular</h1><h1 ods-text="display size:4xl">Display 4xl Regular</h1><h1 ods-text="display size:3xl">Display 3xl Regular</h1>
<br />
<h1 ods-text="display semibold size:5xl">Display 5xl Semibold</h1><h1 ods-text="display semibold size:4xl">Display 4xl Semibold</h1><h1 ods-text="display semibold size:3xl">Display 3xl Semibold</h1>const Example = () => ( <> <h1 ods-text="display size:5xl">Display 5xl Regular</h1> <h1 ods-text="display size:4xl">Display 4xl Regular</h1> <h1 ods-text="display size:3xl">Display 3xl Regular</h1>
<br />
<h1 ods-text="display semibold size:5xl">Display 5xl Semibold</h1> <h1 ods-text="display semibold size:4xl">Display 4xl Semibold</h1> <h1 ods-text="display semibold size:3xl">Display 3xl Semibold</h1> </>);
export default Example;<h1 ods-text='headline size:2xl'>Headline 2xl Regular</h1><h2 ods-text='headline size:xl'>Headline Extra Large Regular</h2><h3 ods-text='headline size:lg'>Headline Large Regular</h3>
<br />
<h1 ods-text='headline semibold size:2xl'>Headline 2xl Semibold</h1><h2 ods-text='headline semibold size:xl'>Headline Extra Large Semibold</h2><h3 ods-text='headline semibold size:lg'>Headline Large Semibold</h3>const Example = () => ( <> <h1 ods-text='headline size:2xl'>Headline 2xl Regular</h1> <h2 ods-text='headline size:xl'>Headline Extra Large Regular</h2> <h3 ods-text='headline size:lg'>Headline Large Regular</h3>
<br />
<h1 ods-text='headline semibold size:2xl'>Headline 2xl Semibold</h1> <h2 ods-text='headline semibold size:xl'>Headline Extra Large Semibold</h2> <h3 ods-text='headline semibold size:lg'>Headline Large Semibold</h3> </>);
export default Example;<div class='ods-demo-layout'> <span ods-text='content'>Text Regular</span> <span ods-text='content size:md'>Text Medium</span> <span ods-text='content size:sm'>Text Small</span> <span ods-text='content size:xs'>Text Xtra Small</span>
<br />
<span ods-text='content semibold'>Text Semibold</span> <span ods-text='content semibold size:md'>Text Medium Semibold</span> <span ods-text='content semibold size:sm'>Text Small Semibold</span> <span ods-text='content semibold size:xs'>Text Xtra Small Semibold</span>
<br />
<span ods-text='code'>Code Regular</span> <span ods-text='code semibold'>Code Semibold</span></div>
<style> .ods-demo-layout { display: flex; flex-direction: column; }</style>const Example = () => ( <div className='flex flex-col'> <span ods-text='content'>Text Regular</span> <span ods-text='content size:md'>Text Medium</span> <span ods-text='content size:sm'>Text Small</span> <span ods-text='content size:xs'>Text Xtra Small</span>
<br />
<span ods-text='content semibold'>Text Semibold</span> <span ods-text='content semibold size:md'>Text Medium Semibold</span> <span ods-text='content semibold size:sm'>Text Small Semibold</span> <span ods-text='content semibold size:xs'>Text Xtra Small Semibold</span>
<br />
<span ods-text='code'>Code Regular</span> <span ods-text='code semibold'>Code Semibold</span> </div>);
export default Example;align start
align center
align end
<div ods-layout="block gap:md inline:stretch"> <p ods-text="content start">align start</p> <p ods-text="content center">align center</p> <p ods-text="content end">align end</p></div>const Example = () => ( <div ods-layout="block gap:md inline:stretch"> <p ods-text="content start">align start</p> <p ods-text="content center">align center</p> <p ods-text="content end">align end</p> </div>);
export default Example;<div ods-layout="block gap:md"> <a href="#" ods-text="link">link</a> <a href="#" ods-text="link">link</a> <a href="#" ods-text="link">link</a> <p ods-text="content"><a href="#" ods-text="link">link</a> in a paragraph</p> <h2 ods-text="headline size:2xl"><a href="#" ods-text="link size:2xl">link</a> in a heading</h2></div>const Example = () => ( <div ods-layout="block gap:md"> <a href="#" ods-text="link">link</a> <a href="#" ods-text="link">link</a> <a href="#" ods-text="link">link</a> <p ods-text="content"><a href="#" ods-text="link">link</a> in a paragraph</p> <h2 ods-text="headline size:2xl"><a href="#" ods-text="link size:2xl">link</a> in a heading</h2> </div>);
export default Example;<div ods-layout="block gap:md"> <ul ods-text="list"> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> <ol ods-text="list"> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol></div>const Example = () => ( <div ods-layout="block gap:md"> <ul ods-text="list"> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> <ol ods-text="list"> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </div>);
export default Example;text title case (capitalize)
Text uppercase (uppercase)
Text Lowercase (lowercase)
<div ods-layout="block gap:md"> <p ods-text="content capitalize">text title case (capitalize)</p> <p ods-text="content uppercase">Text uppercase (uppercase)</p> <p ods-text="content lowercase">Text Lowercase (lowercase)</p></div>const Example = () => ( <div ods-layout="block gap:md"> <p ods-text="content capitalize">text title case (capitalize)</p> <p ods-text="content uppercase">Text uppercase (uppercase)</p> <p ods-text="content lowercase">Text Lowercase (lowercase)</p> </div>);
export default Example;The five boxing wizards jump quickly (bold)
The five boxing wizards jump quickly (italic)
The five boxing wizards jump quickly (code)
npm install -g @ods/typography<div ods-layout="block gap:md"> <p ods-text="content">The five <span ods-text="bold">boxing wizards</span> jump quickly (bold)</p> <p ods-text="content">The five <span ods-text="italic">boxing wizards</span> jump quickly (italic)</p> <p ods-text="content">The five <span ods-text="code">boxing wizards</span> jump quickly (code)</p> <pre ods-text="code:block"><code>npm install -g @ods/typography</code></pre></div>const Example = () => ( <div ods-layout="block gap:md"> <p ods-text="content">The five <span ods-text="bold">boxing wizards</span> jump quickly (bold)</p> <p ods-text="content">The five <span ods-text="italic">boxing wizards</span> jump quickly (italic)</p> <p ods-text="content">The five <span ods-text="code">boxing wizards</span> jump quickly (code)</p> <pre ods-text="code:block"><code>npm install -g @ods/typography</code></pre> </div>);
export default Example;