Please refer to the Digital Foundations ↗ documentation for guidelines on call to actions ↗. In addition to those guidelines, the following also apply to buttons in the Rivendell design system:

Button Guidelines

  • All buttons use Aperçu-Bold in title case.
  • Primary and secondary buttons have a left & right padding of 50px.
  • Tertiary buttons have no left or right padding and text is left aligned.
  • Primary and secondary buttons have a border-radius of 5px.
  • All buttons are the same height and can be paired together for multiple CTAs — a 30px margin should separate buttons paired together.

Spec for buttons

Button Animation

  • There is a subtle fade transition from normal to hover state on buttons.
transition: all 0.2s;

Button Usage

Ideally, most buttons should be used in isolation, paired with copy, so there is a clear function of the button, to action something or navigate somewhere.

When there are multiple calls to action or options — consider the hierarchy ↗ of your CTAs and positive vs neutral actions ↗ when deciding which button styles to use, and the wording and intent of your buttons.

Button Pairing Best Practices

Below are some suggestions for when more than one call-to-action is necessary.

Button pairing 1Button pairing 2

Button pairing 3Button pairing 4

View example

results matching ""

    No results matching ""