project modules: `tag-list`

Available Variants

prototype 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 JSON The data object for this pattern.

{
	"tag_list_classes": "lrv-a-unstyle-list lrv-u-display-inline-flex lrv-u-flex-wrap-wrap lrv-u-flex-direction-row",
	"tag_list_term_item_classes": "lrv-u-margin-r-025",
	"tag_list_term_classes": "",
	"tag_list_terms": [
		{
			"c_span": {
				"modifier_class": "",
				"c_span_classes": "",
				"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"
			}
		},
		{
			"c_span": {
				"modifier_class": "",
				"c_span_classes": "",
				"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"
			}
		},
		{
			"c_span": {
				"modifier_class": "",
				"c_span_classes": "",
				"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"
			}
		},
		{
			"c_span": {
				"modifier_class": "",
				"c_span_classes": "",
				"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"
			}
		},
		{
			"c_span": {
				"modifier_class": "",
				"c_span_classes": "",
				"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"
			}
		},
		{
			"c_span": {
				"modifier_class": "",
				"c_span_classes": "",
				"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"
			}
		}
	]
}