Mai Lists

Mai Lists is a versatile block to create simple and beautiful icon lists and responsive icon feature grids.

This block actually contains 2 blocks. Mai List is the main container block with overall controls, and Mai List Item is each individual item that contains it's own controls to override the main block.

How To Use

Create or edit the page or post that you'd like to use Mai Lists.
Add Mai List block to the page.
Edit the list settings in the block sidebar.
Add list items by making sure the main Mai List block is highlighted then clicking the plus (+) to add a new Mai List Item block.
Optionally edit each list item settings individually.
Save/update and view your page.

Mai List Screenshots

Mai List Settings

Display

List Type

Displays an icon (unordered list) or numbered (ordered list). Icon lets you choose icon(s) while numbered are automatically numbered. Note: Numbered lists do not number correctly in the editor but will show correctly on the front end.

Icon Location

The alignment of the icon. Default is on the left like a standard list. Start/Center/End align the icon accordingly at the top (before) the list item content.

Icon Style

The style/weight of icon from the Font Awesome library.

Icon

Choose the default icon to display for every list item.

Icon Color

Choose the default icon color to display for every list item.

Icon Background Color

Choose the default icon background color to display for every list item.

Icon Size

The pixel size to display the icon.

Icon Padding

The amount of padding around the icon, in pixels. Typically used with background color setting.

Icon Border Radius

The amount of border radius on the icon background, in pixels. Typically used with background color setting.

Icon Gap

The amount of spacing between the icon and the list item content.

Icon Margin Top

The amount of top margin on the icon. This is used to vertically align the icon depending on the icon size.

Content Margin Top

The amount of top margin on the content. This is used to vertically align the icon depending on the icon size.

Layout

Columns

Choose the number of columns you want to display. Optionally align your columns vertically and horizontally. Use CLEAR to revert back to the default.

Custom Responsive Columns

By default, Mai Theme will automatically scale down the amount of columns on tablets and mobile based on the main Columns (desktop) setting. Using the custom responsive columns setting gives you full control over how many columns display at different “breakpoints” or screen sizes.

Align Columns

Align the column containers themselves. This does not affect the content inside each column. This is only relevant when you don’t have enough entries to fill up the last row. If you have 3 columns, but only 8 entries, the last 2 will align left, center, or right, depending on this setting.

Align Columns (vertical)

Vertical alignment for the entries. This is most noticeable when displaying entries with a different amount of content in them. Most of the time, this setting won’t be needed.