Skip to main content

Universal Block Settings

Most blocks in Mind share a set of common settings that control their appearance, size, spacing, and behavior. These settings look and behave the same way whether you are editing a Text block, an Image block, or a Group, so once you learn them you can style any block in the theme.

Color scheme​

Container-type blocks (Group, Layout item, Floating, Collapse, Collapse row, Marquee, Icon, Carousel navigation, and the Image comparison Label) let you override the color scheme of their parent in their Appearance group:

  • Inherit color scheme: The block uses the colors of the section or block it sits in.
  • Color scheme: When inheritance is off, pick one of the color schemes defined in Theme settings > Colors.

Background​

The same blocks provide a background in their Appearance group:

  • Background type: None, Color, or Gradient. The Icon and Carousel navigation blocks offer Color, Gradient, or Image.
  • Background color: A scheme color (Primary, Secondary, Tertiary, Background, Gradient background, Foreground, Foreground 2, Layer 1-4, or Status 1-5) or Custom.
  • Custom background color: A color picker, shown when the background color is set to Custom.
  • Background gradient: One of the built-in gradients (Ember arch, Ember arch soft, Sunrise sweep, Ember spotlight, Ember rise, Ember bloom, Ember glow, Ember focus, Ember halo, Ember dawn, Ember beam, Ember corner, Ember orb) or Custom, with a Custom gradient editor.
  • Sticky gradient: Pins the gradient to the viewport at full height while the section scrolls.
  • Background image desktop / mobile and Background overlay: When the type is Image, pick a separate image per device and add a color or gradient overlay.

To paint a background behind a Section, Group, or Layout item without touching its own Appearance settings, add a Background color or Background image block inside it instead.

Size & layout​

Text-type blocks (Text, Heading, Reveal heading, Collapse row) provide a Layout group:

  • Width: Fit (the block takes only the space it needs), Fill (it expands to the available width), or Custom.
  • Custom width: The width when Width is Custom.
  • Alignment: Align the content left, center, or right.

Container and media blocks (Group, Layout item, Floating, Image, Shape) provide a Size group with per-device values:

  • Device: Switch between the desktop and mobile values. On mobile, keep Inherit desktop value enabled to reuse the desktop settings.
  • Width desktop / Width mobile: Fit or Fill.
  • Height desktop / Height mobile: Fit, Fill, or Custom, with Custom height desktop and Custom height mobile sliders.
  • Max width: Cap the block at a Custom max width. The Image block has separate desktop and mobile max widths.

Group, Layout item, and Floating also have a layout group of their own (direction, alignment, gap, wrap). See Layout Blocks.

Spacing​

Virtually every block provides device-specific padding, and text-type blocks add margin:

  • Padding: Choose the Device (Desktop or Mobile), then set Top, Bottom, Left, and Right padding from 0 to 100 px. On mobile, Inherit desktop value reuses the desktop padding until you turn it off.
  • Margin: The same device switch with Top and Bottom margins from -50 to 50 px. Negative values pull a block closer to its neighbors. Available on Text, Heading, Reveal heading, and Collapse row.

Blocks also pick up the Gap setting of their parent Group, Layout item, or Layout, so you usually only need padding or margin when a single block should sit differently from its siblings.

Borders​

Container blocks include borders in their Appearance group; the Image block has a dedicated Borders group and the Video block styles the border of its play button:

  • Border: None or Solid. The Divider block also offers Gradient, with a Border gradient editor.
  • Border width: Thickness from 0 to 10 px.
  • Border color: Default, Current color, a scheme color, Glassmorphism, or Custom, with a Border opacity slider and a Custom border color picker.
  • Corner radius: None, Extra small, Small, Medium, Large, Extra large, or Extra extra large. The named sizes follow Theme settings > Corner radius.

The Collapse row block adds Bottom border only, which draws a single line under each row instead of a full box.

Typography​

Text-carrying blocks (Text, Heading, Reveal heading, Breadcrumb, Count to, Divider, Tab, Collapse row, and the Image comparison Label) share a Typography group:

  • Preset: Default, Paragraph, Heading 1-6, or Custom. Presets are edited once in Theme settings > Typography.
  • Font, Size, Weight, Line height, Letter spacing, Case, and Wrap: Shown when the preset is Custom. Font is Body, Heading, Sub heading, or Accent; Size runs from Body 1-12 through Heading 1-6 to Display 1-5. Some blocks also offer Italic.
  • Color: Default, Inherit, a scheme color, Transparent, or Custom, with Color opacity and Custom color.
  • Line clamp: Limit the text to 1-5 visible lines (Text, Reveal heading, Breadcrumb, Divider, and Label).

Animation​

Most blocks provide an entrance animation that plays when the block scrolls into view:

  • Type: Global (use the preset from Theme settings > Animation), Custom, or None.
  • Effect: Fade, Fade up, Fade down, Fade left, Fade right, Zoom in, Zoom out, Rotate left up, Rotate right up, Snake up, Snake down, Snake left, Snake right, or 3d up. Shown when the type is Custom.
  • Duration: Animation length from 300 to 4000 ms. Shown when the type is Custom.

The Heading and Reveal heading blocks use their own word-by-word animation instead; see Basic Blocks.

Visibility​

  • Hide on desktop and Hide on mobile: Available on Group, Layout item, and Floating.
  • Hide on mobile: Available on Text, Reveal heading, and Carousel navigation.
  • Show on: Available on Image and Carousel pagination; choose All, Desktop, or Mobile.

This lets you build a different experience per device, for example a compact Group for mobile and a richer one for desktop, each hidden on the other device.

Hover effects​

Several kinds of hover controls recur across blocks.

The Text block provides a Hover group:

  • Hover type: None, Color, Opacity, Underline in, or Underline out.
  • Color, Color opacity, and Custom color: The hover text color.
  • Underline size: Thickness of the animated underline.
  • Opacity: The hover opacity when the type is Opacity.

The Image block provides a Hover effect (None, Colorize, Zoom, Rotate, Shine, or Ripple) with its own Duration.

The Icon and Carousel navigation blocks provide a Hover type (None, Left to right, Right to left, Bottom to top, or Top to bottom) that animates the icon, plus Hover parent to play the effect when the parent container is hovered.

Container blocks (Group, Floating, Layout item) provide a Trigger on parent hover group:

  • Parent: Mark this block as the hover trigger for the blocks inside it.
  • Hover type: None, In zoom, In up, In down, In left, In right, Out zoom, Out up, Out down, Out left, or Out right. Available on Group and Floating.
tip

Not every block has all of these settings. Small utility blocks such as Badge, Spacer, Background color, and Custom liquid keep only their own controls. Padding and animation, however, are available on most blocks. Each block page lists the settings that are specific to that block.