<style>
.label {
color: magenta;
display: block;
margin: 3em 0 1em;
}
</style>
<span class="label">Button links - large</span>
<p>
<a href="#" class="button-yellow button-large" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-blue button-large" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-outline button-large" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-black button-large" role="button" tabindex="0" data-scroll>
Apply
<i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
Apply
<i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>
<span class="label">Button links - default</span>
<p>
<a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-blue" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-black" role="button" tabindex="0" data-scroll>
Apply
<i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
Apply
<i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>
<span class="label">Button links - small</span>
<p>
<a href="#" class="button-yellow button-small" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-blue button-small" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-outline button-small" role="button" tabindex="0" data-scroll>
Book an open day
<span class="button-overlay"><span>
Book an open day
</span></span></a> <a href="#" class="button-black button-small" role="button" tabindex="0" data-scroll>
Apply
<i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
Apply
<i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>
<span class="label">Button links - with obnoxiously large labels</span>
<p>
<a href="#" class="button-yellow" role="button" tabindex="0" data-scroll>
Book an open day with obnoxiously large labels
<span class="button-overlay"><span>
Book an open day with obnoxiously large labels
</span></span></a> <a href="#" class="button-blue" role="button" tabindex="0" data-scroll>
Book an open day with obnoxiously large labels
<span class="button-overlay"><span>
Book an open day with obnoxiously large labels
</span></span></a> <a href="#" class="button-outline" role="button" tabindex="0" data-scroll>
Book an open day with obnoxiously large labels
<span class="button-overlay"><span>
Book an open day with obnoxiously large labels
</span></span></a> <a href="#" class="button-black" role="button" tabindex="0" data-scroll>
Apply with obnoxiously large labels
<i class="button-icon uod-icons uod-icons-external-link"></i><span class="button-overlay"><span>
Apply with obnoxiously large labels
<i class="button-icon uod-icons uod-icons-external-link"></i></span></span></a></p>
<style>
.label {
color: magenta;
display: block;
margin: 3em 0 1em;
}
</style>
<span class="label">Button links - large</span>
<p>
{% include '@button' with {
label: 'Book an open day',
href: '#',
size: 'large',
scheme: 'yellow'
} %}
{% include '@button' with {
label: 'Book an open day',
href: '#',
size: 'large',
scheme: 'blue'
} %}
{% include '@button' with {
label: 'Book an open day',
href: '#',
size: 'large'
} %}
{% include '@button' with {
label: 'Apply',
href: '#',
size: 'large',
external: true,
scheme: 'black'
} %}
</p>
<span class="label">Button links - default</span>
<p>
{% include '@button' with {
label: 'Book an open day',
href: '#',
scheme: 'yellow'
} %}
{% include '@button' with {
label: 'Book an open day',
href: '#',
scheme: 'blue'
} %}
{% include '@button' with {
label: 'Book an open day',
href: '#'
} %}
{% include '@button' with {
label: 'Apply',
href: '#',
external: true,
scheme: 'black'
} %}
</p>
<span class="label">Button links - small</span>
<p>
{% include '@button' with {
label: 'Book an open day',
href: '#',
size: 'small',
scheme: 'yellow'
} %}
{% include '@button' with {
label: 'Book an open day',
href: '#',
size: 'small',
scheme: 'blue'
} %}
{% include '@button' with {
label: 'Book an open day',
href: '#',
size: 'small'
} %}
{% include '@button' with {
label: 'Apply',
href: '#',
size: 'small',
external: true,
scheme: 'black'
} %}
</p>
<span class="label">Button links - with obnoxiously large labels</span>
<p>
{% include '@button' with {
label: 'Book an open day with obnoxiously large labels',
href: '#',
scheme: 'yellow'
} %}
{% include '@button' with {
label: 'Book an open day with obnoxiously large labels',
href: '#',
scheme: 'blue'
} %}
{% include '@button' with {
label: 'Book an open day with obnoxiously large labels',
href: '#'
} %}
{% include '@button' with {
label: 'Apply with obnoxiously large labels',
href: '#',
external: true,
scheme: 'black'
} %}
</p>
/* No context defined for this component. */
There are no notes for this item.