Do you format quotations to stand out from the main text?

Quotations should not blend into the rest of your message. Whether you're responding to an emailm, IM message, or writing content for the web, formatting quotations clearly helps readers understand what’s being quoted and what's your original content.
Generally, the best practice is to **start a quote on a new line and indent it**, then use either quotes or the greater-than sign to make the text visually distinct and easy to follow.

<asideEmbed
  variant="greybox"
  body={<>
    Software development can be painful and costly. Hang on, that should say "Software development **is** painful and costly"
  </>}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - The quotation is mixed up with main text',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    Software development can be painful and costly. Hang on, that should say:

&nbsp;&nbsp;&nbsp;"Software development **is** painful and costly"
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: 'OK example - The quotation has quote marks, on a new line and indented',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    Software development can be painful and costly. Hang on, that should say:

&nbsp;&nbsp;&nbsp;> Software development **is** painful and costly
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Good example - The quotation has greater-than sign, on a new line and indented',
    shouldDisplay: true
  }}
/>

## 💬 For IMs

IMs are fast and casual, but things can get messy without context. Quoting properly helps maintain clarity in ongoing conversations, especially in busy channels or group chats.

The best way is to **use the platform’s native reply feature**. This keeps context visible and linked to the original message.


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Replying feature in IM helps keeping the conversation organized',
    shouldDisplay: true
  }}
  src="/uploads/rules/style-quotations/im-reply-example.png"
/>

**Notes:**

* For **short references inside a long message**, you may copy the important part and paste using the inline quotes `>`

* When quoting **older messages** OR **messages in group chats**, mention @username to clarify who said what

<asideEmbed
  variant="info"
  body={<>
    **Tip:** [Use reactions (e.g. ✅, 👍, 👀) when you don't need a quote](/easy-questions/#ask-for-reactions-for-multiple-options) — they're quicker and reduce message volume.
  </>}
  figureEmbed={{
    preset: "default",
    figure: 'XXX',
    shouldDisplay: false
  }}
/>

## 📧 For emails

In email replies, quoting previous messages is essential for context. The standard convention is to prefix quoted lines with a greater-than symbol `>` and indent the text, which makes the quoted text clearly identifiable — even in plain-text emails.

### Email reply example

<emailEmbed
  from=""
  to="Bob"
  cc=""
  bcc=""
  subject="Northwind - April report"
  body={<>
    ## Hi Bob

&nbsp;&nbsp;&nbsp; > Can you send the report by Friday?

Sure! I’ll send it over by end of day.
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: "Good example - This simple formatting makes conversations easier to follow, especially in long email threads",
    shouldDisplay: true
  }}
/>

## 🖥️ For Web UI

In web design, it's important to make quotations stand out from surrounding text. You should:

* Place the quote on a new line
* Use quotation marks for clarity
* Style it visually with a different font style, spacing, italics, or borders

Use the semantic `<blockquote>` HTML tag to indicate a quotation, and apply CSS to enhance visibility.

### HTML example

```html
<blockquote>
  "Design is not just what it looks like and feels like. Design is how it works."
</blockquote>
```

### CSS example

```css
blockquote {
    border-left: 4px solid #f5f5f5;
    margin-top: 1rem;
    padding: 1rem;
}
```

### Markdown example

If you're using Markdown, simply prefix the quoted text with a `>` symbol, and it will automatically render as a blockquote:

```md
> "Design is not just what it looks like and feels like. Design is how it works."
```

---

This is how it renders in the browser:

> "Design is not just what it looks like and feels like. Design is how it works."