@ou-imdt/css/docs/native/figure-caption.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# Captions & Figures

{description}

## figure

__No Styles__

The figure element represents self-contained content, potentially with an optional figcaption.

### Example

<div class="card">
  <figure>
    <p>
      Bid me discourse, I will enchant thine ear,
      Or like a fairy trip upon the green,
      Or, like a nymph, with long dishevell'd hair,
      Dance on the sands, and yet no footing seen:
      Love is a spirit all compact of fire,
      Not gross to sink, but light, and will aspire.</p>
    <figcaption><cite>Venus and Adonis</cite>,
      by William Shakespeare</figcaption>
  </figure>

</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <figure>
    <p>
      Bid me discourse, I will enchant thine ear,
      Or like a fairy trip upon the green,
      Or, like a nymph, with long dishevell'd hair,
      Dance on the sands, and yet no footing seen:
      Love is a spirit all compact of fire,
      Not gross to sink, but light, and will aspire.</p>
    <figcaption><cite>Venus and Adonis</cite>,
      by William Shakespeare</figcaption>
  </figure>

```
</details>

<div class="card">
  <figure>
    <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
    <blockquote>If debugging is the process of removing software bugs,
      then programming must be the process of putting them in.</blockquote>
  </figure>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <figure>
    <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
    <blockquote>If debugging is the process of removing software bugs,
      then programming must be the process of putting them in.</blockquote>
  </figure>
```
</details>

## figcaption

`figcaption` represents a caption or legend describing the rest of the contents of its parent figure element.

### Example

<div class="card">

  <figure>
    <img src="https://picsum.photos/id/1021/500" alt="A cloudy forest">
    <figcaption>A cloudy forest in black and white. lorem</figcaption>
  </figure>

</div>

<details class="compact">
  <summary>HTML</summary>

  ```html
  <figure>
    <img src="https://picsum.photos/id/1021/500" alt="A cloudy forest">
    <figcaption>A cloudy forest in black and white. lorem</figcaption>
  </figure>
  ```

</details>