Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Sidebar Section

v0.0.0

One or multiple Sidebar Sections can be placed inside the sidebar of the Content Layout.

Tacos neutra letterpress.

<!-- Sidebar Section  -->
<div class="vi-sidebar-section">
  <div class="vi-sidebar-section__content">
    <div class="vi-sidebar-section__head">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-sidebar-section__title">Tacos neutra letterpress.</h4>
    </div>
    <div class="vi-sidebar-section__main">
      ...
    </div>
  </div>
</div>

Multiple #

When multiple Sidebar Sections are placed inside the sidebar, the horizontal lines will merge.

Pour-over kombucha mustache.

Cray tattooed cred.

<!-- Container (mods: --column) -->
<div class="vi-container vi-container--column">
  <!-- Content Layout  -->
  <div class="vi-content-layout">
    <div class="vi-content-layout__main">
      ...
    </div>
    <div class="vi-content-layout__sidebar">
      <div class="vi-content-layout__sidebar-sticky">
        <!-- Sidebar Section  -->
        <div class="vi-sidebar-section">
          <div class="vi-sidebar-section__content">
            <div class="vi-sidebar-section__head">
              <!-- Use h1-h6 depending page hierarchy -->
              <h4 class="vi-sidebar-section__title">Pour-over kombucha mustache.</h4>
            </div>
            <div class="vi-sidebar-section__main">
              ...
            </div>
          </div>
        </div>
        <!-- Sidebar Section  -->
        <div class="vi-sidebar-section">
          <div class="vi-sidebar-section__content">
            <div class="vi-sidebar-section__head">
              <!-- Use h1-h6 depending page hierarchy -->
              <h4 class="vi-sidebar-section__title">Cray tattooed cred.</h4>
            </div>
            <div class="vi-sidebar-section__main">
              ...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Examples #

Following are some examples of the Sidebar Sections.

Share this article:

