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

Article Meta Data

v0.0.1-alpha.0

Article Meta Data contains administrative information about an article. This information usually includes the author, when it was published, how it is categorized and more.

Article Meta Data contains structures build out of specific components and modifiers to tweak specific sizing and positioning when required.

This Article Meta Data stylesheet also contains the following components:

The following structures are defined.

Author Slices #

Author details combined meta data about the content.

The Circular Image is used to display the profile image.

Rafael Batz VM

By Sarah Wiza 

<!-- Article Meta Data -->
<div class="vi-article-meta-data vi-article-meta-data--author-slices">
  <div class="vi-article-meta-data__content">
    <div class="vi-article-meta-data__avatar">
      <div class="vi-circular-image vi-circular-image--size-article-meta"><img alt="Rafael Batz VM" loading="lazy" src="/assets/images/profiles/personal/profile005.jpg"></div>
    </div>
    <!-- Use h1-h6 depending page hierarchy -->
    <h3 class="vi-article-meta-data__title">
      By Sarah Wiza
    </h3>
    <div class="vi-article-meta-data__slices">
      <!-- Article Meta Slice -->
      <ul class="vi-article-meta-list vi-typesystem">
        <li class="vi-article-meta-list__item">
          <!-- Article Meta Slice -->
          <div class="vi-article-meta-slice">
            <!-- Icon clock  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M8 0c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm.5 2.3v4.4L12 9.4l-.4.9-4-2v-5h.9z"></path></svg>
            9 minutes
          </div>
        </li>
        <li class="vi-article-meta-list__item">
          <!-- Article Meta Slice -->
          <div class="vi-article-meta-slice">
            <!-- Icon date  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M5.5 0v2h5V0h1v2H13c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h1.5V0h1zM14 8H2v6c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8zM4.5 3H3c-.6 0-1 .4-1 1v3h12V4c0-.6-.4-1-1-1h-1.5v1h-1V3h-5v1h-1V3z"></path></svg>
            <time datetime="2025-12-05">December  5, 2025</time>
          </div>
        </li>
        <li class="vi-article-meta-list__item">
          <!-- Article Meta Slice -->
          <div class="vi-article-meta-slice">
            <!-- Icon label  -->
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M8.8.2l6.2.9.9 6.2L7.2 16 .1 8.9 8.8.2zm.3 1.1L1.5 8.9l5.7 5.7L14.8 7l-.7-5-5-.7zm2.7 3c.6.6.6 1.5 0 2.1-.6.6-1.6.6-2.2 0-.6-.6-.6-1.5 0-2.1.6-.6 1.6-.6 2.2 0zm-1.4.7c-.2.2-.2.5 0 .7.2.2.5.2.7 0 .2-.2.2-.5 0-.7s-.6-.2-.7 0z"></path></svg>
            <ul aria-label="categories" class="vi-taxonomy">
              <li class="vi-taxonomy__item">
                <a class="vi-taxonomy__link" href="#taxonomy-ab4ceb">
                  shoreditch cray
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Slices #

Meta data only.

Number of videos, podcasts and articles by contributor:

  • 15
  • 12
  • 5 
