Components

Takeaways, callouts, discussion prompts, quizzes, tabs and margin notes.
Reading 12 min

By the end of this lesson you will

  • Add key takeaways that move into the right column
  • Use callouts, discussion prompts and both quiz types
  • Put asides in the margin

Cheat sheet

.takeaways
Div class: key takeaways card
.callout-tip
Div class: callout box
.column-margin
Div class: aside in the right rail
.panel-tabset
Div class: tabs
data-quiz=“mcq”
Multiple-choice quiz

Resources

Every component below is shown live, followed by the source that produced it.

Key takeaways

Wrap a bulleted list in a .takeaways div. On a wide screen the script lifts it into the right column at the top of the page, which is where the box at the top right of this page came from. On a narrow screen it stays inline.

::: {.takeaways}
- Short bullet one.
- Short bullet two.
:::

Callouts

Quarto’s built-in callouts are already themed.

NoteA note

Use for neutral background information.

WarningA warning

Use for mistakes that cost time.

::: {.callout-tip}
## Title
Body text.
:::

Types available: note, tip, important, warning, caution.

Discussion prompt

Place a “Discuss first” box before the answer so learners commit to a guess.

<div class="sm-discuss">
  <p class="sm-discuss-label"><i class="fa-solid fa-comments"></i>Discuss first</p>
  <p>What do you expect to happen, and why?</p>
</div>

Wrap raw HTML in a ```{=html} fence so Quarto passes it through untouched.

Quizzes

Two types, graded in the browser with no server. Multiple choice matches the value of the chosen radio button to data-answer:

Q1. How many options can be correct in a mcq quiz?

Fill in the blank matches the typed text exactly (after trimming):

Q2. Which attribute holds the correct answer?

WarningUnique radio names

Give each question its own radio name (for example q-components-1, q-components-2). Questions that share a name deselect each other.

Tabs and margin notes

Use Quarto tabsets to show alternatives side by side:

::: {.panel-tabset}
## Tab one
Content
## Tab two
Content
:::

Exactly this: a row of tabs with one panel visible.

Short asides, such as a glossary or a tip, go in the right column with .column-margin. Wherever you place them in the lesson, they are collected into the right-hand rail, between the resources and your notes.

Margin note. This sits in the right-hand column. Use it for definitions, tips and links that should not interrupt the main text.

  • .takeaways lifts into the right column.
  • Quizzes are plain HTML with data-quiz and data-answer.
  • Use .column-margin for asides and .panel-tabset for alternatives.
Back to top