<!-- Sidebar Section  -->
<div class="vi-sidebar-section">
  <div class="vi-sidebar-section__content">
    <div class="vi-sidebar-section__head">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-sidebar-section__title">Share this article:</h4>
    </div>
    <div class="vi-sidebar-section__main">
      <!-- Share Buttons  -->
      <div class="vi-share-buttons">
        <ul class="vi-share-buttons__list">
          <li class="vi-share-buttons__item">
            <button type="button" data-medium="facebook" class="vi-share-buttons__trigger vi-share-buttons__trigger--article-share"><!-- Icon facebook-color  -->
              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="facebook-color"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><path fill="#1877F2" d="M30,15 C30,6.71572266 23.2842773,0 15,0 C6.71572266,0 0,6.71572266 0,15 C0,22.4869336 5.4852832,28.6924805 12.65625,29.8177148 L12.65625,19.3359375 L8.84765625,19.3359375 L8.84765625,15 L12.65625,15 L12.65625,11.6953125 C12.65625,7.9359375 14.8956738,5.859375 18.3219434,5.859375 C19.963125,5.859375 21.6796875,6.15234375 21.6796875,6.15234375 L21.6796875,9.84375 L19.7881934,9.84375 C17.9248535,9.84375 17.34375,11 17.34375,12.1862402 L17.34375,15 L21.5039062,15 L20.8388672,19.3359375 L17.34375,19.3359375 L17.34375,29.8177148 C24.5147168,28.6924805 30,22.4869336 30,15"></path><path fill="#FFF" d="M20.8388672,19.3359375 L21.5039063,15 L17.34375,15 L17.34375,12.1862402 C17.34375,11.0000098 17.9248535,9.84375 19.7881934,9.84375 L21.6796875,9.84375 L21.6796875,6.15234375 C21.6796875,6.15234375 19.963125,5.859375 18.3219434,5.859375 C14.8956738,5.859375 12.65625,7.9359375 12.65625,11.6953125 L12.65625,15 L8.84765625,15 L8.84765625,19.3359375 L12.65625,19.3359375 L12.65625,29.8177148 C13.4199316,29.9375391 14.2026563,30 15,30 C15.7973438,30 16.5800684,29.9375391 17.34375,29.8177148 L17.34375,19.3359375 L20.8388672,19.3359375 Z"></path></g></svg>
              <span class="sr-only">Facebook</span>
            </button>
          </li>
          <li class="vi-share-buttons__item">
            <button type="button" data-medium="twitter" class="vi-share-buttons__trigger vi-share-buttons__trigger--article-share"><!-- Icon twitter-color  -->
              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="twitter-color"><path fill="#1D9BF0" fill-rule="evenodd" d="M29.7244391,10.4727174 C29.7436804,10.7543155 29.7436804,11.0372137 29.7436804,11.321282 C29.7436804,19.9971305 23.1388652,30.0016646 11.0632978,30.0016646 L11.0632978,29.9964642 C7.49586817,30.0012746 4.00241328,28.9792788 1,27.0525547 C1.51860339,27.1145687 2.04045698,27.1462908 2.56283061,27.1472008 C5.51974096,27.150191 8.39162584,26.1583572 10.7164355,24.3312195 C7.90760468,24.2784361 5.442776,22.4463582 4.58277064,19.771826 C5.56654397,19.9613782 6.58060925,19.9228958 7.54722148,19.6592388 C4.48383427,19.0403989 2.28084245,16.3487057 2.2800624,13.2234345 L2.2800624,13.1402291 C3.19298117,13.6492119 4.21497696,13.93107 5.25985423,13.962012 C2.3747085,12.035418 1.4846712,8.19770095 3.22717337,5.19788783 C6.56097799,9.29939187 11.4791946,11.7926924 16.7580544,12.0573894 C16.2287904,9.77730263 16.9522869,7.38787881 18.6573467,5.78435559 C21.3011969,3.29807553 25.4601646,3.42561374 27.9465747,6.06946394 C29.4168393,5.77967529 30.8267801,5.24066059 32.1154231,4.47595136 C31.6254215,5.99626923 30.5996555,7.2867323 29.2291072,8.10721512 C30.530621,7.95341522 31.8017129,7.60525281 33,7.07429863 C32.1185433,8.39258349 31.0093118,9.54328757 29.7244391,10.4727174"></path></svg>
              <span class="sr-only">Twitter</span>
            </button>
          </li>
          <li class="vi-share-buttons__item">
            <button type="button" data-medium="linkedin" class="vi-share-buttons__trigger vi-share-buttons__trigger--article-share"><!-- Icon linkedin-color  -->
              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="linkedin-color"><g fill="none" fill-rule="evenodd"><path fill="#0A66C2" d="M31,5.05882353 L31,28.9411765 C31,30.0784706 30.0784706,31 28.9411765,31 L5.05882353,31 C3.92152941,31 3,30.0784706 3,28.9411765 L3,5.05882353 C3,3.92152941 3.92152941,3 5.05882353,3 L28.9411765,3 C30.0784706,3 31,3.92152941 31,5.05882353 L31,5.05882353 Z"></path><path fill="#FFF" d="M26.8823529,18.8776471 C26.8823529,14.9164706 24.3623529,13.3764706 21.8588235,13.3764706 C20.1903529,13.2932941 18.6042353,14.102 17.6917647,15.5011765 L17.5764706,15.5011765 L17.5764706,13.7058824 L13.7058824,13.7058824 L13.7058824,26.8823529 L17.8235294,26.8823529 L17.8235294,19.8741176 C17.7,18.3802353 18.8018824,17.0650588 20.2941176,16.9258824 L20.4505882,16.9258824 C21.76,16.9258824 22.7317647,17.7494118 22.7317647,19.8247059 L22.7317647,26.8823529 L26.8494118,26.8823529 L26.8823529,18.8776471 Z M11.6058824,9.17647059 C11.6149412,7.86623529 10.5608235,6.79729412 9.25058824,6.78823529 L9.25058824,6.78823529 L9.17647059,6.78823529 C7.85717647,6.78905882 6.78905882,7.85882353 6.78905882,9.17729412 C6.78988235,10.4957647 7.858,11.5638824 9.17647059,11.5647059 C10.4858824,11.5968235 11.5737647,10.5616471 11.6058824,9.25223529 C11.6058824,9.25141176 11.6058824,9.25141176 11.6058824,9.25058824 L11.6058824,9.17647059 Z M7.11764706,26.8823529 L11.2352941,26.8823529 L11.2352941,13.7058824 L7.11764706,13.7058824 L7.11764706,26.8823529 Z"></path></g></svg>
              <span class="sr-only">Linkedin</span>
            </button>
          </li>
          <li class="vi-share-buttons__item">
            <a href="mailto:someone@yoursite.com" class="vi-share-buttons__trigger vi-share-buttons__trigger--article-share"><!-- Icon email-color  -->
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="email-color" width="34" height="34"><path d="M15 0c-2.1 0-4 .4-5.8 1.2S5.8 3 4.4 4.4C3.1 5.7 2 7.3 1.2 9.1S0 12.9 0 15s.4 4 1.2 5.8 1.9 3.4 3.2 4.8C5.8 27 7.3 28 9.2 28.8S12.9 30 15 30s4-.4 5.8-1.2 3.4-1.9 4.8-3.2c1.4-1.4 2.4-2.9 3.2-4.8.8-1.8 1.2-3.7 1.2-5.8s-.4-4-1.2-5.8c-.8-1.8-1.9-3.4-3.2-4.8s-3-2.4-4.8-3.2S17.1 0 15 0zM9.7 10.6l5.2 5.4 5.2-5.4H9.7zm-1.2.9v7.6c0 .2.1.3.3.3h12.4c.2 0 .3-.1.3-.3v-7.8l-5.7 5.9c-.5.5-1.3.5-1.8 0l-5.5-5.7zM21.2 21H8.8c-1 0-1.8-.8-1.8-1.9v-8.3C7 9.8 7.8 9 8.8 9h12.4c1 0 1.8.8 1.8 1.9v8.3c0 1-.8 1.8-1.8 1.8z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
              <span class="sr-only">Email</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Connect with Evangeline:

