<i class="i i-search-white"></i>
<i class="i i-{{ icon }}"></i>
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"icon": "search-white"
}
{
"spriteName": "sprite-915cb569.svg",
"icons": [
"arrow-left",
"arrow-right",
"calendar",
"check",
"error",
"facebook-brand",
"feedback",
"filter-library",
"filter-primary",
"filter-white",
"info",
"instagram-brand",
"linkedin-brand",
"mail",
"print",
"search",
"search-black",
"search-gray",
"search-white",
"twitter-brand",
"warning",
"youtube-brand"
]
}
Icons are displayed as background images using a SVG image file. Icons are automatically generated from a folder of single icons in the build process of this library.
If your project needs additional icons it is advisable to use a custom solution for your project to keep this library general.
By convention icons use the (semantic-less) <i>
tag:
<i class="i i-<icon-name>"></i>
To create a icon hover effect use the following pattern:
.i-hover-target
to the element that will trigger the hover.i-hover
to the <i class="i"></i>
element (in addition to the default classes)<icon-name>-hover
to the <i class="i"></i>
element (in addition to the default classes)<a class="i-hover-target" href="..">
<i class="i i-hover i-search-light i-search-dark-hover"></i>
</a>
All icons have the capability to be the “hover-state-icon” via the .i-<icon-name>-hover
pattern, however it is recommended that you use two icons that match in shape and size.