Components

This section documents the component library available across the Markel Headless platform. Components are organised into several groups based on their origin and purpose.

The Periodic Table Naming Convention

When the templating structure for this platform was first designed, the team drew inspiration from the periodic table of elements. Each element symbol maps to a level of content complexity, and that convention carries through to the component prefixes, datasource templates, and view filenames you see today.

  • He – Helium – The lightest content components. The Helium datasource template carries just a Title and Copy field. Components that consume it are prefixed he- — for example he-paragraph, he-alert, he-blockquote, and he-table.
  • Be – Beryllium – A step up in richness. The Beryllium datasource template adds Image and Link fields on top of Title and Copy, making it suited for visual content blocks. Components prefixed be- include be-feature, be-card, be-modal, and be-toast.
  • Li – Lithium – A media-focused template with an Image field, used by layout components like ImageSection that wrap content inside a background image container.
  • Ion – Structural and navigational components that do not have a datasource template of their own. Instead they read rendering parameters or discover page context at runtime. Prefixed ion-, these include the layout primitives (ion-Grid, ion-subgrid, ion-row), interactive containers (ion-accordion, ion-carousel, ion-tabs), and navigation helpers (ion-jumplinks, ion-tableofcontents, ion-breadcrumb).

This naming scheme makes it easy to identify what a component expects at a glance: see a he- prefix and you know it needs a Helium datasource item with Title and Copy; see be- and you know it also expects an Image and Link.

BSTools5

BSTools5 (Bootstrap Tools 5) is the core component library built on Bootstrap 5. It provides the foundational layout system (Grid, SubGrid), content components (Paragraph, Feature, Card, Alert, Blockquote, Table, Modal, Toast), and interactive containers (Accordion, Carousel, Tabs). Nearly every page on the platform uses BSTools5 components for its structure and content. Browse the BSTools5 section in the sidebar to see documentation for each component.

MklComponents

MklComponents (Markel Components) are higher-level, Markel-specific components that build on top of the BSTools5 foundation. These include the Banner, Header Block, Image Feature Block, Content Block, Image Section, Photo Video Block, and Videos components. They are typically used for hero areas, marketing content, and rich media sections that go beyond what a simple Paragraph or Feature can offer.

Business Hub

Business Hub components are purpose-built for the Business Hub portal. They handle authenticated experiences such as the Flash Screen, Documents, Favorites, My Bookings, Dynamic Doc Iframe, Legito Doc Viewer, Resource Search, Resource Heading, Resource Abstract, Resource Content, Resource Further Reading, and Resource Helpful Links. These components integrate with back-end APIs and are typically only rendered within authenticated Business Hub pages.

Navigation

Navigation components manage site-wide wayfinding. The Header and Footer renderings provide the global navigation shell, while the Business Hub Header Pro, Top Bar Nav Item, Secondary Navigation Item, and Brand renderings support the Business Hub’s navigation structure. The BSTools5 library also contributes navigation helpers such as Jump Links, Table of Contents, and Breadcrumb which are documented under BSTools5.

Search

Search components power the site’s search experience. The Search Box provides the input interface, the Search component renders results, and Search By Topics offers faceted topic-based browsing. These components communicate with the Sitecore search index and support both the public-facing Markel Headless site and the authenticated Business Hub portal.