Icon Figure

Make blocks interesting

Overview

The icon figure is a combination of an icon and other content perfect for presenting categories, products and similar content. You can see it in action in the mame documentation or on the help page. It's a lightweight alternative to image figures.

Usage Examples

  • Listing of Categories.
  • Presentation of services or goods.
  • Overviews.
  • ..

Icon Figure Properties

  1. Icon: Choose a icon as header.
  2. Icon Size: Adjust the size of the icon. 
  3. Icon Color: Set the color of the Icon. Choose either a site color or a custom one.
  4. Background: Choose an optional background for the Icon Figure.
  5. Link Type: Add a link to the icon (optional).
  6. Add content directly to the icon figure.

Everything else is configured with the common properties. 
Icon Figure Properties Wireframe

See it in action

Icon Figure with HTML Text
And a button
Mame Builder
Icon Figure with a gradient background and mouse over effect.
Three Icon Figures on a Grid.

Interactions and Accessibility

Make sure to set an icon title for accessibility. 

Generated HTML


<figure class="mame-element mame-icon-figure accent">
   <div class="mame-icon-figure__icon icon icon-lab primary" style=".."></div>
   <div class="mame-icon-figure__body" style="--p:20px 40px;">
      Icon Figure Content
   </div>
</figure>

Style / CSS Selectors


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

.mame-icon-figure__icon {
  /* Icon */
} 

mame-icon-figure__body {
  /* Content */
}

JavaScript

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

Was this article helpful?