Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut culpa reprehenderit maxime. Sint deserunt quaerat ullam, harum laborum voluptas accusamus!
Blockquote is used to highlight and display a quotation from text.
<blockquote class="c-blockquote">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut culpa reprehenderit maxime. Sint deserunt quaerat ullam, harum laborum voluptas accusamus!</p>
<footer>- Author</footer>
</blockquote>
.c-blockquote p {
font-style: italic;
font-size: 20px;
line-height: 1.2;
position: relative;
}
.c-blockquote p::before {
content: '“';
display: inline-flex;
margin-right: 3px;
}
.c-blockquote p::after {
content: '”';
display: inline-flex;
margin-left: 3px;
}
.c-blockquote footer {
font-style: italic;
margin-top: 10px;
font-size: 18px;
}
.c-blockquote {
p {
font-style: italic;
font-size: 20px;
line-height: 1.2;
position: relative;
&::before {
content: '“';
display: inline-flex;
margin-right: 3px;
}
&::after {
content: '”';
display: inline-flex;
margin-left: 3px;
}
}
footer {
font-style: italic;
margin-top: 10px;
font-size: 18px;
}
}