Em, Strong & Quote

Em — Italic emphasis

You need to submit the form before the deadline, not after.

import { Text, Em } from "@shavin/ui";

<Text as="p">
  You need to submit the form <Em>before the deadline</Em>, not after.
</Text>

Strong — Bold importance

Warning: This action cannot be undone. Proceed carefully.

import { Text, Strong } from "@shavin/ui";

<Text as="p">
  <Strong>Warning:</Strong> This action cannot be undone. Proceed carefully.
</Text>

Quote — Inline quotation

As the saying goes, a stitch in time saves nine.

import { Text, Quote } from "@shavin/ui";

<Text as="p">
  As the saying goes, <Quote>a stitch in time saves nine</Quote>.
</Text>

Combined — Em, Strong, and Quote in prose

Set the reminder to the day before it is due, not the day of. As they say, better safe than sorry.

import { Text, Em, Strong, Quote } from "@shavin/ui";

<Text as="p">
  Set the reminder to <Em>the day before</Em> it is due, not{" "}
  <Strong>the day of</Strong>. As they say,{" "}
  <Quote>better safe than sorry</Quote>.
</Text>

Props

Component	Element	Description
Em	<em>	Semantic italic emphasis — use for stress emphasis within prose.
Strong	<strong>	Semantic bold importance — use to mark critical information.
Quote	<q>	Inline quotation — wraps text with proper typographic quotation marks.