<!-- Article Meta Data -->
<div class="vi-article-meta-data vi-article-meta-data--slices">
  <!-- Article Meta Slice -->
  <ul class="vi-article-meta-list vi-typesystem">
    <li class="vi-article-meta-list__item">
      <!-- Article Meta Slice -->
      <div class="vi-article-meta-slice">
        <!-- Icon clock  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M8 0c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm.5 2.3v4.4L12 9.4l-.4.9-4-2v-5h.9z"></path></svg>
        9 minutes
      </div>
    </li>
    <li class="vi-article-meta-list__item">
      <!-- Article Meta Slice -->
      <div class="vi-article-meta-slice">
        <!-- Icon date  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M5.5 0v2h5V0h1v2H13c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h1.5V0h1zM14 8H2v6c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8zM4.5 3H3c-.6 0-1 .4-1 1v3h12V4c0-.6-.4-1-1-1h-1.5v1h-1V3h-5v1h-1V3z"></path></svg>
        <time datetime="2025-12-04">December  4, 2025</time>
      </div>
    </li>
    <li class="vi-article-meta-list__item">
      <!-- Article Meta Slice -->
      <div class="vi-article-meta-slice">
        <!-- Icon label  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M8.8.2l6.2.9.9 6.2L7.2 16 .1 8.9 8.8.2zm.3 1.1L1.5 8.9l5.7 5.7L14.8 7l-.7-5-5-.7zm2.7 3c.6.6.6 1.5 0 2.1-.6.6-1.6.6-2.2 0-.6-.6-.6-1.5 0-2.1.6-.6 1.6-.6 2.2 0zm-1.4.7c-.2.2-.2.5 0 .7.2.2.5.2.7 0 .2-.2.2-.5 0-.7s-.6-.2-.7 0z"></path></svg>
        <ul aria-label="categories" class="vi-taxonomy">
          <li class="vi-taxonomy__item">
            <a class="vi-taxonomy__link" href="#taxonomy-334c41">
              retro vhs
            </a>
          </li>
          <li class="vi-taxonomy__item">
            <a class="vi-taxonomy__link" href="#taxonomy-48701b">
              poutine pbr&amp;b
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>
<hr>
<p class="mb-10 mt-n10 small text-muted sg-hidden">Number of videos, podcasts and articles by contributor:</p>
<!-- Article Meta Data -->
<div class="vi-article-meta-data vi-article-meta-data--slices">
  <!-- Article Meta Slice -->
  <ul class="vi-article-meta-list vi-typesystem">
    <li class="vi-article-meta-list__item">
      <!-- Article Meta Slice -->
      <div class="vi-article-meta-slice">
        <!-- Icon video  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M5.6 11.4V4.6L11.4 8l-5.8 3.4zm1-5v3.3L9.4 8 6.6 6.4zM16 15H0V1h16v14zM1 14h14V2H1v12z"></path></svg>
        15
      </div>
    </li>
    <li class="vi-article-meta-list__item">
      <!-- Article Meta Slice -->
      <div class="vi-article-meta-slice">
        <!-- Icon podcast  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M8 11c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0-3c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1zm-4.9 5.9C1.7 12.6 1 10.9 1 9c0-1.9.7-3.6 2.1-5 2.7-2.7 7.2-2.7 9.9 0s2.7 7.2 0 9.9l.7.7c3.1-3.1 3.1-8.2 0-11.3C10.6.2 5.5.2 2.4 3.3.8 4.9 0 6.9 0 9s.8 4.1 2.3 5.7l.8-.8zM13 9c0-1.3-.5-2.6-1.5-3.5C10.6 4.5 9.3 4 8 4s-2.6.5-3.5 1.5c-1.9 1.9-1.9 5.1 0 7.1l.7-.7c-1.6-1.6-1.6-4.1 0-5.7 1.5-1.5 4.1-1.5 5.7 0 .7.7 1.1 1.7 1.1 2.8 0 1.1-.4 2.1-1.2 2.8l.7.7c1-.9 1.5-2.2 1.5-3.5z"></path></svg>
        12
      </div>
    </li>
    <li class="vi-article-meta-list__item">
      <!-- Article Meta Slice -->
      <div class="vi-article-meta-slice">
        <!-- Icon article  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M14.5 16.1h-13V.5h13v15.6zM2.5 15h11V1.5h-11V15zm9-9.5h-7v-1h7v1zm-3 4h-4v1h4v-1zm3-2.5h-7v1h7V7z"></path></svg>
        5
      </div>
    </li>
  </ul>
</div>

Single slice #

Single slice of meta data.

<!-- Article Meta Data -->
<div class="vi-article-meta-data vi-article-meta-data--slices">
  <!-- Article Meta Slice -->
  <ul class="vi-article-meta-list vi-typesystem">
    <li class="vi-article-meta-list__item">
      <!-- Article Meta Slice -->
      <div class="vi-article-meta-slice">
        <!-- Icon date  -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-article-meta-slice__icon vi-icon" aria-label="duration" width="16" height="16"><path d="M5.5 0v2h5V0h1v2H13c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h1.5V0h1zM14 8H2v6c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8zM4.5 3H3c-.6 0-1 .4-1 1v3h12V4c0-.6-.4-1-1-1h-1.5v1h-1V3h-5v1h-1V3z"></path></svg>
        <time datetime="2025-12-06">December  6, 2025</time>
      </div>
    </li>
  </ul>
</div>

Stylesheets #

The following stylesheet is required to display this component.

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

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

  • Print: css adjustments
  • Accessibility: Re-tag heading to H3 (although, depends on page hierarchy)

Added

  • RTL support
  • Initial draft