Use Calcite components to build a course catalog browsing experience with persistent navigation, summary metrics, and course listings.
Built with Shell, Navigation, Menu, Sheet, Tabs, Card Group, Card, Tile Group, Chip, and Button, it keeps navigation visible while the main area focuses on course cards.
Layout considerations
Navigation and content hierarchy stay visible together so users can scan quickly and drill into a learning path. At smaller widths, the layout compacts while preserving access to the same navigation options.
Application behavior
The top Navigation - placed in the Shell's header slot - includes main and secondary Menus, with a conditionally rendered Sheet invoked from an Action in compact layouts. The main area includes summary tiles, category tabs, and a grid of course cards.
Course cards use slots to display relevant content and context through the use of a variety of Calcite components, including Chip, Button, and Tile.
Responsive behavior
Responsive behaviors are built into Calcite components. Here, Tabs scroll horizontally so the tab list remains usable as the width changes.
Adaptive behavior
Adaptive design adjusts structure at defined viewport sizes.
In this sample, desktop menus are replaced by the mobile Sheet trigger at smaller sizes, and the course grid shifts from three columns to two, then one.
At medium widths, navigation becomes compact, desktop menus are hidden, and a slotted Action in the Navigation navigation-action slot opens the Sheet. At smaller widths, hero stats Tile Group stacks vertically, thumbnails shift from block-start to inline-start, and non-crucial elements are hidden.
In its smallest layout, each Card's "details" button expands to full width and the difficulty chip in the footer is hidden.
Accessibility
Throughout the sample, components are appropriately labeled where required, and decorative elements are hidden from assistive technologies.
Implementation details
This sample uses viewport breakpoints to recompute layout state. CSS handles visibility and card layout changes, while JavaScript toggles compact classes and component properties.
The script listens for the mobile navigation Action click event to open the Sheet and closes it when returning to wider viewports.