Knowledge Base / Icon Box

Icon Box

With an “Icon Box” you can add text with some sense. You can pick from more than 4 different icon libraries and more than 1000+ icons.

Icon

  • Icon Library: In case you want to include an icon in your Separator, you must pick an icon library first.
  • Icon: Select the icon.
  • Module Position: Specify where the icon is positioned inside the module.
  • Layout display: Specify the display mode.
  • Media Icon: If you want to use an image instead of an icon you can upload it or select it from the media library.
    • Icon animated: If you upload a SVG you can choose this to be animated.
  • Color: Select the color from the color palette.
  • Icon Background Style: Select a background style if you want one for the icon.
  • Icon Size: Select the icon size.

Text

  • Title: Insert a title for the icon box.
  • Title Semantic: Specify the element HTML tag.
  • Title Size: Specify the icon box title size.
  • Title Line-Height: Specify the title line height in pixels.
  • Title font-weight: Specify the title font weight.
  • Title text-transform: Specify the title text transformation.
  • Title letter spacing: Specify the letter spacing.
  • Title text color: Select a color from the color palette.
  • Use theme default font family: If you don’t want to use the theme default font family and pick your own, just untick this option.
    • Font Family: The font family
    • Font Style: The font Style.
  • Text: A Rich text editor to insert a text below the title.
  • Reduce text top space: Activate this to reduce the text top margin.
  • URL (Link): Add a link to the icon.
  • Link Text: Add a text if you want to have some kind of “Read More” link below the text.

Animation

  • CSS Animation: Add some type of CSS animation.
  • Animation Speed: Specify the entrance animation speed in milliseconds.
  • Animation Delay: Specify the entrance animation delay in milliseconds.

Extra

  • Extra Class Name: Add an extra CSS class if needed.