Sitecore Components

This page provides an overview of each component, showcasing their design and functionality to ensure a seamless and consistent brand experience across all webpages.

Stage & Intro

The Stage section serves as the visual and thematic introduction to a page. It is designed to capture attention and set the tone for the content that follows. Depending on the layout and purpose, different variants can be used — ranging from bold headlines to image-based intros or interactive carousels. Each Stage type offers flexibility in how key messages, visuals, or interactive elements are presented, ensuring the first impression aligns with the page’s goals.

All stages are #OneWeb ready on www.hartmann.info:

  1. StageStandard - 16:9 image
    Mobile ready text: max. 2 lines headline + 3 lines text
  2. StageProduct - 1:1 image
    Mobile ready text: max. 2 lines headline + 3 lines text, or 4 lines headline without text)
  3. StagePlus - 1:1 image
    Mobile ready text: max. 2 lines headline + 4 lines text
  4. StageText - no image
    Mobile ready text: max. 2 lines headline + 3 lines text, or 4 lines headline without text)

Notes:

  • Check your website on mobile device / preview
  • Use only high quality jpgs or png in 4k (3840px x 2160px or 2560px x 2560px)
StageStandard in Desktop, Tablet and Mobile view
1. StageStandard #OneWeb ready
StageProduct in Desktop, Tablet and Mobile view
2. StageProduct #OneWeb ready
StagePlus in Desktop, Tablet and Mobile view
3. StagePlus #OneWeb ready
Typographic StageText without image, with headline and body text. Page navigation, breadcrumb navigation, and anchor navigation are also shown.
4. StageText #OneWeb ready

For the Stage section, you can choose from the 4 following options

Sterillium apothecary liquid soap bottle with pump dispenser in a limited birthday edition design, featuring colorful balloons, a 'NEW' label, and a gold badge marking 60 years of safe hands, set against a large blue cross on a turquoise background

Guidelines for creating Plus stages

To ensure consistent presentation of Plus communication at all levels of the website, Plus Stage assets are always created at a size of 2560 x 2560 pixels and exported as transparent PNGs.

The size and placement of Plus element are fixed, while a designated area allows flexibility for product placement. To support optimal asset production, a Photoshop template is available in the Download Center.

Download Plus stage Photoshop template

Other functions

Example of a paragraph intro with headline and body text
ParagraphIntro
ParagraphIntro is used to display a brief introductory text, setting the context or summarizing the content of the following section.
Display of anchor navigation with four menu items
Anchor Navigation
This is used to create a set of links that allow users to easily navigate to specific sections or points within the same page, enhancing user experience on long or content-rich pages.
Display of breadcrumb navigation across five navigation levels
Breadcrumb Navigation
The Breadcrumb Navigation displays a hierarchical trail of links, allowing users to easily trace their path back to previous pages or sections within a website, improving navigation and user experience.

Paragraph (H2)

Various design options are available for the paragraph, including different text formatting options, optional use of buttons or links, and the integration of different media types with specified image proportions.

Paragraph Simple (H3)

ParagraphSimple is a streamlined text block designed to present concise information in a clean, straightforward manner. It avoids additional styling or layout complexity, making it ideal for plain text content, short explanations, or supporting details that don’t require emphasis.

Paragraph Story

ParagraphStory is designed for narrative-style content, making it ideal for sharing detailed stories, case studies, or testimonials in a compelling and readable format. The layout combines rich text with an image, which can be positioned to the left, right, or below the text—offering flexibility in how the content is visually presented.

Using two ParagraphStory components on a page allows for a more dynamic storytelling experience. Alternating image placement or varying content focus between the two helps maintain visual interest while delivering deeper context or multiple perspectives.
To ensure a consistent and high-quality visual experience, images used in ParagraphStory components should follow one of the recommended aspect ratios: 16:9, 1:1, or 4:3. This helps maintain visual harmony across the layout, especially when multiple stories are used on the same page. Additionally, images should be provided in 4K resolution to guarantee sharpness and clarity across all screen sizes and devices.

Paragraph Table

ParagraphTable is used to display tabular data within a paragraph layout, allowing content authors to present structured information in a clear, grid-like format. It’s ideal for comparing values, listing specifications, or organizing content that benefits from rows and columns—while maintaining a cohesive visual flow within the page.

Product 1Product 2Product 3Product 4
Attribute 1Lorem ipsum dolor siLorem ipsum dolor siLorem ipsum dolor siLorem ipsum dolor si
Attribute 2Lorem ipsum dolor siLorem ipsum dolor siLorem ipsum dolor siLorem ipsum dolor si
Attribute 3Lorem ipsum dolor siLorem ipsum dolor siLorem ipsum dolor si
Lorem ipsum dolor si
Attribute 4Lorem ipsum dolor siLorem ipsum dolor siLorem ipsum dolor siLorem ipsum dolor si

Paragraph Quote

This component displays a block of text as a quote, typically used to highlight a key statement, insight, or testimonial. It features distinctive styling to set the quoted text apart, drawing attention and adding emphasis within the overall content layout.
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."