<!-- Sidebar Section  -->
<div class="vi-sidebar-section">
  <div class="vi-sidebar-section__content">
    <div class="vi-sidebar-section__head">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-sidebar-section__title">Connect with Evangeline:</h4>
    </div>
    <div class="vi-sidebar-section__main">
      <!-- Share Buttons  -->
      <div class="vi-share-buttons">
        <ul class="vi-share-buttons__list">
          <li class="vi-share-buttons__item">
            <a href="https://facebook.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--article-share"><!-- Icon facebook-color  -->
              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="facebook-color"><g fill="none" fill-rule="evenodd" transform="translate(2 2)"><path fill="#1877F2" d="M30,15 C30,6.71572266 23.2842773,0 15,0 C6.71572266,0 0,6.71572266 0,15 C0,22.4869336 5.4852832,28.6924805 12.65625,29.8177148 L12.65625,19.3359375 L8.84765625,19.3359375 L8.84765625,15 L12.65625,15 L12.65625,11.6953125 C12.65625,7.9359375 14.8956738,5.859375 18.3219434,5.859375 C19.963125,5.859375 21.6796875,6.15234375 21.6796875,6.15234375 L21.6796875,9.84375 L19.7881934,9.84375 C17.9248535,9.84375 17.34375,11 17.34375,12.1862402 L17.34375,15 L21.5039062,15 L20.8388672,19.3359375 L17.34375,19.3359375 L17.34375,29.8177148 C24.5147168,28.6924805 30,22.4869336 30,15"></path><path fill="#FFF" d="M20.8388672,19.3359375 L21.5039063,15 L17.34375,15 L17.34375,12.1862402 C17.34375,11.0000098 17.9248535,9.84375 19.7881934,9.84375 L21.6796875,9.84375 L21.6796875,6.15234375 C21.6796875,6.15234375 19.963125,5.859375 18.3219434,5.859375 C14.8956738,5.859375 12.65625,7.9359375 12.65625,11.6953125 L12.65625,15 L8.84765625,15 L8.84765625,19.3359375 L12.65625,19.3359375 L12.65625,29.8177148 C13.4199316,29.9375391 14.2026563,30 15,30 C15.7973438,30 16.5800684,29.9375391 17.34375,29.8177148 L17.34375,19.3359375 L20.8388672,19.3359375 Z"></path></g></svg>
              <span class="sr-only">Facebook</span>
            </a>
          </li>
          <li class="vi-share-buttons__item">
            <a href="https://twitter.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--article-share"><!-- Icon twitter-color  -->
              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="twitter-color"><path fill="#1D9BF0" fill-rule="evenodd" d="M29.7244391,10.4727174 C29.7436804,10.7543155 29.7436804,11.0372137 29.7436804,11.321282 C29.7436804,19.9971305 23.1388652,30.0016646 11.0632978,30.0016646 L11.0632978,29.9964642 C7.49586817,30.0012746 4.00241328,28.9792788 1,27.0525547 C1.51860339,27.1145687 2.04045698,27.1462908 2.56283061,27.1472008 C5.51974096,27.150191 8.39162584,26.1583572 10.7164355,24.3312195 C7.90760468,24.2784361 5.442776,22.4463582 4.58277064,19.771826 C5.56654397,19.9613782 6.58060925,19.9228958 7.54722148,19.6592388 C4.48383427,19.0403989 2.28084245,16.3487057 2.2800624,13.2234345 L2.2800624,13.1402291 C3.19298117,13.6492119 4.21497696,13.93107 5.25985423,13.962012 C2.3747085,12.035418 1.4846712,8.19770095 3.22717337,5.19788783 C6.56097799,9.29939187 11.4791946,11.7926924 16.7580544,12.0573894 C16.2287904,9.77730263 16.9522869,7.38787881 18.6573467,5.78435559 C21.3011969,3.29807553 25.4601646,3.42561374 27.9465747,6.06946394 C29.4168393,5.77967529 30.8267801,5.24066059 32.1154231,4.47595136 C31.6254215,5.99626923 30.5996555,7.2867323 29.2291072,8.10721512 C30.530621,7.95341522 31.8017129,7.60525281 33,7.07429863 C32.1185433,8.39258349 31.0093118,9.54328757 29.7244391,10.4727174"></path></svg>
              <span class="sr-only">Twitter</span>
            </a>
          </li>
          <li class="vi-share-buttons__item">
            <a href="https://linkedin.com" target="_blank" class="vi-share-buttons__trigger vi-share-buttons__trigger--article-share"><!-- Icon linkedin-color  -->
              <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewbox="0 0 34 34" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="linkedin-color"><g fill="none" fill-rule="evenodd"><path fill="#0A66C2" d="M31,5.05882353 L31,28.9411765 C31,30.0784706 30.0784706,31 28.9411765,31 L5.05882353,31 C3.92152941,31 3,30.0784706 3,28.9411765 L3,5.05882353 C3,3.92152941 3.92152941,3 5.05882353,3 L28.9411765,3 C30.0784706,3 31,3.92152941 31,5.05882353 L31,5.05882353 Z"></path><path fill="#FFF" d="M26.8823529,18.8776471 C26.8823529,14.9164706 24.3623529,13.3764706 21.8588235,13.3764706 C20.1903529,13.2932941 18.6042353,14.102 17.6917647,15.5011765 L17.5764706,15.5011765 L17.5764706,13.7058824 L13.7058824,13.7058824 L13.7058824,26.8823529 L17.8235294,26.8823529 L17.8235294,19.8741176 C17.7,18.3802353 18.8018824,17.0650588 20.2941176,16.9258824 L20.4505882,16.9258824 C21.76,16.9258824 22.7317647,17.7494118 22.7317647,19.8247059 L22.7317647,26.8823529 L26.8494118,26.8823529 L26.8823529,18.8776471 Z M11.6058824,9.17647059 C11.6149412,7.86623529 10.5608235,6.79729412 9.25058824,6.78823529 L9.25058824,6.78823529 L9.17647059,6.78823529 C7.85717647,6.78905882 6.78905882,7.85882353 6.78905882,9.17729412 C6.78988235,10.4957647 7.858,11.5638824 9.17647059,11.5647059 C10.4858824,11.5968235 11.5737647,10.5616471 11.6058824,9.25223529 C11.6058824,9.25141176 11.6058824,9.25141176 11.6058824,9.25058824 L11.6058824,9.17647059 Z M7.11764706,26.8823529 L11.2352941,26.8823529 L11.2352941,13.7058824 L7.11764706,13.7058824 L7.11764706,26.8823529 Z"></path></g></svg>
              <span class="sr-only">Linkedin</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- Icon List  -->
      <ul class="vi-icon-list mt-30 text-dominant">
        <li class="vi-icon-list__item">
          <div class="vi-icon-list__icon">
            <!-- Icon link-out  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="link-out" width="24" height="24"><path d="M14 14H2V2h5v-.5H1.5v13h13V8H14z"></path><path d="M14 1.5L6.1 9.4l.5.5L14.5 2v2.8h.7v-4h-4v.7z"></path></svg>
          </div>
          <div class="vi-icon-list__content">
            <a class="vi-icon-list__link" href="#">Evangeline on Medium</a>
          </div>
        </li>
        <li class="vi-icon-list__item">
          <div class="vi-icon-list__icon">
            <!-- Icon link-out  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="link-out" width="24" height="24"><path d="M14 14H2V2h5v-.5H1.5v13h13V8H14z"></path><path d="M14 1.5L6.1 9.4l.5.5L14.5 2v2.8h.7v-4h-4v.7z"></path></svg>
          </div>
          <div class="vi-icon-list__content">
            <a class="vi-icon-list__link" href="#">Personal website</a>
          </div>
        </li>
        <li class="vi-icon-list__item">
          <div class="vi-icon-list__icon">
            <!-- Icon link-out  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="link-out" width="24" height="24"><path d="M14 14H2V2h5v-.5H1.5v13h13V8H14z"></path><path d="M14 1.5L6.1 9.4l.5.5L14.5 2v2.8h.7v-4h-4v.7z"></path></svg>
          </div>
          <div class="vi-icon-list__content">
            <a class="vi-icon-list__link" href="#">Personal Blog</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

