<table class="fractal__table">
<tr>
<td></td>
<td class="
">
primary
</td>
<td class="
">
secondary
</td>
<td class="
">
white
</td>
</tr>
<tr>
<td>basic</td>
<td class="
">
<button class="
c-button
c-button--primary
c-button--basic
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--primary
c-button--basic
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--basic
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
">
<button class="
c-button
c-button--secondary
c-button--basic
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--basic
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--basic
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--secondary
c-button--basic
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--basic
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--basic
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
bg-brand-hhnavy
">
<button class="
c-button
c-button--white
c-button--basic
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--basic
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--basic
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--white
c-button--basic
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--basic
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--basic
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>filled</td>
<td class="
">
<button class="
c-button
c-button--primary
c-button--filled
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--primary
c-button--filled
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--filled
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
">
<button class="
c-button
c-button--secondary
c-button--filled
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--filled
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--filled
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--secondary
c-button--filled
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--filled
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--filled
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
bg-brand-hhnavy
">
<button class="
c-button
c-button--white
c-button--filled
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--filled
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--filled
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--white
c-button--filled
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--filled
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--filled
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>outlined</td>
<td class="
">
<button class="
c-button
c-button--primary
c-button--outlined
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--outlined
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
">
<button class="
c-button
c-button--secondary
c-button--outlined
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--outlined
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--outlined
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--secondary
c-button--outlined
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--outlined
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--outlined
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
bg-brand-hhnavy
">
<button class="
c-button
c-button--white
c-button--outlined
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--outlined
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--outlined
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--white
c-button--outlined
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--outlined
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--outlined
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>pill</td>
<td class="
">
<button class="
c-button
c-button--primary
c-button--pill
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--pill
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--pill
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--primary
c-button--pill
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--pill
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--primary
c-button--pill
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
">
<button class="
c-button
c-button--secondary
c-button--pill
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--pill
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--pill
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--secondary
c-button--pill
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--pill
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--secondary
c-button--pill
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
<td class="
bg-brand-hhnavy
">
<button class="
c-button
c-button--white
c-button--pill
c-button--medium
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--pill
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--pill
c-button--medium
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
<br><br>
<button class="
c-button
c-button--white
c-button--pill
c-button--small
">
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--pill
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
<span class="
c-button__label
small-only:hidden
">Text</span>
<span class="c-button__label medium:hidden large:hidden"></span>
</button>
<button class="
c-button
c-button--white
c-button--pill
c-button--small
">
<span class="c-button__icon">
<svg class="text-neutral-grey-02">
<use xlink:href="#heart"></use>
</svg>
</span>
</button>
</td>
</tr>
</table>
<table class="fractal__table">
{% for variant in ['', 'basic', 'filled', 'outlined', 'pill'] %}
<tr>
<td>{{ variant }}</td>
{% for theme in ['primary', 'secondary', 'white'] %}
<td
class = "
{% if theme == 'white' %}
{% if variant %}
bg-brand-hhnavy
{% endif %}
{% endif %}
"
>
{% if not(variant) %}
{{ theme }}
{% else %}
{% render '@button', {
label: {
default: 'Text',
mobile: ''
},
theme: theme,
variant: variant,
size: 'medium'
} %}
{% render '@button', {
label: {
default: 'Text',
mobile: ''
},
icon: 'heart',
theme: theme,
variant: variant,
size: 'medium'
} %}
{% render '@button', {
icon: 'heart',
theme: theme,
variant: variant,
size: 'medium'
} %}
<br><br>
{% render '@button', {
label: {
default: 'Text',
mobile: ''
},
theme: theme,
variant: variant,
size: 'small'
} %}
{% render '@button', {
label: {
default: 'Text',
mobile: ''
},
icon: 'heart',
theme: theme,
variant: variant,
size: 'small'
} %}
{% render '@button', {
icon: 'heart',
theme: theme,
variant: variant,
size: 'small'
} %}
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</table>
/* No context defined. */
No notes defined.