Paragraph Media

ParagraphMedia is used to display various media types—such as videos, audio files, or documents—alongside text content within a paragraph. This component is ideal for integrating multimedia elements seamlessly into written content, enhancing engagement while maintaining a clean and structured layout.

Paragraph Imagelist

ImageListItem
Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.
Lorem ipsum
Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.
Lorem ipsum
Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Media Container | Full Width | Medium Width

MediaContainer is used to group and display multiple images in a structured and visually consistent layout. It ensures images are presented in an organized, aesthetically pleasing manner—ideal for photo galleries, image collections, or showcasing visual content within a page.

  • Size: Medium With | Full With
  • Headline: 100 Character
  • Text: 500 Character
  • Placeholder: MediaImage

Carousel

Carousels are used to display a rotating set of images, text, or other content in a slideshow format, allowing users to view multiple items in a limited space by navigating through them.

The items that can be used inside a Carousel are:

  • ParagraphSimple
  • ParagraphStory
  • ParagraphMedia
  • Paragraph Quote
  • ParagraphTable
  • TokenText

Paragraph Story

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.
CTA can also be added

Paragraph Simple

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Paragraph Media

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.
CTA can also be added

Media Grid

The MediaGrid component in Sitecore displays media items like images or videos in a grid layout. It offers responsive design, customizable settings, and interactive features, pulling content directly from Sitecore's media library for easy management.

Card Container

These are used to display a collection of cards, which can contain various types of Cards. A Card Container can hold up to three cards as non Slider. More than three cards will be displayed as slider.
Download

Card Download

used to display a card that allows users to download a file, such as a document or resource, with an image, title, and a download link for easy access.

Card with no Image

used to display content in a card format without an image, focusing on text, titles, and links to highlight key information or actions.

CardQuote

used to display a quote in a card format.

Card Quote with no Teasing

used to display a quote without any introductory teasing text, focusing solely on the quote itself and its attribution for a direct and impactful presentation.

CardKeyContact

used to display key contact information in a card format, typically featuring text, photo and contact details, for easy access to important contacts within an organization.

Card Grid

These are used to display a collection of cards, which can contain various types of cards. A Card Grid can hold several cards, and a "Load More" button will appear when the card limit set is reached.

Card Story

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Card Story

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Card Story

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Card Story

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Card Story

Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem.

Teaser List - Horizontal

Teaser List - Vertical

#OneWeb ready
Mega Teaser

MegaTeasers are used to display a larger, more visually engaging preview of content, often featuring images, headlines, and summaries, to attract attention and encourage users to explore further.

Step-by-Step

This component is used to present content in a sequential, easy-to-follow format, often for tutorials, guides, or processes, where each step is displayed in order for users to follow.
Lorem ipsum
Lorem ipsum.
Lorem ipsum

StagedNumbers

StageNumbers can be used to display one or multiple dynamic, animated number sequences or milestones in parallel. They’re perfect for showcasing progress or key statistics in an engaging way—whether you want to highlight a single, focused indicator (Single) or present several KPIs or progress metrics at once (Multiple). Depending on the use case, you can choose to show just one or multiple progress indicators.
60 Years
4 Billion

Accordion

Accordion is a collapsible user interface element that structures content into expandable and collapsible panels. It’s especially useful for presenting large amounts of information in a compact, organized way—allowing users to focus on specific sections without being overwhelmed.
Accordion Panel is a single, independently collapsible section within an Accordion component. Each panel holds a specific piece of content, allowing users to expand or collapse it as needed. This modular structure makes it easy to navigate through information efficiently, giving users control over what they want to view at any given moment.

You can create the following Components within an AccordionPanel:

  • ParagraphSimple
  • ParagraphStory
  • ParagraphMedia
  • ParagraphQuote
  • ParagraphTable
  • TokenText

Accordion with an Paragraph Story

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Adress List

AddressList is a structured component designed to display multiple addresses in a clear and organized format. It is typically used to showcase contact locations, offices, or service points, making it easy for users to find and reference location-specific information. Each entry can include details such as address, email, phone number, and website link, offering a comprehensive overview of contact data in a user-friendly layout.

Structurally, AddressList is similar to an Accordion—each address can be displayed within an expandable panel, allowing users to reveal or hide individual entries as needed, keeping the overall layout clean and navigable.
Region Berlin
Franziska P.

Street No.

Postal code; City

COUNTRY

0123456789
franziska.p@email.com
https://design.hartmann.info/en/
Region Bavaria
Hannah D.

Street No.

Post code; City

Country

0123456789
Frank F.

Street No.

Post code; City

COUNTRY

vCard
vCards are used to display and download contact information in the vCard format (.vcf), allowing users to easily save contact details to their address book or email client.
Support
Card Contact
used to display a person's contact information in a card format, typically featuring a person's name, title, photo, and contact details, for easy access to important contacts within an organization.

0123456789
0123456789
linkedin
Developer
Max Mustermann
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

0123456789
0123456789
linkedin
Content Editor
Esra Editor
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

0123456789
0123456789
linkedin