Latitude UI components examples

Latitude

A card displaying a preview thumbnail of an app along with its title, an icon, and the last modified timestamp.

• Card

Latitude

A vertical sidebar navigation menu featuring a logo, primary navigation links, a trial status banner, and secondary utility links at the bottom.

• Vertical navigation

Latitude

A frequently asked questions section organized into categories (Usage, Product, Plans). The first question under Usage is expanded, showing its answer, while the rest are collapsed.

• FAQ

Latitude

A feature section using a bento grid layout to highlight product benefits. It includes a section title and description, followed by a grid of five cards. Each card features a custom illustration, a bold title, and a brief description.

• Bento box

Latitude

A horizontal segmented control with four options: Marketing, Finance, Product, and Operations. The 'Marketing' option is currently selected, indicated by a white pill background.

• Segmented control

Latitude

A frequently asked questions section featuring a list of collapsible items. Each item has a plus icon indicating it can be expanded to reveal more information.

• FAQ

Latitude

A card displaying a template title, a short description, and the author's avatar and name.

• Card

Latitude

A dark-themed section combining a prominent call-to-action with a standard website footer. The CTA area features a headline, description, a 'Get started' button, and a 3D illustration of a chart with collaborative cursors. Below it, the footer includes a logo, social icons,…

• Footer

Latitude

A standard website header featuring a logo on the left, a central navigation menu, and authentication buttons on the right.

• Header

Latitude

A pair of call-to-action buttons, one primary filled button and one secondary outlined button, set against a subtle dotted grid background.

• Button group

Latitude

A stylized illustration of a dashboard grid featuring KPI cards, a donut chart, a line chart, and a filter panel, set against a dark background with glowing accents.

• Illustration

Latitude

A stylized mockup of a collaborative SQL editor interface. It features a dotted background, a database selector dropdown at the top, user avatars indicating presence, and a central code editor window displaying a SQL query. Two custom cursors with user names ('Kevin' and…

• Illustration