project modules: `fact-list-item`

Available Variants

prototype thumbnail

Term Title

Term Content. Rich text is supported.

fact-list-item README

Renders a description term and detail block. These blocks comprise the content of a fact-list module. Usage is associated with pmc/term-content plugin. A thumbnail variant is available to display a fact list item containing a tag list with images.

fact-list-item Twig The markup file.

<div class="fact-list-item // {{ fact_list_item_classes }}">
	{% if fact_list_item_dt_text %}
		<dl class="fact-list-item-dl // {{ fact_list_item_dl_classes }}">
			<dt class="fact-list-item-dt // {{ fact_list_item_dt_classes }}">
				{{ fact_list_item_dt_text }}
			</dt>
		</dl>
	{% endif %}
	<dd class="fact-list-item-dd // {{ fact_list_item_dd_classes }}" {{ fact_list_item_dd_data_attributes }}>
		{% if fact_list_item_dd_content %}
			{% include "@project/components/c-dek/c-dek.twig" with fact_list_item_dd_content %}
		{% endif %}
		{% if fact_list_item_tag_list %}
		<div class="fact-list-item-tags // {{ fact_list_item_tag_list_classes }}">
			{% include "@project/modules/tag-list/tag-list.twig" with fact_list_item_tag_list %}
		</div>
		{% endif %}
	</dd>
</div>

fact-list-item JSON The data object for this pattern.

{
	"fact_list_item_classes": "pmc-a-cols2@tablet lrv-u-border-b-1 lrv-u-border-color-grey-light lrv-u-margin-b-1 lrv-u-padding-b-1 lrv-a-term-content-grid__fact-list-item",
	"fact_list_item_dd_classes": "lrv-u-margin-l-00 lrv-a-term-content-grid__fact-list-dd",
	"fact_list_item_dd_data_attributes": "itemprop=Thing itemtype=http://schema.org/Thing",
	"fact_list_item_dd_content": {
		"c_dek_classes": "lrv-u-font-family-basic lrv-u-margin-tb-00 lrv-u-display-block",
		"c_dek_markup": "Term Content. Rich text is supported.",
		"c_dek_text": ""
	},
	"fact_list_item_tag_list": {
		"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"
				}
			}
		]
	},
	"fact_list_item_dd_terms_classes": "",
	"fact_list_item_dt_classes": "lrv-u-font-weight-bold lrv-a-term-content-grid__fact-list-dt",
	"fact_list_item_dl_classes": "lrv-u-margin-a-00",
	"fact_list_item_dt_text": "Term Title"
}