Buttons

Buttons are build using Foundation. Basic styles are available when developing custom HTML to handle variations with brand consistency. See http://foundation.zurb.com/docs/v/4.3.2/components/buttons.html for more details.

Default Buttons

Default button styling provided by Foundation configuration.

<a class="button" href="#">
Default Button
<a class="button primary" href="#">
Primary Button
<a class="button secondary" href="#">
Secondary Button
<a class="button disabled" href="#">
Disabled Button
<button disabled>

Expanded buttons

Default button styling with the .expand class applied to make the button fill its grid column. Primarily used for creating mobile-friendly full-width buttons.

<a class="button expand" href="#">
Primary Button Expand
<a class="button expand secondary" href="#">
Secondary Button Expand

Extended buttons

(Additional button styles not provided by Foundation)

<a class="button tertiary" href="#">
Tertiary Button

Special-Case Alternates

(not provided by Foundation)

<a class="button primary alt-1" href="#">
Primary Button Alt 1
<a class="button secondary alt-1" href="#">
Secondary Button Alt 1
<a class="button tertiary alt-1" href="#">
Tertiary Button Alt 1
<a class="button tertiary alt-2" href="#">
Tertiary Button Alt 2

Read More/Less buttons

Exetended from base Foundation expanded buttons to include indicator icons.

<a class="button more" href="#">
Button More
<a class="button expand more" href="#">
Button More Expand
<a class="button less" href="#">
Button Less
<a class="button expand less" href="#">
Button Less Expand

Accessibility

To ensure that disabled visitors have an optimal experience in navigating the site, buttons should have the following attributes:

title - Populate this with meaningful text so that screen readers for visually impared users give good direction.

<a class="button" title="Signup for our newsletter" href="#">Default Button</a>
Default Button

role="button" - This should be set so that users can interact with the button by keyboard

<a class="button" role="button" href="#">Default Button</a>
Default Button