Header CTA Button

Header CTA Button

Effective Date: February 23, 2026   Last Updated: February 23, 2026

Hibu Policy

Hibu One supports a single Header CTA Button positioned in the top right corner of the desktop header. Only one button is permitted in this location.

If a client requests a different primary action (e.g., Make a Reservation, Shop Online, Pay Now, Translate), the existing Header CTA Button may be swapped for the requested action. Additional buttons will not be added to the desktop header.

The Header CTA Button does not appear on tablet and does not appear on mobile by default. If appropriate, the mobile header button may also be swapped at the client’s request. HTML embed code may replace the button in the desktop header; however, embedded code is not guaranteed to function in the mobile header.

If mobile placement is required and embed code cannot function in the header, the button or code will be placed in the Hero section beneath the primary CTA on the Homepage and Category Landing Pages only.

Definition

The Header CTA Button is the single action-oriented button located in the top right corner of the desktop site header. It represents the primary conversion action for the site.

Purpose / Why It Matters

The header is a high-visibility, high-priority area of the site. Limiting this space to a single CTA:

  • Maintains design clarity and hierarchy
  • Prevents competing actions
  • Supports focused conversion behavior
  • Protects the integrity of the Hibu One design system


Allowing only one button ensures consistency across all Hibu One websites and preserves usability standards.

Rules & Guidelines

Button Quantity & Placement

  • Only one button is permitted in the top right corner of the desktop header.
  • Additional buttons will not be added to the desktop header.
  • The Header CTA Button does not appear on tablet.
  • The Header CTA Button does not appear on mobile by default.

Swapping the Button

  • The default Header CTA may be replaced with a client-requested action.
  • Examples include, but are not limited to:
  • Make a Reservation
  • Shop Online
  • Pay Now
  • Translate Site
  • When receiving this request, teams must ask whether the client also wants the mobile CTA button swapped.

Mobile Considerations

  • The mobile header typically includes a CTA button to the left of the phone number.
  • This mobile header button may be swapped upon client confirmation.
  • HTML embed code may not function properly in the mobile header.
  • If embed code cannot function in the mobile header and the client requires mobile visibility, the solution is:
  • Place the button or embed beneath the Hero CTA
  • Placement allowed on Homepage and Category Landing Pages only

Design Standards

  • The Header CTA Button must follow the established primary or secondary button palette when using native Hibu button functionality.
  • If the Header CTA Button is replaced with client-provided HTML embed code, the styling may not match the Hibu One design system.
  • Hibu will not modify, rewrite, or restyle third-party embed code to force visual alignment with site button styles.
  • Any visual inconsistencies resulting from third-party code are not the responsibility of Hibu.

< Older Post

 Newer Post >