<aside class="box">
    <header class="box-h">Testing
    </header>
    <div class="box-i">
        <blockquote>
            <p>The power of the Web is in its universality.<br>Access by everyone regardless of disability is an essential aspect.</p>
            <p>Another paragraph. Just for illustration purposes.</p>
            <cite>Tim Berners-Lee, W3C Director and inventor of the World Wide Web</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>
{
  "content": "<p>The power of the Web is in its universality.<br>Access by everyone regardless of disability is an essential aspect.</p><p>Another paragraph. Just for illustration purposes.</p>",
  "source": "Tim Berners-Lee, W3C Director and inventor of the World Wide Web"
}
  • 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-in-box/blockquote-in-box.css
  • Filesystem Path: components/blockquote-in-box/blockquote-in-box.css
  • Size: 1.4 KB

There are no notes for this item.