Image Figure

Combine Images with content.

Overview

The image figures is a combination of an image and other content. It's perfectly suited for presenting categories, services, products or similar content.

As an alternative you can also use an icon figure.

Usage Examples

  • Overviews and presentations.
  • Listings of categories.
  • Presentation of services, goods, products..
  • ..

Image Figure Properties

  1. Image: The image for the figure. Please make sure you have the permissions and licenses to use the images / media you upload. Learn more.
  2. Alternate Text: You can choose an icon which is displayed on the side of the accordion element. Don't be confused with the accordion collapse status on the left. 
  3. Background: Choose an optional background for the image figure.
  4. Link Type: Add a link to the image (optional).
  5. Add content directly to your page
Everything else can be configured with the general properties. 
Image Figure Properties Description

See it in action

Building with Mame Builder
Just a formatted text.
Building with Mame Builder
Some HTML content below the image. You can add as many elements as you want.
Building with Mame Builder
An image figure with a gradient as background color. 

Lorem ipsum dolor..
Three Icon Figures on a Grid.

Interactions and Accessibility

Users can expand the accordion by clicking on the header with the accordion title. As an alternative users can use the keyboard and navigate between Accordions by pressing Tab and open them by pressing Enter

Generated HTML (outline)

<figure class="mame-element mame-image-figure accent" style="..">
   <img src=".." alt=".."  class="mame-image-figure__image">
   <div class="mame-image-figure__body" style="--p:20px 40px;">
     ...
   </div>
</figure>

Style / CSS Selectors


.mame-image-figure {
  /* All image figures */
}

.mame-image-figure__image {
  /* The image itself */

.mame-image-figure__body {
  /* The body of the image figure  */
}

JavaScript

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

Was this article helpful?