Skip to main content

Divider

Use Divider to separate sections, frame content, or add a visual rule with optional text or icon content in the middle.

How It Works In Atomicat​

The drawer exposes divider border type and an optional embedded element. Border styles come from Atomicat divider options, including standard styles and extra mask-based line styles. The embedded element can be none, text, or icon. When text is selected, the drawer shows a text field. When icon is selected, it opens the icon library and stores icon class and SVG data.

When To Use It​

  • Separate hero, proof, offer, FAQ, and footer sections without adding a full container.
  • Add a small icon divider between testimonials or feature groups.
  • Place a short word such as or, bonus, or included between content groups.
  • Create visual rhythm in long landing pages.

Configure The Element​

  • Choose the divider type first because some styles behave differently with gradients.
  • Select none, text, or icon for the center element.
  • For text dividers, keep content very short.
  • For icon dividers, select a simple icon that still reads at small size.
  • Adjust line thickness, color, spacing, and responsive width in the style drawer.

Testing Notes​

  • Preview against the actual section background so line color and contrast are clear.
  • Check mobile width; dividers with text can wrap if the parent container is too narrow.
  • If using a gradient border, verify the chosen line style still renders correctly.

Limitations And Tips​

  • Divider is decorative; do not put essential copy only in the divider element.
  • Complex icons can become noisy at divider size.
  • Use fewer dividers on short pages so the layout does not feel fragmented.

FAQ​

Can a divider include text?

Yes. Choose the text element option, then edit the divider text field.

Can a divider include an icon?

Yes. Choose icon and select one from the icon library.

Why did some border styles disappear?

The source filters some styles when the current divider uses a gradient border image.