Footer — Cayuse Design System

Examples

Footer

html

<footer class="cds-footer">
  <span>© 2026 Cayuse LLC</span>
  <a class="cds-footer__link" href="/privacy">Privacy</a>
  <a class="cds-footer__link" href="https://support.cayuse.com" rel="noopener">
    Support <span aria-hidden="true" class="fa fa-external-link"></span>
  </a>
</footer>

Figma properties

Property	Values	Notes
`Item Type`	Footer Link · Footer Text	Whether the item navigates.
`Show External Link Icon`	boolean	Marks a link that leaves the product.

The Pendo dead zone

Several artboards carry a hidden layer marked “Dead Space for Pendo Widget — NO FOOTER ITEMS HERE”. The Pendo Resource Center button floats in the lower-right corner of every page and will sit on top of anything placed there.

Keep the lower-right of the footer clear. A support link hidden behind the help widget is a support link nobody uses.

Usage

When to use it

Keep it to legal, support and version information.
Mark links that leave the product with the external icon and say so in the text.
Include the build version — it is the first thing support asks for.
Stack the items on narrow viewports rather than letting them wrap unevenly.

When not to use it

Do not put primary navigation in the footer.
Do not place anything in the lower-right dead zone.
Do not pin the footer to the viewport bottom; let it follow the content.
Do not use footer text smaller than 12px.

Accessibility

Use <footer> for the contentinfo landmark — once per page.
The external-link icon is decorative; the words say where the link goes.
Footer text sits at --color-gray-500 on white — 6.48:1, comfortably above the threshold even at 12px.

Tokens consumed

Token	Applied to	Resolves to
`--container-border`	Top rule	`--color-gray-300`
`--color-gray-500`	Text	`#5e5e5e`
`--link-default`	Links	`--color-blue-500`
`--type-caption-*`	Typography	12 / 14 / Regular