@ag.ds-next/body
Advanced tools
--- title: Body description: Provides correct styling for Markdown or CMS content. group: Content storybookPath: /story/content-body--on-light ---
Many sites will have content being generated in a WYSIWIG or HTML field within a content management system. This content is inherently difficult to style as developers often times have limited control over the markup being generated in these editors. Body is designed to apply styling to make CMS content look ok.
This is also known as a Prose component.
Body 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.
<Body>
<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, eg to italic)
</li>
<li>
drawing attention to specific parts of pre-formatted text (eg code
snippets)
</li>
<li>for marking up search results (eg 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="/agds-next/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>
</Body>
In some cases you may want to prevent the body styles from being inherited on specific elements. This can be achieved by adding the unsetBodyStylesClassname to any child of the Body component. This is similar to the CSS property unset: all.
<Body>
<h1>Styled heading</h1>
<div className={unsetBodyStylesClassname}>
<h1>Unstyled heading</h1>
</div>
</Body>
FAQs
Documentation for this package can be found here: https://steelthreads.github.io/agds-next/packages/content/body
The npm package @ag.ds-next/body receives a total of 18 weekly downloads. As such, @ag.ds-next/body popularity was classified as not popular.
We found that @ag.ds-next/body demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.