# Emphasis

Use this component to emphasize certain content of a Heading or Text component.
There are variations on Emphasis, each with their own use case and meaning.

## Design & usage guidelines

### Bold

Used to call attention to a piece of text. Bold should indicate that its
contents have
[strong importance, seriousness, or urgency.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)

```tsx
import React from "react";
import { Emphasis } from "@jobber/components/Emphasis";
import { Text } from "@jobber/components/Text";

export function EmphasisBoldExample() {
  return (
    <Text>
      <Emphasis variation="bold">Save $240</Emphasis> when you choose our Annual
      Plan
    </Text>
  );
}
```

### Italic

Italic emphasis should be used when there is stress emphasis on a word (or
words) which modifies the meaning of the sentence itself.

```tsx
import React from "react";
import { Emphasis } from "@jobber/components/Emphasis";
import { Text } from "@jobber/components/Text";

export function EmphasisItalicExample() {
  return (
    <Text>
      Simon&apos;s here to show <Emphasis variation="italic">you</Emphasis> how
      Jobber works.
    </Text>
  );
}
```

### Highlight

Used to call attention to a specific value prop on a heading. Highlight should
only be used on page titles and subtitle, and is similar in meaning to Bold.

```tsx
import React from "react";
import { Emphasis } from "@jobber/components/Emphasis";
import { Heading } from "@jobber/components/Heading";

export function EmphasisHighlightExample() {
  return (
    <Heading level={1}>
      Get paid <Emphasis variation="highlight">faster</Emphasis>
    </Heading>
  );
}
```


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `variation` | `"bold" | "highlight" | "italic"` | Yes | — |  |