Get Oxygen
Learn Reference Builder Elements Icon Box

Icon Box

The Icon Box element displays an icon with a heading and text.

Add a Icon Box element to your page from Add+ > Helpers > Icon Box.

Layout & Spacing

  • Content Alignment - align all content within the element left, center, or right.
  • Icon Position - positions the icon relative to the text and link content: top, right, left, or bottom.
  • Icon Vertical Alignment - aligns the icon vertically within the Icon Box element top, middle, or bottom. This parameter is visible only when Icon Position is set to left or right.
  • Icon Space Before - sets the spacing before the icon. If Icon Position is set to either top or bottom, this controls the spacing on top of the icon. Otherwise, if Icon Position is set to either right or left, this controls the spacing to the left of the icon.
  • Icon Space After - sets the spacing after the icon. If Icon Position is set to either top or bottom, this controls the spacing on the bottom of the icon. Otherwise, if Icon Position is set to either right or left, this controls the spacing to the right of the icon.
  • Heading Space Above - sets the spacing above the heading.
  • Heading Space Below - sets the spacing below the heading.
  • Text Space Above - sets the spacing above the text.
  • Text Space Below - sets the spacing below the text.
  • Link Space Above - sets the spacing above the link area of the Icon Box.
  • Link Space Below - sets the spacing below the link area of the Icon Box.

Responsive

In this tab, you can control the responsiveness of the alignment of the elements within the Icon Box element.

  • Vertical Layout Below - set the screen width below which the Icon Box contents will be aligned based on the Content Alignment in this tab.
  • Content Alignment - the alignment set here will only applies to screen widths below the width set in Vertical Layout Below.

Typography

In this tab you can control the typography for the Heading and Text inside the Icon Box.

Each of these three tabs have identical typography settings, which are the same as those found at Advanced > Typography.

Link Area

Drag a button or link into the icon box to nest it inside of the icon box. It will be displayed below the Text.

Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2019
Designed with Oxygen.
LegalTrademark Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram