Skip to content

Make navigation and related-page tiles feel more clickable - #452

Merged
bedroesb merged 5 commits into
mainfrom
issue-426-clickable-tiles-affordance
Aug 27, 2026
Merged

Make navigation and related-page tiles feel more clickable#452
bedroesb merged 5 commits into
mainfrom
issue-426-clickable-tiles-affordance

Conversation

@bedroesb

@bedroesb bedroesb commented Aug 26, 2026

Copy link
Copy Markdown
Member

Closes #426.

This PR improves the clickable affordance of section navigation tiles and Related pages tiles by adding a consistent arrow cue and subtle hover/focus animation.

Changes include:

  • Add a shared navigation-tile-card.html include for section navigation tiles and related pages.
  • Add a visible arrow affordance to clickable navigation tiles, with hover/focus movement and no hover shadow.
  • Simplify simple section tiles with left-aligned titles, cleaner title fitting, and a vertically centered arrow.
  • Add custom support to section-navigation-tiles-simple.html.
  • Update filter clear buttons to use round primary icon styling in line with the back-to-top button.
  • Improve website section docs for type, custom, except, sort, and simple tiles.
  • Clean up rendered docs snippets so include/tool examples no longer show extra blank space above and below.

New SASS variables

/*-----Section navigation tiles-----*/
$nav-card-arrow-bg: rgba($primary, 0.08) !default;
$nav-card-arrow-bg-hover: $primary !default;
$nav-card-arrow-color: $primary !default;
$nav-card-arrow-color-hover: $white !default;

@bedroesb
bedroesb merged commit eac9431 into main Aug 27, 2026
2 checks passed
@bedroesb
bedroesb deleted the issue-426-clickable-tiles-affordance branch August 27, 2026 08:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make it visually more clear that section navigation tiles and Related pages tiles are clickable

1 participant