project modules: tag-list.thumbnail
tag-list README
Renders a styled list of tags. Usage is associated with pmc/term-content plugin. A thumbnail variant is available to display tags with their corresponding thumbnails.
tag-list Twig The markup file.
{% if tag_list_terms %}
<ul class="tag-list-terms // {{ tag_list_classes }}">
{% for item in tag_list_terms %}
<li class="tag-list-term // {{ tag_list_term_classes }}">
<div class="tag-list-term-item // {{ tag_list_term_item_classes }}">
{% if item['o_figure'] %}
{% include "@project/objects/o-figure/o-figure.twig" with item['o_figure'] %}
{% endif %}
{% if item['c_span'] %}
{% include "@larva/components/c-span/c-span.twig" with item['c_span'] %}
{% endif %}
</div>
</li>
{% endfor %}
</ul>
{% endif %}
tag-list.thumbnail JSON The data object for this pattern.
{
"tag_list_classes": "lrv-a-cols2 lrv-a-cols1@tablet lrv-a-cols3@desktop lrv-a-grid lrv-a-unstyle-list",
"tag_list_term_item_classes": "lrv-u-margin-lr-auto lrv-u-width-150 lrv-u-max-width-100p",
"tag_list_term_classes": "lrv-u-align-items-center lrv-u-flex-direction-column lrv-u-flex-wrap-wrap lrv-u-flex",
"tag_list_terms": [
{
"c_span": {
"modifier_class": "",
"c_span_classes": "a-truncate-ellipsis lrv-u-color-brand-secondary-dark lrv-u-display-block lrv-u-font-family-basic lrv-u-font-size-13 lrv-u-text-align-center lrv-u-text-transform-uppercase",
"c_span_text": "Music",
"c_span_url": "#test-link-1",
"c_span_link_classes": "lrv-u-font-weight-bold lrv-u-color-black lrv-u-color-brand-primary:hover lrv-a-hover-effect"
},
"o_figure": {
"o_figure_classes": "lrv-u-margin-b-050",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-margin-lr-auto",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1",
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "https://source.unsplash.com/random/200x200/#0",
"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
"c_lazy_image_sizes_attr": "auto",
"c_lazy_image_img_classes": "lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
}
}
},
{
"c_span": {
"modifier_class": "",
"c_span_classes": "a-truncate-ellipsis lrv-u-color-brand-secondary-dark lrv-u-display-block lrv-u-font-family-basic lrv-u-font-size-13 lrv-u-text-align-center lrv-u-text-transform-uppercase",
"c_span_text": "Software Development",
"c_span_url": "#test-link-2",
"c_span_link_classes": "lrv-u-font-weight-bold lrv-u-color-black lrv-u-color-brand-primary:hover lrv-a-hover-effect"
},
"o_figure": {
"o_figure_classes": "lrv-u-margin-b-050",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-margin-lr-auto",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1",
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "https://source.unsplash.com/random/200x200/#1",
"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
"c_lazy_image_sizes_attr": "auto",
"c_lazy_image_img_classes": "lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
}
}
},
{
"c_span": {
"modifier_class": "",
"c_span_classes": "a-truncate-ellipsis lrv-u-color-brand-secondary-dark lrv-u-display-block lrv-u-font-family-basic lrv-u-font-size-13 lrv-u-text-align-center lrv-u-text-transform-uppercase",
"c_span_text": "Data Science",
"c_span_url": "#test-link-3",
"c_span_link_classes": "lrv-u-font-weight-bold lrv-u-color-black lrv-u-color-brand-primary:hover lrv-a-hover-effect"
},
"o_figure": {
"o_figure_classes": "lrv-u-margin-b-050",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-margin-lr-auto",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1",
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "https://source.unsplash.com/random/200x200/#2",
"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
"c_lazy_image_sizes_attr": "auto",
"c_lazy_image_img_classes": "lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
}
}
},
{
"c_span": {
"modifier_class": "",
"c_span_classes": "a-truncate-ellipsis lrv-u-color-brand-secondary-dark lrv-u-display-block lrv-u-font-family-basic lrv-u-font-size-13 lrv-u-text-align-center lrv-u-text-transform-uppercase",
"c_span_text": "Sustainable Agriculture",
"c_span_url": "#test-link-4",
"c_span_link_classes": "lrv-u-font-weight-bold lrv-u-color-black lrv-u-color-brand-primary:hover lrv-a-hover-effect"
},
"o_figure": {
"o_figure_classes": "lrv-u-margin-b-050",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-margin-lr-auto",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1",
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "https://source.unsplash.com/random/200x200/#3",
"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
"c_lazy_image_sizes_attr": "auto",
"c_lazy_image_img_classes": "lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
}
}
},
{
"c_span": {
"modifier_class": "",
"c_span_classes": "a-truncate-ellipsis lrv-u-color-brand-secondary-dark lrv-u-display-block lrv-u-font-family-basic lrv-u-font-size-13 lrv-u-text-align-center lrv-u-text-transform-uppercase",
"c_span_text": "Art",
"c_span_url": "#test-link-5",
"c_span_link_classes": "lrv-u-font-weight-bold lrv-u-color-black lrv-u-color-brand-primary:hover lrv-a-hover-effect"
},
"o_figure": {
"o_figure_classes": "lrv-u-margin-b-050",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-margin-lr-auto",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1",
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "https://source.unsplash.com/random/200x200/#4",
"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
"c_lazy_image_sizes_attr": "auto",
"c_lazy_image_img_classes": "lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
}
}
},
{
"c_span": {
"modifier_class": "",
"c_span_classes": "a-truncate-ellipsis lrv-u-color-brand-secondary-dark lrv-u-display-block lrv-u-font-family-basic lrv-u-font-size-13 lrv-u-text-align-center lrv-u-text-transform-uppercase",
"c_span_text": "Digital Marketing Strategies",
"c_span_url": "#test-link-6",
"c_span_link_classes": "lrv-u-font-weight-bold lrv-u-color-black lrv-u-color-brand-primary:hover lrv-a-hover-effect"
},
"o_figure": {
"o_figure_classes": "lrv-u-margin-b-050",
"c_lazy_image": {
"c_lazy_image_classes": "lrv-u-margin-lr-auto",
"c_lazy_image_link_url": false,
"c_lazy_image_link_classes": "lrv-a-unstyle-link",
"c_lazy_image_crop_class": "lrv-a-crop-1x1",
"c_lazy_image_crop_style_attr": false,
"c_lazy_image_link_tab_index_attr": false,
"c_lazy_image_alt_attr": "Lazy loaded image",
"c_lazy_image_src_url": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg",
"c_lazy_image_placeholder_url": "https://source.unsplash.com/random/200x200/#5",
"c_lazy_image_srcset_attr": "https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w",
"c_lazy_image_sizes_attr": "auto",
"c_lazy_image_img_classes": "lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto",
"c_lazy_image_height_attr": "",
"c_lazy_image_width_attr": "",
"c_lazy_image_in_initial_viewport": false,
"c_lazy_image_decoding_attr": "async"
}
}
}
]
}