WAI Website Assets

Related Content 

<div class="related-content">
    <div class="related-content--head">
        <img src="/assets/images/icon-related-content.svg" aria-hidden="true" class="related-content--head-icon">
        <h2 class="related-content--head-heading">Related Content</h2>
    </div>
    <div class="related-content--content">
        <ul class="related-content--content-list">
            <li><a href="#">Related Content Link One</a></li>
            <li><a href="#">Related Content Link Two</a></li>
            <li><a href="#">Related Content Link Three</a></li>
            <li><a href="#">Related Content Link Four</a></li>
            <li><a href="#">Related Content Link Five</a></li>
        </ul>
    </div>
</div>
 
<div class="related-content">
  <div class="related-content--head">
    <img src="/assets/images/icon-related-content.svg" aria-hidden="true" class="related-content--head-icon">
    <h2 class="related-content--head-heading">Related Content</h2>
  </div>
  <div class="related-content--content">
    <ul class="related-content--content-list">
      <li><a href="#">Related Content Link One</a></li>
      <li><a href="#">Related Content Link Two</a></li>
      <li><a href="#">Related Content Link Three</a></li>
      <li><a href="#">Related Content Link Four</a></li>
      <li><a href="#">Related Content Link Five</a></li>
    </ul>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .related-content {
  background-color: var(--pure-white);
  border: 1px solid var(--line-grey);
  display: flex;
  flex: 1 100%;
  flex-direction: column;
  margin: 50px;
}

.related-content--head {
  align-items: center;
  background-color: var(--off-white);
  border-box-end: 1px solid var(--line-grey);
  display: flex;
  flex-direction: row;
  block-size: 48px;
}

.related-content--head-icon {
  block-size: 22px;
  margin-inline-end: 10px;
  margin-inline-start: 19px;
  inline-size: 22px;
}

.related-content--head-heading {
  border: none;
  color: var(--w3c-blue);
  flex: 1 100%;
  font-size: 20px;
  margin: 0;
  padding: 0;
}


.related-content--content {
  margin: 0;
  padding: 0;
}

.related-content--content-list {
  list-style: none;
  margin: 22px;
  padding: 0;
}

.related-content--content-list li {
  font-size: 14px;
  line-height: 2.2em;
}
  • URL: /components/raw/related-content/related-content.css
  • Filesystem Path: components/related-content/related-content.css
  • Size: 862 Bytes

There are no notes for this item.