Icon & Text

Columns (Desktop)

Number of columns per row on desktop (993px and above). Tablet auto-collapses to 2 columns and mobile to 1, regardless of the desktop value. Pick 2 for paired items, 3 for the standard feature grid, 4 for compact services lists.

• 2 Two columns
• 3 Three columns (default)
• 4 Four columns

Item Alignment

Horizontal alignment of the icon and text inside each grid cell. Center reads better for short, symmetrical items; left reads better for items with varying-length descriptions.

• left Left (default)
• center Center

Display Mode

Switches the visual source for every item. Icon mode pulls from the Font Awesome 6.4.2 set (per-item icon picker). Image mode swaps in an uploaded photo per item, rendered inside a sized circle/square/rounded container. This is a global toggle - the entire grid uses one mode at a time.

• icon Icon (Font Awesome, default)
• image Image (uploaded photo)

Icon Layout

How the icon sits relative to the text within each item. Stacked is the standard feature-grid look; inline reads more like a checklist or services list.

• stacked Stacked (icon above text, default)
• inline Inline (icon left of text)

Show Card Box

Wraps each grid item in a card container with background, border, shadow, padding, and radius. When on, the full Card Style group becomes available under Style Settings. Use cards when you want each feature to feel like its own discrete unit; leave off for a lighter, more editorial feel.

Show Section Heading

Controls whether the section heading area (badge h6, title h2, description p) renders above the grid. Turn off when the section follows a stronger heading from the row above and you want the grid to read as a continuation.

Heading Alignment (Desktop)

Text alignment for the heading area on desktop (993px and above).

• left Left-aligned
• center Centered (default)
• right Right-aligned

Heading Alignment (Tablet/Mobile)

Text alignment for the heading area on tablet and mobile (below 768px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.

Heading Max Width

Caps the width of the heading area so long h2 lines wrap into a tighter block. Set to 0 for no limit (heading stretches to the full content width).

Section Heading

The badge + title block above the grid. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled) and <h2> for the title. Keep the h6 short (2-4 words) so the badge pill stays compact.

Items (repeater)

The grid items themselves. Each item is one cell in the grid; add as many as you need (no maximum) and the grid rows wrap automatically based on the desktop column count. Each repeater entry exposes:

Fade-In Animation

Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 30px slide from the chosen direction plus opacity.

• none No animation (default)
• bottom Fade Up (slides up from below)
• top Fade Down (slides down from above)
• left Fade from Left
• right Fade from Right
• fade Fade Only (no slide)

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

CSS ID

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #features) and JS targeting.

CSS Class

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Icon Background

Background fill of the icon container (the rounded tile behind the icon). Set this to the page background to make the icon float, or to a brand tint to make the container a colored badge.

Icon Color

Color of the Font Awesome glyph itself.

Icon Container Size

Width and height of the icon container (the colored tile, not the glyph inside). 48-64px works for compact grids; 80+ for hero-style feature blocks.

Image Container Size

Width and height of the image container when Display Mode is Image. Independent from the icon size so editors can size photos larger than icons.

Image Shape

Container shape when Display Mode is Image.

• circle Circle (default)
• square Square (hard corners)
• rounded Rounded Square (soft corners)

Icon Border Radius

Corner radius of the icon container. 0% = square tile, 50% = circle. Use mid values (15-25%) for a rounded-tile look.

Card Background Color

Fill color of the card. Set to the section background for a borderless, shadow-only card; set lighter or darker than the section for a layered effect.

Corner Radius

Rounded corners of the card. 12px matches the theme's default tile rounding.

Card Padding

Inner spacing around the icon + text inside each card. Drop to 20px for a denser grid; raise to 40+ for breathing room on hero feature blocks.

Add Border

Turns the card's 1px border on or off. The border color and width fields below only render when this is on.

Border Color

Border color + opacity. A near-black at very low opacity (5-10%) reads as a clean hairline; bumping opacity gives a stronger, more boxed look.

Border Width

Card border thickness in pixels.

Add Shadow

Adds a soft drop shadow under the card. Shadow color only renders when this is on.

Shadow Color

Color + opacity of the card's drop shadow. Stay under 15% opacity for a tasteful shadow; above that the grid starts to feel heavy.

Spacing Between Cards

Gap between adjacent cards in the grid (both horizontal and vertical). Drop to 12px for a dense bento-style grid; raise to 30+ for an airy layout.

Show Badge Styling

Styles the <h6> inside the section heading as a pill badge instead of a plain heading. The badge color/border are pulled from the chosen badge tier and the theme's badge settings.

Badge Style

Picks the badge tier. Colors are configured in Theme Settings > Badge.

• badge-primary Primary (default)
• badge-secondary Secondary
• badge-three Three
• badge-four Four
• badge-five Five
• badge-six Six

Top Divider / Bottom Divider

Both top and bottom dividers share the same 9 shape options. The shape is rendered as an inline SVG matching the divider color you choose.

• none No divider (default)
• wave-1 Wave 1 (Gentle)
• wave-2 Wave 2 (Sharp)
• wave-3 Wave 3 (Multi)
• wave-4 Wave 4 (Smooth)
• wave-5 Wave 5 (Layered)
• tilt Tilt (Angled)
• curve Curve (Arc)
• triangle Triangle

Each divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (for the tilt divider only, 0-300px), Flip Divider (mirror horizontally), and for the bottom divider: Divider Under Content (puts the divider behind content so buttons stay clickable).

Background (Image, Video, Color, etc.)

The Background Type dropdown drives which sub-controls appear:

• none No background (default; section inherits the page bg)
• color Solid Color - reveals Background Color picker
• gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
• image Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

• standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
• slim Slim (narrower variant, also set in Theme Settings)
• custom Custom - reveals a Custom Width number input (600-1920px, default 1200)

Spacing (Around Content)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

• desktop 100px top, 100px bottom, 0 left, 0 right
• tablet 60px top, 60px bottom, 0 left, 0 right
• mobile 40px top, 40px bottom, 15px left, 15px right