The navigation gives people access to every area of the site from wherever they are. It is the map that keeps a large site feeling simple, so users always know how to get where they want to go.

Selecting a dropdown item opens a menu with every link in that category, so people can scan all their options at once instead of guessing which page holds what they need. Clear categories and predictable behaviour turn even a broad site structure into something that feels easy to navigate.

Headline modules give every section a clear starting point. Built from a tag, a headline, and body copy, with an optional button or navigation element, they introduce a topic at a glance and set the visual hierarchy for everything that follows.

Each module adapts without extra work. Choose left or center alignment to match the layout, and select the right heading level, H1, H2, or H3, while predefined spacing tokens keep the rhythm consistent across every page. Built for modularity and speed, headline modules let teams assemble new sections quickly, without sacrificing consistency.

The footer is where a page closes but the relationship continues. It gives people a reliable place to find what the main navigation does not always show: contact details, legal links, social channels, and a way back to the key sections of the site. A strong footer means no one ever reaches a dead end.

Structure and consistency matter most here. Group links logically, keep hierarchy clear with headings for each column, and always include the essentials: imprint, privacy policy, and contact information. Keep the tone and spacing consistent with the rest of the page, so the footer feels like a natural conclusion rather than an afterthought. Done well, it reinforces trust and gives every visitor a clear next step, wherever they are in their journey.

This process card comes alive as people scroll. Instead of clicking through separate steps, users move down the page and watch the content update automatically, each stage revealing itself at exactly the right moment. It turns a simple scroll into a guided journey.

The result is a walkthrough that feels effortless. There is nothing to click and nothing to figure out, just a natural rhythm between reading and discovering. This makes it a strong fit for explaining a process, a journey, or a set of steps in a way that keeps people engaged from start to finish.

This feature showcase puts one idea in the spotlight at a time. Users select a feature and only its content appears, so attention stays on what matters most instead of competing for space with everything else on offer.

This focused approach makes even a long list of features easy to explore. Each selection brings a clean, uncluttered view, so people can move through capabilities at their own pace and actually absorb what each one offers, rather than skimming past it.

This section shows just how effortless the Hubject experience is, from start to finish. As users scroll, the Hubject logo moves through the entire flow, turning an abstract process into something visual and easy to follow.

The motion does the explaining. Instead of describing each step in text, the journey unfolds naturally as people scroll, making the simplicity of the experience something they see and feel, not just read about.

Call-to-action sections put the message that matters most front and center. Use them to promote a service, drive a contact request, or highlight information the reader should not miss. A well-placed CTA turns a passive visitor into someone taking the next step.

Color signals intent, so choose it with purpose. The default CTA uses Teal 500, our brand color, for everyday actions. Neutral CTAs use Near Black when the tone should stay calm and informational. For CTAs addressing a challenge or pain point, use Signal Coral: the stronger contrast draws extra attention and gives urgent messages the emphasis they need.

The hero side panel for subpages is built from two main sections. The visual asset section holds an image or illustration that gives the subpage an immediate identity. The content section carries the page's core message in text. Together, they give every subpage a strong, consistent opening.

Most subpages also include a dot pattern at the bottom of the hero, evenly spaced with a 16px gap, adding a subtle finishing touch without competing with the content above it.

This library represents where our web components stand today, not where they end. As Hubject grows and new products, features, and use cases emerge, new components will join this collection, and existing ones will keep evolving alongside them.

We see this as a living foundation rather than a fixed set of rules. If you are building something that is not covered here, or see an opportunity to improve an existing component, reach out to the brand team. Together, we keep this library growing in a way that serves everyone building the Hubject experience.