Pattern library

Action

View full screen

Details

Source (Nunjucks)

<a
href="{{ data.url }}"
class="w-actions__fab w-actions__fab--subscribe{% if data.ga %} gc-analytics-event{% endif %}"
data-category="{{ data.ga.category }}"
data-label="{{ data.ga.label }}"
data-action="{{ data.ga.action }}"
>

<span>{{ data.text }}</span>
</a>

Output

<a
href="/newsletter/"
class="w-actions__fab w-actions__fab--subscribe gc-analytics-event"
data-category="web.dev"
data-label="view-subscribe"
data-action="action"
>

<span>Subscribe</span>
</a>

Variants

Share

View full screen

Details

Source

<share-action
authors="{{ data.authors }}"
class="w-actions__fab w-actions__fab--share{% if data.ga %} gc-analytics-event{% endif %}"
data-action="{{ data.action }}"
data-category="{{ data.ga.category }}"
data-label="{{ data.ga.label }}"
data-action="{{ data.ga.action }}"
role="button"
tabindex="0"
>

<span>{{ data.text }}</span>
</share-action>

Output
<share-action
authors="@piccalilli_"
class="w-actions__fab w-actions__fab--share gc-analytics-event"
data-action="click"
data-category="web.dev"
data-label="share, twitter"
data-action="action"
role="button"
tabindex="0"
>

<span>Share</span>
</share-action>