Icon With Text¶
Availability: All contexts
The icon-with-text module is used to render a single Icon with text on the page.
Configuration parameters¶
image¶
imageof an iconimagerepresents an object with the following properties:widthfloat type, represents the width of the imageheightfloat type, represents the height of the imagefile_namestring type, represents the name of the image fileuploaded_filestring type, represents the name of the uploaded image file
iconTitle¶
string (optional) first line text content (bold).
iconSubtitle¶
string (optional) second line text content.
iconTextPosition¶
below - display text below the icon image.
above - display text above the icon image.
right - display text on the right side of the icon image.
left - display text on the left side of the icon image.
iconTextAlign¶
center - align the text to the center
left - align the text to the left
right - align the text to the right
url¶
string (optional) The URL the icon links to. Accepts absolute (https://...) or relative (/...) URLs.
shouldOpenInTheSameTab¶
int If set to 1, the link will open in the same tab. If set to 0, the link opens in a new tab.
imageAlt¶
string (optional) A string containing the value of an alt attribute read by the screen readers.
textColor¶
colorPicker Allows you to set the text color of the icon text.
padding¶
int Indicates how much padding (in px) to add around the icon.
backgroundColor¶
colorPicker Allows you to set the background color of the icon.
borderRadius¶
int From 0 to 100. Indicate how much background rounding of the icon should be added (0% - rectangular, 100% - round background).
addBorder¶
int if set to 1, allows to add and style a border of the icon.
borderColor¶
colorPicker Allows you to set the border color of the icon.
borderPosition¶
all - display border on all sides of the icon.
top - display border only on the top side of the icon.
bottom - dispay border only on the bottom side of the icon.
top-bottom - display border only on top and bottom sides of the icon.
right - display border only on the right side of the icon.
left - display border only on the left side of the icon.
left-right - display border only on the left and right sides of the icon.
borderWidth¶
int Indicates how thick (in px) a border around the icon should be.
classNames¶
string (optional) A list of additional classes that will be added to the Icon with text. For example "class-1 class-2".
Module source code¶
{% if moduleConfig.image %}
{% from "@macros/image.twig" import image %}
{% set webpImages = { src: [] } %}
{% set nonWebpImages = { src: [] } %}
{% for pathName, pathUrl in moduleConfig.image.paths %}
{% set size2x = "2x" in pathName ? "2x" : "" %}
{% set size15x = "1.5x" in pathName ? "1.5x" : "" %}
{% if "webp" in pathName %}
{%
set webpImages = {
src: webpImages.src|merge([{
path: pathUrl,
size: size2x ?: size15x ?: "1x"
}]),
}
%}
{% else %}
{%
set nonWebpImages = {
src: nonWebpImages.src|merge([{
path: pathUrl,
size: size2x ?: size15x ?: "1x"
}]),
}
%}
{% endif %}
{% endfor %}
{%
set images = [
webpImages|merge({ type: "image/webp" }),
nonWebpImages|merge({ type: "image/#{moduleConfig.image.format}" })
]
%}
<div class="icon-with-text" style="{% if moduleConfig.padding %}--iconWithTextPadding: {{ moduleConfig.padding }}px;{% endif %} --iconWithTextBgColor: {{ moduleConfig.backgroundColor }}; --iconWithTextBorderRadius: {{ moduleConfig.borderRadius }}; --iconWithTextBorderWidth: {{ moduleConfig.borderWidth }}px; --iconWithTextTextColor: {{ moduleConfig.textColor }}; --iconWithTextBorderColor: {{ moduleConfig.borderColor }};">
{% if moduleConfig.url %}
<a
href="{{ moduleConfig.url }}"
class="icon-with-text__item icon-with-text__position_{{ moduleConfig.iconTextPosition }} link link_no-underline {% if moduleConfig.addBorder %}border-{{ moduleConfig.borderPosition}}{% endif %}"
{% if not moduleConfig.shouldOpenInTheSameTab %} target="_blank" rel="noopener nofollow" {% endif %}
aria-label="{% if moduleConfig.imageAlt %}{{ moduleConfig.imageAlt }}{% else %}{{ moduleConfig.iconTitle }} {{ moduleConfig.iconSubtitle }}{% endif %}{% if not moduleConfig.shouldOpenInTheSameTab %}, {{ translate('opens in a new tab') }}{% endif %}">
{% else %}
<div class="icon-with-text__item icon-with-text__position_{{ moduleConfig.iconTextPosition }} {% if moduleConfig.addBorder %}border-{{ moduleConfig.borderPosition}}{% endif %}">
{% endif %}
{{ image({
img: {
width: moduleConfig.image.width,
height: moduleConfig.image.height,
src: moduleConfig.image.paths.original,
id: "picture-#{moduleConfig.image.id}",
alt: moduleConfig.url ? "" : moduleConfig.imageAlt,
class: "icon-with-text__image",
decoding: "async",
loading: "lazy"
},
images
})
}}
{% if moduleConfig.iconTitle or moduleConfig.iconSubtitle %}
<div class="icon-with-text__wrapper align-items-{{ moduleConfig.iconTextAlign == "left" ? "start" : moduleConfig.iconTextAlign == "right" ? "end" : "center" }}">
{% if moduleConfig.iconTitle %}
<p class="icon-with-text__content icon-with-text__title text-align-{{ moduleConfig.iconTextAlign }}">{{ moduleConfig.iconTitle }}</p>
{% endif %}
{% if moduleConfig.iconSubtitle %}
<p class="icon-with-text__content icon-with-text__subtitle text-align-{{ moduleConfig.iconTextAlign }}">{{ moduleConfig.iconSubtitle }}</p>
{% endif %}
</div>
{% endif %}
{% if moduleConfig.url %}
</a>
{% else %}
</div>
{% endif %}
</div>
{% endif %}
Macros reference¶
Used styles¶
Module configuration schema¶
[
{
"label": "General settings",
"state": "unfolded",
"elements": [
{
"name": "image",
"type": "imageUpload",
"options": {
"requireImageSize": true,
"allowedExtensions": ["webp", "svg", "jpg", "png", "gif", "jpeg"]
},
"label": "Icon",
"isRequired": true,
"supportsTranslations": true
},
{
"name": "iconTitle",
"type": "text",
"label": "Bold text",
"isRequired": false,
"supportsTranslations": true
},
{
"name": "iconSubtitle",
"type": "text",
"label": "Text",
"isRequired": false,
"supportsTranslations": true
},
{
"name": "iconTextPosition",
"type": "select",
"options": {
"selectOptions": [
{
"key": "below",
"label": "Below icon"
},
{
"key": "above",
"label": "Above icon"
},
{
"key": "right",
"label": "Right of icon"
},
{
"key": "left",
"label": "Left of icon"
}
]
},
"label": "Text position",
"defaultValue": "below"
},
{
"name": "iconTextAlign",
"type": "select",
"options": {
"selectOptions": [
{
"key": "center",
"label": "Center"
},
{
"key": "left",
"label": "Left <<to_left>>"
},
{
"key": "right",
"label": "Right <<to_right>>"
}
]
},
"label": "Align",
"defaultValue": "center"
},
{
"type": "text",
"name": "url",
"label": "Webpage URL",
"isRequired": false,
"options": {
"placeholder": "https:// or /"
},
"supportsTranslations": 1,
"validators": [
{
"type": "url",
"options": {
"allowRelativePath": true
}
}
]
},
{
"type": "checkbox",
"name": "shouldOpenInTheSameTab",
"label": "Open the link in the same tab",
"hint": "Opening links in the same tab makes navigation easier: using the \"back\" button is possible. The customer can decide to open the page in a new tab.",
"defaultValue": 1
},
{
"name": "imageAlt",
"type": "text",
"hint": "Alternative text (\"alt\" attribute) should contain a description of what the graphic presents. This description is read by software for the blind and analyzed when search engines index the page.",
"label": "Alternative image description (\"alt\")",
"labelDescription": "For images with links, provide both the link destination and image description",
"isRequired": false,
"supportsTranslations": 1
}
]
},
{
"label": "Module appearance",
"state": "unfolded",
"elements": [
{
"name": "textColor",
"type": "colorPicker",
"label": "Text color in module",
"defaultValue": "#121212",
"isRequired": false,
"options": {
"allowVariables": true
}
},
{
"type": "number",
"name": "padding",
"label": "Space around icon (padding)",
"defaultValue": 10,
"isRequired": true,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 0
}
},
{
"type": "lessEqThan",
"options": {
"max": 80
}
}
],
"options": {
"postfix": "px"
}
},
{
"name": "backgroundColor",
"type": "colorPicker",
"label": "Module background color",
"defaultValue": "#FFFFFF00",
"isRequired": false,
"options": {
"allowVariables": true
}
},
{
"type": "number",
"name": "borderRadius",
"label": "Module background rounding",
"labelDescription": "0% - rectangular, 100% - round element",
"defaultValue": 0,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 0
}
},
{
"type": "lessEqThan",
"options": {
"max": 100
}
}
],
"options": {
"postfix": "%"
}
},
{
"name": "addBorder",
"type": "checkbox",
"label": "Add border",
"defaultValue": 0,
"children": [
{
"name": "borderColor",
"type": "colorPicker",
"label": "Border color",
"defaultValue": "#8C98A8",
"options": {
"allowVariables": true
},
"relations": [
{
"parentName": "addBorder",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"name": "borderPosition",
"type": "select",
"options": {
"selectOptions": [
{
"key": "all",
"label": "All sides"
},
{
"key": "top",
"label": "Top"
},
{
"key": "bottom",
"label": "Bottom"
},
{
"key": "top-bottom",
"label": "Top and bottom"
},
{
"key": "right",
"label": "Right side"
},
{
"key": "left",
"label": "Left side"
},
{
"key": "left-right",
"label": "Right and left sides"
}
]
},
"label": "Border position",
"defaultValue": "all",
"relations": [
{
"parentName": "addBorder",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"type": "number",
"name": "borderWidth",
"label": "Border thickness",
"defaultValue": 1,
"validators": [
{
"type": "int"
},
{
"type": "greaterEqThan",
"options": {
"min": 0
}
},
{
"type": "lessEqThan",
"options": {
"max": 100
}
}
],
"options": {
"postfix": "px"
},
"relations": [
{
"parentName": "addBorder",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
}
]
},
{
"label": "CSS",
"state": "folded",
"elements": [
{
"name": "classNames",
"type": "text",
"label": "CSS class",
"labelDescription": "Enter the class name without a dot at the beginning. You can add multiple classes by separating them with spaces."
}
]
}
]