ui:figure

汎用的なFigureコンポーネントです。それ自体が意味を持ち、独立して成立する画像や動画の表示に利用します。

Examples

Default

Source Code

<figure class="ui:figure">
  <div class="ui:figure__image">
    <img src="https://placehold.jp/1600x400.png" alt="サンプル画像" width="696" height="392" loading="lazy">
  </div>
</figure>

With Caption

Source Code

<figure class="ui:figure">
  <div class="ui:figure__image">
    <img src="https://placehold.jp/1600x400.png" alt="サンプル画像" width="696" height="392" loading="lazy">
  </div>
  <figcaption>これはダミーの画像キャプションです。</figcaption>
</figure>

With Link

Source Code

<figure class="ui:figure">
  <a class="ui:figure__image" href="#">
    <img src="https://placehold.jp/1600x400.png" alt="サンプル画像" width="696" height="392" loading="lazy">
  </a>
  <figcaption>これはダミーの画像キャプションです。</figcaption>
</figure>

Use Picture

Source Code

<figure class="ui:figure">
  <a class="ui:figure__image" href="#">
    <picture>
      <source srcset="sample-mobile.png, sample-mobile@2x.png 2x" media="(max-width: 40rem)">
      <img class="dads-image__img" src="sample.png" srcset="sample@2x.png 2x" alt="サンプル画像" width="696" height="392">
    </picture>
  </a>
  <figcaption>これはダミーの画像キャプションです。</figcaption>
</figure>

Variants

属性	要素	値	効果
data-size	root	small, medium, large, …
data-inline-space	root	small, medium, large, …
data-block-space	root	small, medium, large, …