Pictures

Pictures

Introduction

Pictures are shown with the traditional img tag, and no special styling is applied. There are, however, specification classes (and a special tag case) to handle variations, such as image inlining, centering, applying a shadow or a caption.

Usage

• Traditional pictures

  Traditional pictures are shown using the img tag.

  Example

  <img src="picture.jpg" />

• Inline pictures

  Inline pictures are shown using the specification class inline.

  Example

  <img src="picture.jpg" class="inline" />

• Shadowed pictures

  Pictures can be applied a mild shadow using the specification class shadowed.

  Example

  <img src="picture.jpg" class="shadowed" />

• Centered pictures

  Pictures can be centered in their container using the generic specification class centered.

  Example

  <img src="picture.jpg" class="centered" />

• Captioned pictures

  Pictures with captions require special attention. They require to be encapsulated in the figure tag, whereas the caption itself requires the figcaption tag alongside the img tag, which need the captioned specialization class. Captioned pictures can be shadowed and/or centered. If centered, the caption itself will follow the picture margin.

  Example

  Standard picture with caption.

  <figure>
    <img src="picture.jpg" class="captioned" />
    <figcaption>Picture caption</figcaption>
  </figure>

  Example

  Shadowed, centered picture with caption.

  <figure class="centered">
    <img src="picture.jpg" class="shadowed captioned" />
    <figcaption>Picture caption</figcaption>
  </figure>

Live examples

Live examples