WAI Website Assets

Blockquote: Pullquote Color Alt 2 

<blockquote class="pull alt-2 right">
    <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>
 
<blockquote{% if class %} class="{{ class }}"{% endif %}>
{{ content }}
<cite>{{ source }}</cite>
</blockquote>
 
{
  "class": "pull alt-2 right",
  "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."
}
  • Content: 
    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);
  }
}
  • URL: /components/raw/blockquote/blockquote.css
  • Filesystem Path: components/blockquote/blockquote.css
  • Size: 1.4 KB

There are no notes for this item.