Quote Characters
Quotation marks and blockquote styling for referenced content.
Inline Quote
The designer said,
Good design is as little design as possible
, emphasizing the importance of simplicity.
<p>
The designer said,
<q>Good design is as little design as possible</q>
, emphasizing the importance of simplicity.
</p>Block Quote Styles
"Typography is the craft of endowing human language with a durable visual form."
"Less is more.
"Make it simple, but significant."
<div style="display: flex; flex-direction: column; gap: 24px">
<!-- Classic -->
<blockquote
style="
border-left: 4px solid var(--color_fill_primary);
padding: 16px 20px;
margin: 0;
background: var(--color_fill_secondary);
border-radius: 0 8px 8px 0;
"
>
<p
style="
margin: 0;
font-style: italic;
font-size: 18px;
line-height: 1.6;
"
>
"Typography is the craft of endowing human language with a
durable visual form."
</p>
<footer
style="margin-top: 12px; font-size: 14px; opacity: 0.8"
>
— Robert Bringhurst
</footer>
</blockquote>
<!-- Large Quote Mark -->
<blockquote
style="
position: relative;
padding: 24px 24px 24px 60px;
margin: 0;
background: var(--color_fill_secondary);
border-radius: 12px;
"
>
<span
style="
position: absolute;
left: 16px;
top: 8px;
font-size: 64px;
font-family: Georgia, serif;
color: var(--color_fill_primary);
opacity: 0.3;
line-height: 1;
"
>
"
</span>
<p style="margin: 0; font-size: 18px; line-height: 1.6">
Less is more.
</p>
<footer
style="margin-top: 12px; font-size: 14px; opacity: 0.8"
>
— Ludwig Mies van der Rohe
</footer>
</blockquote>
<!-- Centered -->
<blockquote
style="
padding: 32px;
margin: 0;
text-align: center;
border-top: 2px solid var(--color_line_secondary);
border-bottom: 2px solid var(--color_line_secondary);
"
>
<p
style="
margin: 0;
font-size: 24px;
font-style: italic;
line-height: 1.5;
"
>
"Make it simple, but significant."
</p>
<footer
style="margin-top: 16px; font-size: 14px; opacity: 0.7"
>
— Don Draper
</footer>
</blockquote>
</div>Pull Quote
Design thinking is a human-centered approach to innovation that draws from the designer's toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success. The methodology emphasizes understanding the user's needs before jumping to solutions.
<div
style="
display: grid;
grid-template-columns: 1fr 280px;
gap: 32px;
align-items: start;
"
>
<p style="margin: 0; line-height: 1.8; opacity: 0.9">
Design thinking is a human-centered approach to innovation that
draws from the designer's toolkit to integrate the needs of
people, the possibilities of technology, and the requirements
for business success. The methodology emphasizes understanding
the user's needs before jumping to solutions.
</p>
<aside
style="
padding: 20px;
background: linear-gradient(
135deg,
var(--color_fill_primary),
#764ba2
);
border-radius: 12px;
color: white;
"
>
<blockquote style="margin: 0">
<p
style="
margin: 0;
font-size: 20px;
font-style: italic;
line-height: 1.5;
"
>
"Design is not just what it looks like. Design is how
it works."
</p>
<footer
style="margin-top: 12px; font-size: 13px; opacity: 0.9"
>
— Steve Jobs
</footer>
</blockquote>
</aside>
</div>Nested Quotes
In his book, the author explains:
"When asked about simplicity, Einstein reportedly said:
Everything should be made as simple as possible, but not simpler."
<blockquote
style="
border-left: 4px solid var(--color_fill_primary);
padding: 16px 20px;
margin: 0;
background: var(--color_fill_secondary);
border-radius: 0 8px 8px 0;
"
>
<p style="margin: 0 0 16px; line-height: 1.7">
In his book, the author explains:
</p>
<blockquote
style="
border-left: 3px solid var(--color_line_secondary);
padding: 12px 16px;
margin: 0;
background: rgba(0, 0, 0, 0.05);
border-radius: 0 6px 6px 0;
"
>
<p style="margin: 0; font-style: italic">
"When asked about simplicity, Einstein reportedly said:
<q>
Everything should be made as simple as possible, but
not simpler.
</q>
"
</p>
</blockquote>
</blockquote>