Alternate CTA button styles in Hero

Created on 17 May 2024, 7 months ago

Problem/Motivation

When there are two CTA links in a Hero component, both have arrows, and the second link is blue text on light gray, which does't really go well with the Hero style (nothing else is blue).

Proposed resolution

Perhaps it would be cleaner to try a few different things:

  • Convert the secondary link color to red on the light gray background.
  • Remove the arrow from the secondary link.
  • If we do this though, we need another visual way to distinguish the second link is actually a link (to differentiate it from the eyebrow text which is also the same red color, but is not a link).
  • Therefore, perhaps make the secondary link a hollow button style and add appropriate hover/focus effects

Gray background - Before:

Gray background - After:

Gray background - Hover Before:

Gray background - Hover After:

Crimson background - Before:

Crimson background - After:

Crimson background - Hover After:

🐛 Bug report
Status

Active

Version

2.2

Component

Code

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024