CTA Styles
Basic Structure
CTA structure needs to be as shown.
This is to ensure the CTA will expand with the text within. In order
to accomplish this, we make use of minmax() which requires
display: grid
on the div.btn
element. We need the CTA text
inside of the span
to not scale the font-size when the
CTA is pressed.
<div class="btn btn--primary">
<a href="https://www.brooklinen.com">
<span>CTA Text</span>
</a>
</div>
Defaults
Minimum classes on the div.btn
<div class="btn btn--primary"></div>
<div class="btn btn--secondary"></div>
<div class="btn btn--secondary--small"></div>
The default is that the cta will be left aligned and the fixed width dictated by the verison of CTA (primary, secondary, tertiary).
Helper Classes
You can allow the CTA to extend the full width of the grid__item
it
is inside of by adding btn-breakpoint--spans-grid-item
and can be rest to the default with btn-breakpoint--fixed-large
for primary and secondary buttons and btn-breakpoint--fixed-small
for the tertiary (secondary-small).
You can allow the CTA to align differently through breakpoints with
btn-breakpoint--right
btn-breakpoint--left
btn-breakpoint--center
.
Working CTAs -- Will take you to the homepage
CTA options
Primary Button
default
btn
btn--primary
Left
btn
btn--primary
btn-sml--left
btn-med--left
btn-xlg--left
Centered
btn
btn--primary
btn-sml--center
btn-med--center
btn-xlg--center
Right
btn
btn--primary
btn-sml--right
btn-med--right
btn-xlg--right
spans grid item
btn
btn--primary
btn-sml--spans-grid-item
btn-med--spans-grid-item
btn-xlg--spans-grid-item
Secondary Button
default
btn
btn--secondary
Left
btn
btn--secondary
btn-sml--left
btn-med--left
btn-xlg--left
Centered
btn
btn--secondary
btn-sml--center
btn-med--center
btn-xlg--center
Right
btn
btn--secondary
btn-sml--rightt
btn-med--right
btn-xlg--right
spans grid item
btn
btn--secondary
btn-sml--spans-grid-item
btn-med--spans-grid-item
btn-xlg--spans-grid-item
Secondary Small Button Tertiary
default
btn
btn--secondary--small
Left
btn
btn--secondary--small
btn-sml--left
btn-med--left
btn-xlg--left
Centered
btn
btn--secondary--small
btn-sml--center
btn-med--center
btn-xlg--center
Right
btn
btn--secondary--small
btn-sml--right
btn-med--right
btn-xlg--right
spans grid item
btn
btn--secondary--small
btn-sml--spans-grid-item
btn-med--spans-grid-item
btn-xlg--spans-grid-item
CTA Overflow Text
Text CTA's
Basic Structure
The text CTA styles can techinically be applied to any text element, but
they should only be applied to inline elements, as the
underline will span the entire element that it has been applied to.
Applying to inline elements ensures the underline will not extend beyond
its intended space.
As such, the only truly mandatory part of the example to the right is the
class hover-active--underline
. However, in most cases, the
CTA will be wrapped inside of another element, so it is therefore shown to
the right in a more applicable setting.
<a href="https://www.brooklinen.com" class="hover-active--underline">
CTA Text
</a>
Text CTA Examples
Wrapped Inline Tag
<p class="p_2">
For more info, see our
<span class="hover-active--underline">
size guide
</span>.
</p>
For more info, see our size guide.
Wrapped in a Header
<h1 class="h_1 header-cta">
<span class="hover-active--underline">
Loungewear
</span>
</h1>
Loungewear
Persisted State
In addition to the default hover, the animation can also be triggered and made persistent, by toggling the active class. Too see this in action, click the "Change State" CTA below to toggle the state.
<h1 class="h_1 header-cta">
<span class="hover-active--underline sheets">
Sheets
</span>
</h1>
<div class="btn btn--secondary change-state"><a><span>Change state</span></a></div>
<script>
$('.btn.change-state').on('click', function(){
$('.hover-active--underline.sheets').toggleClass('active');
});
</script>