Icon Block
Documentation: Icon Block Component
Overview
model object, allowing for flexible integration into various parts of a web application.Model Documentation
model object is used to configure the Icon Block Component. It defines the component's layout, content, and styling.Model Structure
StringA unique identifier for the section element, used to set the
id attribute.StringOptional CSS class(es) for additional styling of the component.
StringOptional header text displayed at the top of the section.
NumberControls the alignment of the header text (1 for left, 2 for center, 3 for right).
NumberSpecifies the number of columns in the grid (1 to 4).
StringBackground color for the section.
StringColor of the text within the section.
ArrayAn array of icon objects, each with:
StringOptional URL for the icon image.
ObjectOptional image object with a
link property.StringOptional header text for the icon.
StringOptional description text for the icon.
Example Model
{
"id": "icon-block",
"cssClass": "icon-block",
"header": "Our Key Features",
"alignment": 2,
"columns": 3,
"backgroundColor": "#f8f9fa",
"textColor": "#333",
"icons": [
{
"link": "https://example.com/icon1.png",
"header": "Feature One",
"text": "Description of feature one."
},
{
"link": "https://example.com/icon2.png",
"header": "Feature Two",
"text": "Description of feature two."
},
{
"link": "https://example.com/icon3.png",
"header": "Feature Three",
"text": "Description of feature three."
}
]
}Component Structure
1.
2.
3.
HTML Template
JavaScript
Explanation
data and props to manage configuration, styling, and layout.Usage
1.
Register
iconblockdefault in your Vue app.2.
Pass a configuration object to the component to define the layout, icons, and styling.
3.
The component handles the setup of layout and styles automatically based on the provided
model.4.
Apply custom styles and adjust the configuration to fit your design needs.