I found this article:

<!-- Sidebar Section  -->
<div class="vi-sidebar-section">
  <div class="vi-sidebar-section__content">
    <div class="vi-sidebar-section__head">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-sidebar-section__title">I found this article:</h4>
    </div>
    <div class="vi-sidebar-section__main">
      <!-- Content Rating  -->
      <div class="vi-content-rating">
        <ul class="vi-content-rating__list">
          <div class="vi-content-rating__item">
            <!-- Button type: outline  -->
            <button type="button" class="flex-grow-1 vi-btn-outline vi-btn-outline--no-pointer vi-btn"><span aria-label="Informative has 39 ratings" class="vi-content-rating__button-content" data-aria-label="Thanks for voting" role="status">
                <span class="vi-content-rating__label">Informative</span>
                <span class="vi-content-rating__value">39</span>
              </span></button>
          </div>
          <div class="vi-content-rating__item">
            <!-- Button type: outline  -->
            <button type="button" class="flex-grow-1 vi-btn-outline vi-btn-outline--no-pointer vi-btn"><span aria-label="Reassuring has 59 ratings" class="vi-content-rating__button-content" data-aria-label="Thanks for voting" role="status">
                <span class="vi-content-rating__label">Reassuring</span>
                <span class="vi-content-rating__value">59</span>
              </span></button>
          </div>
          <div class="vi-content-rating__item">
            <!-- Button type: outline  -->
            <button type="button" class="flex-grow-1 vi-btn-outline vi-btn-outline--no-pointer vi-btn"><span aria-label="Relevant has 20 ratings" class="vi-content-rating__button-content" data-aria-label="Thanks for voting" role="status">
                <span class="vi-content-rating__label">Relevant</span>
                <span class="vi-content-rating__value">20</span>
              </span></button>
          </div>
        </ul>
      </div>
    </div>
  </div>
