larva objects: o-indicator.photos
o-indicator README
The indicator object supports c-span and/or c-icon. It is useful for arbitrary icons or text that visually support other elements, for example, the "Photos" or "Video" indication stuck to the image in a story excerpt. Works nicely with a-glue.
o-indicator Twig The markup file.
<span class="o-indicator {{ o_indicator_classes }}">
{% if c_icon %}
{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
{% endif %}
{% if c_span %}
{% include "@larva/components/c-span/c-span.twig" with c_span %}
{% endif %}
</span>
o-indicator.photos JSON The data object for this pattern.
{
"o_indicator_classes": "lrv-a-glue lrv-a-glue--b-0 lrv-a-glue--r-0 u-pointer-events-none lrv-u-flex lrv-u-background-color-black lrv-u-color-white lrv-u-padding-a-050 lrv-u-border-radius-5 lrv-u-margin-a-050",
"c_span": {
"modifier_class": "",
"c_span_classes": "lrv-u-whitespace-nowrap lrv-u-margin-l-050 lrv-u-text-transform-uppercase lrv-a-font-secondary-s",
"c_span_text": "Photos",
"c_span_url": "",
"c_span_link_classes": ""
},
"c_icon": {
"c_icon_link_classes": "",
"c_icon_name": "gallery",
"c_icon_target_attr": "_blank",
"c_icon_link_screen_reader_text": "Icon Link",
"c_icon_url": false,
"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
"c_icon_rel_name": "noopener noreferrer",
"c_icon_screen_reader_tag_text": "",
"c_icon_screen_reader_text": "Plus Icon",
"c_icon_screen_reader_title_attr": "Plus Icon"
}
}