The headline elements consist of six different levels. <h1> is the headline with the highest weighting and <h6> with the smallest. A headline element describes the topic of the area that follows the headline. 

You should avoid skipping headline levels. It should always start from <h1>, then <h2> and so on. Also, try to use only one headline of the first level (<h1>) in a document.
 

Semantic (<h1>) and style (appearance, size) are separated in the headline element. Style "Heading 1" and "Heading 2" have one sub-headline each.

By using the different font styles, content can be clearly structured and pages can be effectively and variedly staged.
 

The text element is available in three different sizes (default and medium), can be center, left or right aligned and set to bold. In addition, the text can be selected as a list element. Two different list styles are available for this (Disc and Check).

• Internal links: Enter the name of the page
• Links to files: Enter the name of the file
• External links: enter complete URL (e.g. https://www.muster.de/)

Default Text: 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 internal link sanctus est Lorem ipsum dolor sit amet. 

Medium Text: 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 internal link sanctus est Lorem ipsum dolor sit amet. 

• List text element
• List text element
• List text element
   

• List text element
• List text element
• List text element

With the help of buttons, various possible actions of the user are displayed and clearly hierarchized.

• Primary Button: The flat Primary Button is used for the most important action on a page or view.
• Secondary Button: The Secondary button is used for subordinate actions.
• Text-Link Button: The Text Button is used as a subtle call to action.

Buttons can be grouped (Button Area) to offer several actions next to each other. The number of buttons should be easy for the user to grasp. To guide the user, a single important action can be highlighted as a primary button.  

• Internal links: Enter name of the page
• Links to files: Enter the name of the file
• External links: enter complete URL (e.g. https://www.muster.de/)

The Quote element emphasizes short sentences / statements and should be used flat or mostly stand-alone.

The image element always adapts to the width of the Column or the Section Content Width. An alternative text should always be assigned. Alternative texts for images are important for accessibility and SEO.

In general, only images with a file size of < 1 MB should be uploaded to the Media Bank to ensure good performance of the page when called up. Excluded from this are images that are deposited, for example, as a download for the press.

Options:

• Max-Width
• Picture signature
• Linking on the image
• Crop

The Image Area groups images. It is suitable for displaying icons next to each other, for example.

TextWithImage elements are considered large-scale teasers that tease a topic and link to a topic page.

Options:

• Style: Image left or right
• Image positioning (horizontal and vertical)
• Text area can be edited as you like (headline, text, button)
• Image is mobile always positioned on top

Cards contain content and features related to a single topic and can serve as teasers for other content. They show optional text, an image, and links - alone or in combination.

Options:

• Style: Vertical, Cover, Vertical Small
• With or without linking (button is only displayed when linking)

Icon Cards are suitable for displaying features or benefits, for example.

Options:

• Style: Vertical
• Background Color: Light Blue, Dark Blue or White
• Icon Style:  None
• Icon
• With or without linking (button is only displayed when linking)

The Accordion element gives the user an overview of the page's content, allowing them to decide which sections they want to read. Accordions can make information processing and discovery more effective.

When to use:

• To organize related information
• To shorten pages and reduce scrolling when the content does not necessarily need to be read in full
• When space is limited and long content cannot be displayed at once, for example, on a mobile interface or in a page area

Use tabs to allow users to easily navigate between different views within the same context.

Options:

• Tab with or without Icon
• Can be filled with any content

Sliders are used to make multiple content of the same format available at one position. A slider displays any number of items / slides. The user can control the slider with swipe gestures, arrows or mini-pagination. 

Options:

• Layout Presets: Default
• Navigation: Arrows (next / prev) visible or hidden
• Pagination: Number of slides visible or hidden as points
• Autoplay: Automatically switches to the next slide on or off
• Autoplay delay: Duration until the next slide is changed; Default 3000 ms = 3 seconds
• Slides per view: How many items are visible in a slide; Enter number from 1 - 4

Playing videos via Vimeo or YouTube. The video is always scaled to the width of the column or section. 

Vimeo Video

YouTube Video

Forms are a particularly important interface between users and your company / product. They often stand at critical points in a user journey. Therefore, forms should be designed to be easy to understand and the amount of information requested should be as small as possible. To build forms, the existing components are combined and grouped as needed.

Options:

• Inputs can be provided with icons
• The division of inputs into columns is controlled by the Section form (100%, 50%-50%, 33%-33%-33%, 25%-25%-25%).
• Email Finisher: Email Subject, Recipient Name & Email, Sender Name & Email, CC & BCC, Attachments
• Redirect Finisher: Forwarding to e.g. thank you page after submitting the form

Helps organize content into evenly spaced vertical columns.

Options:

• Column Layout (z.b 50%- 50%, 30%-70% )
• Column Gap (small, medium, large)

The Section element represents a general division of the page, e.g. a thematic grouping of the content typically with a heading.

Options:

• Content Width: Full, Default, Small
• Spacing (top & bottom): None, Small, Medium, Large
• Title / ID: für Anchor-Navigation

Content elements that have been implemented specifically for ONE.