Figure Element

Structure your content.

Overview

The <figure> element is new in HTML 5.  With the figure Element you can highlight certain content areas or create overviews, presentations and highlights. It's the basic structure for the icon and image figure.

Usage Examples

  • Highlighting content blocks
  • Overviews, Introductions
  • Product, Service or Goods Presentation

Properties

  1. Background: Add a different background to the Figure. You can choose between colors, images, gradients or patterns. The default one is white.
  2. Link: Add an optional link for clicking on the figure.
Everything is configured with the common general properties. 

See it in action

A Figure with HTML

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

Multiple Elements

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

Different Background

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
Three Figures on a Grid

Generated HTML

<figure class="mame-element accent mame-figure" style="..">
   <div class="mame-figure__body" style="..">
      ..
   </div>
</figure>

Style / CSS Selectors


.mame-figure {
  /* All Figures */
}

.mame-figure__body {
  /* The content style of the figures */
} 

JavaScript

Figures are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?