6.11 Divs and Spans

Quarito Guide: Divs and Spans

Within Divs, need to escape dollar signs for currency symbols: \$. However, in regular body text, Quarto processes it automatically.

You can add classes, attributes, and other identifiers to regions of content using Divs and Spans.

• classes: .class
• identifiers: #id
• key-value attributes: key="value"

Note that:

• They are separated by spaces, do NOT use commas.

  This is different from bookdown, which uses commas.

• Order: identifiers, classes, and then key-value attributes.

• Logical attributes: true/false, yes/no, and on/off are all equivalent to TRUE/FALSE in R.

  It is optional to enclose in quotes.

---

6.11.1 Block Attributes

Apply attributes to a block of content, such as a paragraph, list, or code block.

Div example:

::: {.border} 
This content can be styled with a border 
:::

Once rendered to HTML, Quarto will translate the markdown into:

<div class="border">   
  <p>This content can be styled with a border</p> 
</div>

Note that:

• The Div should be separated by blank lines from preceding and following blocks.

• Fenced divs can be nested.

  For example

  ::::: {#special .sidebar}
  
  ::: {.warning}
  Here is a warning.
  :::
  
  More content.
  :::::

  will be rendered to

  <div id="special" class="sidebar">
    <div class="warning">
      <p>Here is a warning.</p>
    </div>
    <p>More content.</p>
  </div>

More examples

• Headings with attributes

  ## Data Analysis {.highlight #analysis}

  renders to:

  <h2 id="analysis" class="highlight">Data Analysis</h2>

• List with attributes

  - Item 1
  - Item 2
  {.fancy-list}

  renders to:

  <ul class="fancy-list">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>

• Paragrphs with attributes

  This is a paragraph with a yellow background.
  {.yellow-bg}

  renders to:

  <p class="yellow-bg">This is a paragraph with a yellow background.</p>

---

6.11.2 Inline Attributes

Apply attributes to inline text, such as selected words within a paragraph.

A bracketed sequence of inlines [text here] (as one would use to begin a link) will be treated as a <span> with attributes if it is followed immediately by attributes {attributes here}.

Syntax for inline attributes:

[This is *some text*]{.class key="val"}

Once rendered to HTML, Quarto will translate the markdown into

<span class="class" data-key="val">
  This is <em>some text</em>
</span>

Note that:

• No space between ] and {.

• Ordering of attributes matter.

  #id comes first then .class then key="val".

  Any of these can be omitted, but must follow that order if they are provided.

  Valid example:

  [This is good]{#id .class key1="val1" key2="val2"}

  Invalid example:

  [This does *not* work!]{.class key="val" #id}

Use example:

This is a [highlighted word]{.red} in the text.

renders to:

This is a <span class="red">highlighted word</span> in the text.

---