WAI Website Assets

Figure 

<figure class="shrink-wrap">
    <div class="figcontent"><img src="https://www.w3.org/WAI/eval/images/contrast-gray-white.png" alt="" width="301" height="127"></div>
    <figcaption class="figcaption">Figure: Gray text on light background. </figcaption>
</figure>

<figure class="shrink-wrap">
    <div class="figcontent"> <img src="https://www.w3.org/WAI/eval/images/contrast-b-on-w.png" alt="" width="301" height="127"> <img src="https://www.w3.org/WAI/eval/images/contrast-yellow.png" alt="" width="301" height="127"> </div>
    <figcaption>Figure: Dark text on light background, and yellow text on black background.</figcaption>
</figure>
 
<figure class="shrink-wrap">
  <div class="figcontent"><img src="https://www.w3.org/WAI/eval/images/contrast-gray-white.png" alt="" width="301" height="127"></div>
  <figcaption class="figcaption">Figure: Gray text on light background. </figcaption>
</figure>

<figure class="shrink-wrap">
  <div class="figcontent"> <img src="https://www.w3.org/WAI/eval/images/contrast-b-on-w.png" alt="" width="301" height="127"> <img src="https://www.w3.org/WAI/eval/images/contrast-yellow.png" alt="" width="301" height="127"> </div>
  <figcaption>Figure: Dark text on light background, and yellow text on black background.</figcaption>
</figure>
 
/* No context defined for this component. */
  • Content: 
    figure.shrink-wrap {
  box-sizing: border-box;
  background-color: var(--pure-white);
  width: min-content;
  max-width: 100%;
  border: 1px solid var(--line-grey);
  border-radius: 3px;
  padding: 10px;
  & .figcontent {
    @media (--medlarge) {
      display: flex;
      & > * {
        flex: 1;
      }
    }
  }
  & img {
    border: 1px solid var(--line-grey);
    max-width: none !important;
  }
  & figcaption {
    font-weight: normal;
    border: none;
    margin: 0;
  }
}
  • URL: /components/raw/figure/figure.css
  • Filesystem Path: components/figure/figure.css
  • Size: 484 Bytes

There are no notes for this item.