Pinecone

Info Card 

<div class="spacer"></div>
<div class="info-card">
    <button id="button" type="button" class="button button--borderless"><svg class="icon icon--close" aria-hidden="true" viewBox="0 0 20 20" focusable="false">
            <use href="/images/close.svg#close" />
        </svg>
        <span class="button__label screen-reader-text">Close</span></button>
    <p class="info-card__title">
        <svg class="icon icon--language" aria-hidden="true" viewBox="0 0 32 32" focusable="false">
            <use href="/images/language.svg#language" />
        </svg>
        Change language
    </p>
    <p class="info-card__description">Want to see resources in another language?</p>
    <p class="info-card__action">
        <a href="/settings/language">Add or change language</a>
    </p>
</div>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
<div class="info-card">
	{% render '@button--borderless', {
		label: 'Close',
		labelVisuallyHidden: true,
		icon: 'close',
		standAlone: true
	}, true %}
	<p class="info-card__title">
		{% if icon %}{% render '@svg', {svg:icon, viewBox: '0 0 32 32'}, true %}{% endif %}
		{{ title }}
	</p>
	{% if description %}
	<p class="info-card__description">{{ description }}</p>
	{% endif %}
	<p class="info-card__action">
		<a href="/settings/language">{{ actionLabel }}</a>
	</p>
</div>
 
{
  "title": "Change language",
  "icon": "language",
  "description": "Want to see resources in another language?",
  "actionLabel": "Add or change language"
}

There are no notes for this item.