Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Navigation Card

Sign In
View in FigmaView in Clay

Navigation card is a visual component focused on providing navigation in distributive pages or discributive page sections.

navigation card default state


This card is simple containing just a minimalistic image or icon, title and possible short description.

Navigation card is thought to visually repensent concepts but not to display images that contain lot of information.

You can find it in two formats:

  • Big: for those cases where you want to highlight more relevant access points
  • Small: for secondary access points



navigation card default state


navigation card hover state, the background shades in gray and a blue line appears below


navigation card active state, the background gets a bit darker than in hover state

Something to improve? Report an issue!