<aside class="box">
<header class="box-h">Testing
</header>
<div class="box-i">
<blockquote class="pull">
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite>John Smith, TARDIS Inc.</cite>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quis enim ab beatae consectetur consequatur reiciendis minima saepe voluptatibus optio incidunt nobis omnis autem, corporis amet! Eveniet cupiditate sapiente dolores.</p>
</div>
</aside>
<aside class="box">
{%render '@box-header', type=default, label="Testing" %}
<div class="box-i">
<blockquote{% if class %} class="{{ class }}"{% endif %}>
{{ content }}
<cite>{{ source }}</cite>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quis enim ab beatae consectetur consequatur reiciendis minima saepe voluptatibus optio incidunt nobis omnis autem, corporis amet! Eveniet cupiditate sapiente dolores.</p>
</div>
</aside>
{
"class": "pull",
"content": "<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>",
"source": "John Smith, TARDIS Inc."
}
blockquote {
font-style: italic;
margin-block-end: 1em;
& cite {
display: block;
font-style: normal;
/*color: var(--w3c-blue);*/
padding-left: 2rem;
&:before {
content: "— ";
font-weight: bold;
margin-inline-start: -2rem;
width: 2rem;
display: inline-block;
}
}
& p:first-of-type::before {
content: '“';
margin-inline-start: -.75ch;
}
& p:last-of-type {
margin-block-end: 0;
}
& p:last-of-type::after {
content: '”';
}
&.special {
text-align: center;
}
}
blockquote.pull {
position: relative;
font-size: 1.25rem;
padding-left: 1ch;
margin-inline-start: 4rem;
border: 1px solid transparent;
color: var(--w3c-blue);
font-weight: bold;
border-inline-start: 2px solid var(--line-grey);
&.right, &.left {
max-width: 16rem;
}
&.right {
float: inline-end;
}
&.left {
float: inline-start;
margin-inline-end: 2rem;
}
& p:first-of-type::before {
font-size: 5rem;
position: absolute;
left: 0;
margin-inline-start: -1.25ch;
top:-.25ch;
}
& cite {
margin-block-start: .5rem;
font-size: 1rem;
font-weight: normal;
color: var(--off-black);
}
&.alt-1 {
color: var(--w3c-classic);
}
&.alt-2 {
color: var(--wai-green);
}
&.alt-3 {
color: var(--off-black);
}
}
There are no notes for this item.