List Item

No notes defined.

<a href="" class="sds-listItem sds-hoverContentSecondary">
    <span class="sds-numberCircle -large">
        1
    </span>
    <div class="sds-listItem__text">
        <div class="sds-listItem__textMain sds-textSemiBold">{Link}</div>

        <div class="sds-listItem__textMeta sds-textHelper">{description}</div>

    </div>

    <div class="sds-listItem__rightContent">

        <span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">

            <span class="sds-icon sds-icon-chevronright"></span>

        </span>

    </div>

</a>
 
<{{ eltType }}
{% if eltType === "button" %} type="button"{% elseif eltType === "a" %} href="{{ href }}"{%- endif -%}
class="{{ namespace }}listItem {{ namespace }}hoverContentSecondary{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"
{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}
>
{% render "@snet-number-circle--large",{text: number},true %}
<div class="{{ namespace }}listItem__text">
	<div class="{{ namespace }}listItem__textMain{% if textMainSemiBold %} {{ namespace }}textSemiBold{% endif %}">{{ text }}</div>
	{% if helperText %}
		<div class="{{ namespace }}listItem__textMeta {{ namespace }}textHelper">{{ helperText }}</div>
	{% endif %}
</div>
{% if rightContent %}
	<div class="{{ namespace }}listItem__rightContent">
		{% if iconRight %}
			{%- if (eltType === "button") or (eltType === "a") %}
				{% render "@icon-circle-regular--default",{classes: [namespace+"hoverContentSecondary__icon"], icon: iconRight.icon},true %}
			{% else %}
				{% render "@icon-btn-regular--secondary-10",{icon: iconRight.icon},true %}
			{%- endif %}
		{% endif %}
	</div>
{% endif %}
</{{ eltType }}>