Marathon UI components examples

Marathon

A hero section featuring a prominent headline, a recent update badge, and two call-to-action buttons. It includes a top navigation bar with a logo, links, and a 'Get Started' button.

• Hero section

Marathon

A bar chart displaying time tracked over a week, with a date range selector, project filter, and a summary panel showing total hours per project.

• Charts

Marathon

A dropdown menu with various actions.

• Dropdown menu

Marathon

A small card notifying the user of a newly added task, featuring the task name, assignee avatar, and actions to hide or manage the task.

• Card

Marathon

A task detail header showing a title, assignee avatar, and tags. A dropdown menu is open below the 'Inbox' tag, allowing the user to select a new status for the task.

• Input select

Marathon

An empty state for a kanban board showing columns for Inbox, Backlog, and Up Next. The Inbox column features an empty state message with app integration icons and a call to action to manage integrations.

• Empty state

Marathon

A vertical sidebar navigation menu with a logo, primary links, project links, secondary links, and a trial upgrade prompt at the bottom.

• Vertical navigation

Marathon

Empty inbox screen with integration options.

• Empty state

Marathon

A page footer section featuring a prominent call-to-action area with a headline and two buttons, followed by a standard footer layout with a company description and navigation links organized into columns.

• Footer

Marathon

A bento grid layout showcasing various product features with a mix of text descriptions and UI mockups.

• Bento box

Marathon

A top navigation header featuring a logo on the left, a central navigation menu, and login/signup actions on the right.

• Header