Caption

View in Github

This is a block of text, which gives context to media. We generally use helper classes for text styles and use this component simply for spacing.

.c-caption

<figure class="l-pos-rel">
  <img
  class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"
  />
  <figcaption class="c-caption  l-display-block t-size-xs">
  This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
  </figcaption>
</figure>

Repo	Count	Location(s)
texastribune	4	List CaptionAndCredit.tsx CaptionAndCredit.test.tsx.snap chz-amp.scss constants.py

.c-caption--wide

The removal of padding comes a bit sooner.

<figure class="l-pos-rel">
  <img
  class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"
  />
  <figcaption class="c-caption c-caption--wide l-display-block t-size-xs">
  This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
  </figcaption>
</figure>

Repo	Count	Location(s)
texastribune	1	List constants.py

.c-caption--compact

Just a bit o' top padding.

<figure class="l-pos-rel">
  <img
  class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"
  />
  <figcaption class="c-caption c-caption--compact l-display-block t-size-xs">
  This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
  </figcaption>
</figure>

Repo	Count	Location(s)
texastribune	1	List constants.py

.c-caption--overlay-from-bp-l

Black overlay caption (desktop only).

<figure class="l-pos-rel">
  <img
  class="l-display-block l-width-full" src="/queso-ui/img/DEFAULT_LEAD_ART.jpg" alt="Placeholder image of Texas Capitol dome and Texas Tribune branding"
  />
  <figcaption class="c-caption c-caption--overlay-from-bp-l has-xs-padding l-width-full l-display-block t-size-xs">
  This is an image caption describing the image above. <span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#camera"></use></svg></span> <cite>Photographer Name for Company XYZ</cite>
  </figcaption>
</figure>

Repo	Count	Location(s)
texastribune	1	List constants.py