</div>

Never miss a news update:

<!-- Sidebar Section  -->
<div class="vi-sidebar-section">
  <div class="vi-sidebar-section__content">
    <div class="vi-sidebar-section__head">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-sidebar-section__title">Never miss a news update:</h4>
    </div>
    <div class="vi-sidebar-section__main">
      <!-- Form  -->
      <form action="#form-610838" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
        <div class="mb-30 form-group">
          <label class="sr-only" for="control-d04939">Your Email Address</label>
          <input aria-required="true" class="form-control" data-msg-success="Looks like an email address." data-msg="Please provide a valid email address." id="control-d04939" name="name-712b85" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
        </div>
        <!-- Button type: solid  -->
        <button type="submit" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Subscribe</button>
      </form>
    </div>
  </div>
</div>

Subscribe to Life Effects' Podcasts:

<!-- Sidebar Section  -->
<div class="vi-sidebar-section">
  <div class="vi-sidebar-section__content">
    <div class="vi-sidebar-section__head">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-sidebar-section__title">Subscribe to Life Effects' Podcasts:</h4>
    </div>
    <div class="vi-sidebar-section__main">
      <!-- Icon List  -->
      <ul class="vi-icon-list mt-20 text-dominant">
        <li class="vi-icon-list__item">
          <div class="vi-icon-list__icon">
            <!-- Icon brand-apple  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="brand-apple" width="24" height="24"><path d="M21.2 15.7c-.1.2-.1.3-.2.5-.6 1.5-1.4 2.8-2.4 4-.2.2-.4.4-.7.6-.5.4-1 .6-1.7.6-.5 0-.9-.1-1.4-.2-.3-.1-.6-.3-1-.4-1-.4-2.1-.3-3.1.1-.4.1-.7.3-1.1.4-.4.1-.9.2-1.4.1-.4-.1-.8-.3-1.1-.5-.4-.3-.7-.6-1.1-1-1.5-1.8-2.5-3.8-3-6-.2-1-.3-1.9-.3-2.9.1-1.2.4-2.3 1-3.3.8-1.3 2-2.1 3.5-2.5 1.1-.2 2-.1 2.9.2.5.2.9.3 1.4.5.4.2.9.2 1.3 0 .5-.2 1-.3 1.4-.5.5-.2 1-.3 1.5-.4.8-.1 1.5 0 2.3.3 1 .3 1.9.9 2.5 1.8v.1c-1.5 1-2.5 2.5-2.3 4.4.1 2 1.2 3.3 3 4.1zM12.1 4.1c.5 0 .9-.1 1.4-.2 2-.7 3.1-2.6 3.1-4v-.4c-.2 0-.4 0-.6.1-1.5.3-2.6 1-3.4 2.2-.4.7-.7 1.4-.6 2.2 0 .1.1.1.1.1z"></path></svg>
          </div>
          <div class="vi-icon-list__content">
            <a class="vi-icon-list__link" href="#">Apple Podcasts</a>
          </div>
        </li>
        <li class="vi-icon-list__item">
          <div class="vi-icon-list__icon">
            <!-- Icon brand-spotify  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="brand-spotify" width="24" height="24"><path d="M17.6 11.9c-.4-.2-.8-.4-1.3-.6-.9-.3-1.8-.6-2.7-.7-.6-.1-1.3-.2-1.9-.2h-2c-.8 0-1.5.1-2.3.3-.3.1-.6.1-.8.2h-.5c-.4-.1-.6-.4-.6-.8s.2-.7.6-.8c.3-.1.5-.1.8-.2L9 8.8c.7-.1 1.5-.1 2.2-.1 1.8 0 3.6.3 5.3.9.7.2 1.4.5 2 .9.2.1.4.3.4.6v.2c0 .3-.2.6-.4.7-.2.1-.6.1-.9-.1m-.1 2.6c-.2.3-.6.4-1 .2l-.6-.3c-1-.5-2-.8-3-1-.8-.1-1.7-.2-2.5-.2-1.1 0-2.2.1-3.3.4-.2.1-.4 0-.5 0-.3-.1-.5-.4-.5-.7 0-.3.2-.6.5-.6 1.1-.3 2.2-.5 3.3-.5 1.7-.1 3.3.1 5 .6.8.2 1.6.6 2.3 1l.1.1c.3.2.4.6.2 1m-1.1 2.4c-.2.2-.5.3-.7.2-.1 0-.1-.1-.2-.1-1-.6-2.1-.9-3.2-1.1-.7-.1-1.4-.1-2.1-.1-.9 0-1.8.2-2.7.3h-.3c-.3 0-.5-.2-.6-.4-.1-.3.1-.5.3-.6h.2c.7-.2 1.5-.3 2.2-.3.4 0 .8 0 1.3-.1 1.2 0 2.5.2 3.7.6.7.2 1.3.5 1.9.8.1 0 .1.1.2.1.1.2.1.5 0 .7M12 4c-5.2 0-9.4 4-9.4 9s4.2 9 9.4 9 9.5-4 9.5-9-4.3-9-9.5-9"></path></svg>
          </div>
          <div class="vi-icon-list__content">
            <a class="vi-icon-list__link" href="#">Spotify</a>
          </div>
        </li>
        <li class="vi-icon-list__item">
          <div class="vi-icon-list__icon">
            <!-- Icon brand-stitcher  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="brand-stitcher" width="24" height="24"><path d="M16.1 6h.8v12h-.8V6zm1.3 2.1h.5v8h-.5v-8zm-2.4 0h.5v8H15v-8zm3.5 0h3v8h-3v-8zm-16 0h11.8v8H2.5v-8z"></path></svg>
          </div>
          <div class="vi-icon-list__content">
            <a class="vi-icon-list__link" href="#">Stitcher</a>
          </div>
        </li>
        <li class="vi-icon-list__item">
          <div class="vi-icon-list__icon">
            <!-- Icon rss  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="rss" width="24" height="24"><path d="M4.8 16.4c-.8 0-1.4.3-2 .8-.5.5-.8 1.2-.8 2s.3 1.4.8 2c.6.5 1.2.8 2 .8s1.4-.3 2-.8c.5-.5.8-1.2.8-2s-.3-1.4-.8-2c-.6-.5-1.3-.8-2-.8zm6.4-3.6c-1.1-1.1-2.4-2-3.8-2.6C6 9.5 4.5 9.1 3 9h-.1c-.2 0-.4.1-.6.2-.2.2-.3.5-.3.7v2c0 .2.1.4.2.6.2.2.4.3.6.3 2.2.2 4.1 1.1 5.7 2.7 1.6 1.6 2.5 3.5 2.7 5.7 0 .2.1.4.3.6.2.2.4.2.6.2h2c.3 0 .5-.1.7-.3.2-.2.3-.4.2-.7-.1-1.5-.5-3-1.2-4.4-.6-1.4-1.5-2.7-2.6-3.8z"></path><path d="M16.1 7.9c-1.7-1.8-3.8-3.2-6-4.2C7.8 2.7 5.4 2.1 3 2c-.3 0-.6.1-.7.3-.2.1-.3.4-.3.6v2c0 .2.1.5.2.6.2.2.4.3.6.3 2 .1 4 .6 5.8 1.4 1.8.8 3.4 1.9 4.8 3.3 1.4 1.3 2.4 2.9 3.3 4.8.8 1.8 1.3 3.8 1.4 5.8 0 .2.1.4.3.6.2.2.4.3.6.2h2c.2 0 .5-.1.7-.3.2-.2.3-.4.3-.7-.1-2.5-.7-4.9-1.7-7.1-1-2.1-2.4-4.2-4.2-5.9z"></path></svg>
          </div>
          <div class="vi-icon-list__content">
            <a class="vi-icon-list__link" href="#">RSS</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Group #

Change the style of the Sidebar Section with modifier --group.

Chia forage hashtag.

[content]

<!-- Sidebar Section (mods: --group) -->
<div class="vi-sidebar-section vi-sidebar-section--group">
  <div class="vi-sidebar-section__content vi-sidebar-section__content--group">
    <div class="vi-sidebar-section__head vi-sidebar-section__head--group">
      <!-- Use h1-h6 depending page hierarchy -->
      <h4 class="vi-sidebar-section__title vi-sidebar-section__title--group">Chia forage hashtag.</h4>
    </div>
    <div class="vi-sidebar-section__main vi-sidebar-section__main--group">
      <p>[content]</p>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheet is required to display this component.

The following additional stylesheets are used to display the example(s).

The following additional javascripts are used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

  • PBS support
  • Removed restrictive styling.
  • CSS change better accommodate multiple scenarios in __head.
  • Markup change!: The .vi-sidebar-section__title is now wrapped inside .vi-sidebar-section__head to allow for more elements in head.
  • Accessibility: Re-tag heading to H4 (although, depends on page hierarchy)

Added

  • Examples use cases.
  • Initial draft