Skip to main content

BlockStrap Documentation

BS > Icon Box

Block Description

The BS > Icon Box Block is a versatile, multi-purpose block used to create feature sections in BlockStrap templates. It can include an icon, title, and description within a styled box, making it ideal for creating visually engaging features or services lists, process steps, or call-to-action boxes.

Block Features

The Icon Box Block includes customizable elements such as an icon from the Font Awesome library, a title and description, and a link for further interaction. Each element is adjustable, offering flexibility in the creation of visually distinct layouts. Moreover, it allows for customization in icon position and style, typography settings, and block visibility depending on various conditions.

Next, let’s dive into the block options:

Block options

Content

bs-iconbox-content-4431588
  • Icon Box
    • ICON CLASS (text input): Input a Font Awesome icon class to display the desired icon.
    • TITLE (text input): Define the heading for the icon box.
    • TITLE TAG (dropdown): Choose the appropriate HTML tag (from h1 to h6, or div) for the title based on your SEO or styling requirements.
    • DESCRIPTION (textarea): Add a brief description or supplementary information for the icon box.
  • Link
    • LINK TYPE (dropdown): Choose the type of link action when the icon box is clicked. Options include none, home, specific page, post ID, or a custom URL.

Style

bs-iconbox-styles-8504951
bs-iconbox-styles-2-2860074
bs-iconbox-styles-3-7437477
  • Icon Style
    • ICON POSITION (dropdown): Select the placement of the icon relative to the text (top, left, right, bottom).
    • ICON STYLE (dropdown): Choose from various styles like icon, iconbox bordered, iconbox filled, iconbox translucent, iconbox hover invert.
    • FONT SIZE (dropdown): Adjust the font size of the icon.
    • TEXT COLOR (dropdown): Change the icon color by selecting from the theme color palette.
    • TEXT ALIGN (dropdown): Align the icon to the left, center, right, or justified.
    • PADDING BOTTOM (dropdown): Adjust the space between the icon and the element below it.
  • Title Style
    • FONT SIZE (dropdown): Set the size of the title text.
    • FONT LINE HEIGHT (dropdown): Adjust the spacing between each line of the title.
    • TEXT COLOR (dropdown): Choose the title color from the theme color palette.
    • APPEARANCE (dropdown): Choose from the font styles provided.
    • LETTER CASE (dropdown): Choose the casing for your title (e.g., uppercase, lowercase, capitalize).
    • Text justify (checkbox): Enable or disable full justification for the title text.
    • TEXT ALIGN (dropdown): Align the title text to the left, center, right, or justified.
    • PADDING BOTTOM (dropdown): Adjust the space between the title and the element below it.
  • Description Style
    • FONT SIZE (dropdown): Set the size of the description text.
    • FONT LINE HEIGHT (dropdown): Adjust the spacing between each line of the description.
    • TEXT COLOR (dropdown): Choose the description text color from the theme color palette.
    • APPEARANCE (dropdown): Choose from the font styles provided.
    • LETTER CASE (dropdown): Choose the casing for your description (e.g., uppercase, lowercase, capitalize).
    • Text justify (checkbox): Enable or disable full justification for the description text.
    • TEXT ALIGN (dropdown): Align the description text to the left, center, right, or justified.
    • PADDING BOTTOM (dropdown): Adjust the space between the description and the element below it.

Advanced

bs-iconbox-advanced-8343846
bs-iconbox-advanced-2-7787298
  • Wrapper Styles
    • BACKGROUND COLOR: Set the background color for the entire block.
    • Fixed background: Enable or disable a fixed background.
    • Use featured image (File Upload): Option to use a featured image as the background for the block.
    • Margins: Adjust the margin values for the top, right, bottom, and left sides of the block.
    • Padding: Modify the padding values for the top, right, bottom, and left sides of the block.
    • BORDER COLOR: Select a border color from the theme color palette.
    • SHADOW: Choose a shadow style for the block.
  • Hover Animations
    • HOVER ANIMATIONS (multiselect): Choose from a range of hover effects such as Zoom, Shadow, Move up, Move down, Move left, Move right to apply when the block is moused over.
  • Visibility Conditions
    • BLOCK VISIBILITY (modal): Set the conditions under which the block should be visible. This could depend on factors like user role, device type, or time.
  • Advanced
    • ADDITIONAL CSS CLASS(ES): If you want to further customize the block’s appearance, you can add your custom CSS classes here. If adding multiple classes, separate them with spaces.
Feedback