Blockquote

#Example

<blockquote class="blockquote blockquote-filled max-w-lg"><p>Simplicity is prerequisite for reliability.</p><cite class="blockquote-cite">Edsger W. Dijkstra</cite></blockquote>

#Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.blockquote {
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-inline-start: 4px solid var(--primary);
  font-size: 1.125rem;
  line-height: 1.65;
}

.blockquote-cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--muted-foreground);
}

.blockquote-filled {
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--m-radius-xl) var(--m-radius-xl) 0;
  background: var(--surface-2);
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Blockquote: start from the base class, then add modifiers -->
<blockquote class="blockquote blockquote-filled max-w-lg"><p>Simplicity is prerequisite for reliability.</p><cite class="blockquote-cite">Edsger W. Dijkstra</cite></blockquote>

#Accessibility

• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components