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 title is always visible as header, even in collapsed form. The user clicks on the title to expand the content. It should be clear and descriptive and as brief as possible.
  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..

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?

Newsletter

You can unsubscribe at any time. For information about our privacy practices, please check the privacy policy.
Made with ❤ and Mame in the European Union.
Copyright (C) 2019 - 2021 mame.app. All Rights reserved.