import { ... } from '@ag.ds-next/react/prose';Many websites will often have to style vanilla HTML, typically sourced from a Content Management System (CMS) or a Markdown file. In these scenarios, the Prose component can be used to add typographic defaults to any vanilla HTML you do not control.
The Prose component should only be used in the context of a page to format long-form content. It should not be used inside a 'framing' component like a Card or Modal. Instead, a simple Stack should be used.
<Prose> <h1>Heading level 1. Page heading</h1> <h2>Heading level 2, proceeding H1</h2> <p> This is an opening paragraph, that{' '} <a href="/site">contains an internal link</a>. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita tenetur blanditiis in libero distinctio inventore porro quaerat, eum aspernatur{' '} <a href="https://more.domain.tld/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path/more/path" rel="external" > and one that has a line break </a>{' '} dolorum animi a perferendis, obcaecati, accusantium dignissimos atque, voluptates veniam! </p> <h2>Heading level 2</h2> <h3>Heading level 3, proceeding H2</h3> <p> The purpose of the <kbd>Tab</kbd> character is indentation; conversely, using the <kbd>Space</kbd> character for indentation carries no semantic meaning—if you code this way your indentation schema may as well be a form of{' '} <abbr title="American Standard Code for Information Interchange"> ASCII </abbr>{' '} art. ;-) </p> <h3>Heading level 3</h3> <p> The <del>slow </del>quick brown fox jumped over the lazy dog. The{' '} <ins>ins (insert)</ins> element, unlike the dog cannot jump over anything, so it cannot span cross paragraph boundaries. </p> <p> This paragraph contains <s>outdated information</s> as well as current information. </p> <h4>Heading level 4</h4> <p> The coordinate of the <var>j</var>th point is ( <var> x <sub> <var>j</var> </sub> </var> , <var> y <sub> <var>j</var> </sub> </var> ). For example, the 10th point has coordinate ( <var> x<sub>10</sub> </var> , <var> y<sub>10</sub> </var> ). </p> <p> <var>E</var>=<var>m</var> <var>c</var> <sup>2</sup>f(<var>x</var>, <var>n</var>) = log<sub>4</sub> <var>x</var> <sup> <var>n</var> </sup> </p> <dl> <dt>Definition term</dt> <dd> A definition description: important information.{' '} <small>Less important information.</small> </dd> <dd> A second definition description.{' '} <small> Did you know?—a single definition term can have multiple definition (descriptions). </small> </dd> <dt>Single room</dt> <dd> $199{' '} <small> breakfast included, <abbr title="Goods and Services Tax">GST</abbr>{' '} inclusive </small> </dd> <dt>Double room</dt> <dd> $239{' '} <small> breakfast included, <abbr title="Goods and Services Tax">GST</abbr>{' '} inclusive </small> </dd> </dl> <p> We can also have single definitions, used for terms upon their first occurence in a document: </p> <h5>Heading level 5</h5> <p> While they are essential reading material for our job, the{' '} <dfn> <abbr title="World Wide Web Consortium">W3C</abbr> </dfn>{' '} specifications are not exactly George R. R. Martin-level reading material. </p> <p> Now to the <code>mark</code> element. This has a few useful applications: </p> <ul> <li> useful for marking up interesting things in quotations (without altering the styling of text, e.g. to italic) </li> <li> drawing attention to specific parts of pre-formatted text (e.g. code snippets) </li> <li>for marking up search results (e.g. that match a given query)</li> </ul> <h6>Heading level 6</h6> <p> I also have some <mark>kitten</mark>s who are visiting me these days. They’re really cute. I think they like my garden! Maybe I should adopt a <mark>kitten</mark>. </p> <p> How to install this component <code>npm i @gov.au/body</code> </p> <p>The highlighted part below is where the error lies:</p> <pre> <code> var i: Integer; begin i := <mark>1.1</mark>; end. </code> </pre> <figure> <blockquote cite="https://www.huxley.net/bnw/four.html"> <p> Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced. </p> </blockquote> <figcaption> —Aldous Huxley, <cite>Brave New World</cite> </figcaption> </figure> <figure> <img src="/img/placeholder/600X260.png" alt="Placeholder image" /> <figcaption>Placeholder caption</figcaption> </figure> <p>An unordered list containing an ordered list:</p> <ul> <li>Canberra office</li> <li>Sydney office</li> <li> Foo item, with sub-items: <ol> <li>one</li> <li>two</li> <li>three</li> </ol> </li> <li>Bar</li> <li>Baz</li> </ul> <p>A simple ordered list:</p> <ol> <li>Discovery</li> <li>Alpha</li> <li>Beta</li> <li>Live</li> </ol> <p>Back to a paragraph.</p> <hr /> <p>And that’s a wrap.</p> </Prose>
Unsetting styles
In some cases you may want to prevent the prose styles from being inherited on specific elements. This can be achieved by adding the unsetProseStylesClassname to any child of the Prose component. This is similar to the CSS property unset: all.
<Prose> <h1>Styled heading</h1> <div className={unsetProseStylesClassname}> <h1>Unstyled heading</h1> </div></Prose>Custom block
If you have some custom UI that is destined to live inside of a Prose. Add the proseBlockClassname to ensure that block has the same vertical rhythm as the rest of the prose content.
<Prose> <div className={proseBlockClassname}>Content inside a styled block</div></Prose>Related components
- Heading – Headings are a typographic component that create semantic structure, allow users to scan content by creating relative visual prominence and support search engine optimisation.
- List – Lists are vertical groupings of related items that can be displayed either in an unordered or ordered format.
- Text – A primitive typographic component for constrained text styles.