Accordion

Variations/configurability

Size

SCSS (recommended)

Extend one of the size SCSS placeholders in case that you don't want the default (regular): %size-Small or %size-Large

HTML attribute

You could set the different button sizes via the data-size attribute, the default is "regular" and in that case is optional.

Emphasis

The regular sized accordion could even also get enhanced to a higher emphasis.

SCSS (recommended)

Extend the related placeholder: %emphasis-High

HTML attribute

You could set the high emphasis via the data-emphasis attribute.

JavaScript polyfill necessary for Microsoft Internet Explorer and Edge (older versions than 79)

In case you would need to support Microsoft Internet Explorer and/or Edge within your project setup, you'll need to polyfill (with e.g. details-element-polyfill, that is still included in our pages for demo purposes) the details and summary HTML tags due to their missing browser setup in those environments.

Accordion

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion High Emphasis

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion Sizes

Small

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Regular (default, data-size attribute is optional)

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Breadcrumb

Cards Banner

  • Angebote 01

    Lorem ipsum dolores sint.

  • Angebote 02

    Lorem ipsum dolores sint.

  • Angebote 03

    Lorem ipsum dolores sint.

  • Angebote 04

    Lorem ipsum dolores sint.

Dialog

Modal

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. 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.

Dialog Button Alignment End

Modal

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. 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.

Dropdown

This component is mainly meant to get used within the header section. If you're looking for a similar one within the content section, please refer to the overflow menu component.

Variation to display the overflow menu on the opposite side

This component expected to be placed at the end of the header regularly and thatfor opens the overlay to its opposite side (to the right on left-to-right reading direction). If you'd like to change this behaviour e.g. to implement some kind of a collision mechanism (most likely with JavaScript) and flip the overlays orientation to the opposite side, you could use the following attribute to configure this orientation change, compare to the examples below as well:

data-horizontal-position="opposite"

JavaScript polyfill necessary for Microsoft Internet Explorer and Edge (older versions than 79)

In case you would need to support Microsoft Internet Explorer and/or Edge within your project setup, you'll need to polyfill (with e.g. details-element-polyfill, that is still included in our pages for demo purposes) the details and summary HTML tags due to their missing browser setup in those environments.

Dropdown

Toggle user menus visibility

    • Dropdown (within the header area) / opposite position

    Toggle user menus visibility

    • Form

    General information

    Forms in general are being built out of elements like form, input, textarea, button and fieldset.

    For more information reach out to https://developer.mozilla.org/en-US/docs/Learn/Forms

    Best practices

    Best practice, research insights and examples: https://gerireid.com/forms.html

    Form validation

    It's best to use the built-in and standard form validation, as these are standards based API implementations, that are as well providing compatible and consistent states both for CSS and JS:

    • Interoperability
    • semantic (machine readable/understandable) state, even also keep a11y in mind
    • Single source of truth regarding the form (elements) state within the browser itself
    • Built-in localized validation messages

    Additionally this way you're following the principles of Progressive Enhancement - and in other words, any JavaScript only solution doesn't provide a graceful degradation and puts that whole functionality to the weakest layer in the stack even only.

    Nevertheless additionally to the browser built-in pseudo-selector :user-invalid we're providing styling for the aria-invalid="true" attribute on the elements input, radio, select and textarea. We can't toggle any given/static attribute in the DB UI Core product itself, as we don't want to use JavaScript in this basic product. As you'd also need to add individual error messages, please find some inspiration on the necessary HTML code implementation e.g. on http://mars.dequecloud.com/demo/form-alert3.htm

    Please find some more informations on the following pages:

    Accessibility

    Forms can be tricky, so read through the W3C forms WAI tutorials for some guidance around how to implement accessibility successfully.

    Example Form

    Please choose a flavour

    Language Switcher

    You could either use the language switcher component with hyperlinks, which would be the recommended way, to link to another language based page, which is addressable by a different URL.

    The other way (especially for Single Page Applications) would be to use <button type="button"> elements, that have some JavaScript events attached to them to handle the switch directly. Please keep in mind to announce a change of contents e.g. to screenreaders in this case.

    In both cases there's a slightly different HTML approach that you could inspect within the different examples below.

    Please keep in mind that the styling is optimized to look good included within the header section of the page and doesn't "shine" included in here.

    Language switcher

    Language switcher with buttons

    Notifications

    Best practices

    Best practice, research insights and examples: https://gerireid.com/forms.html#notifications

    Accessibility

    Notifications are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your notifications in an aria-live region. Changes to live regions (such as injecting/updating a notification component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user.

    Additionally, if you'd like to update existing notifications incrementally, include aria-atomic="true" to ensure that the entire notification is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the notification’s content, or if displaying the same notification content at a later point in time). It's still recommended to remove and add cmp-notification components as a whole within the section.

    Note that the live region needs to be present in the markup before the notification is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.

    You also need to adapt the role and aria-live level depending on the content. If it’s an important message like an error, use role="alert" and aria-live="assertive", otherwise use role="status"and aria-live="polite" attributes.

    Adapted from https://getbootstrap.com/docs/4.3/components/toasts/

    And we're not using aria-relevant="additions", as the default behaviour is even already what we expect with the default (additions text), compare to e.g. https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3 and https://github.com/w3c/aria/issues/712#issuecomment-529848465

    Live regions

    Live regions are perceivable regions of a web page that are typically updated as a result of an external event when user focus may be elsewhere. These regions are not always updated as a result of a user interaction. This practice has become commonplace with the growing use of Ajax. Examples of live regions include a chat log, stock ticker, or a sport scoring section that updates periodically to reflect game statistics. Since these asynchronous areas are expected to update outside the user's area of focus, assistive technologies such as screen readers have either been unaware of their existence or unable to process them for the user. WAI-ARIA has provided a collection of properties that allow the author to identify these live regions and process them: aria-live, aria-relevant, aria-atomic, and aria-busy.

    Source: https://www.w3.org/TR/wai-aria/#terms

    Conveying meaning to assistive technologies

    Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional visibly hidden text.

    Source: https://getbootstrap.com/docs/4.3/components/alerts/

    Notifications

    Notifications Variants

    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    informative: Lorem ipsum dolor sit amet, consectetur adipisicing elit
    success: Lorem ipsum dolor sit amet, consectetur adipisicing elit

    Notifications Hovering

    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    informative: Lorem ipsum dolor sit amet, consectetur adipisicing elit
    success: Lorem ipsum dolor sit amet, consectetur adipisicing elit

    Notifications - Leading Icon

    Notifications - Trailing Icon

    Overflow Menu

    Variation to display the overflow menu on the opposite side

    If you're either using this component at the very end of a main content part that will most likely always get displayed at the opposite viewport border or you'd like to implement some kind of a collision mechanism (most likely with JavaScript) and flip the overlays orientation to the opposite side (from regularly left to right positioned on left-to-right reading direction), you could use the following attribute to configure this orientation change, compare to the examples below as well:

    data-horizontal-position="opposite"

    JavaScript polyfill necessary for Microsoft Internet Explorer and Edge (older versions than 79)

    In case you would need to support Microsoft Internet Explorer and/or Edge within your project setup, you'll need to polyfill (with e.g. details-element-polyfill, that is still included in our pages for demo purposes) the details and summary HTML tags due to their missing browser setup in those environments.

    Overflow menu

    Toggle Overflow menu

    • Overflow menu - Navigation

    Overflow menu / opposite position

    Toggle Overflow menu

    • Overflow menu - Navigation / opposite position

    Pagination

    Sidenavi

    Icons

    The sidenavi pattern includes some general icons defined for some general rel values. Please feel free to define further by yourself depending on your needs, either within your SCSS code (recommended) or via attributes.

    Sidenavi

    Tab Bar

    Multi-line

    The multi-line tabs haven't been developed, but are only available in the Sketch library. If you really need this pattern even also in the development, please set it up yourself e.g. with a <br> or differentiated label texts e.g. by <span> elements.

    Accessibility

    This pattern has been tested and approved regarding accessibility.

    Tab Bar

    Content 01
    Content 02
    Content 03
    Content 04
    Content 05

    Tab Bar Item Icon

    Content 01
    Content 02
    Content 03
    Content 04
    Content 05

    Tab Bar Small

    Content 01
    Content 02
    Content 03
    Content 04
    Content 05

    Tab Bar Small Item Icon

    Content 01
    Content 02
    Content 03
    Content 04
    Content 05

    Table

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Table - alignment

    center / middle:
    Table title
    The table header 01 The table header 02
    Value 01 - 01
    two lines    		 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 - longer content Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02 - longer content
    right / bottom:
    Table title
    The table header 01 The table header 02
    Value 01 - 01
    two lines    		 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 - longer content Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02 - longer content

    Table - border around cells

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Table - border horizontal

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Table - density

    small:
    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    regular:
    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    large:
    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Table - font size

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Table - icons

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Table Overflow Menu

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    • Value 02 - 01 Value 02 - 02
    • Value 03 - 01 Value 03 - 02
    • Value 04 - 01 Value 04 - 02
    • Value 05 - 01 Value 05 - 02

    • Table Row Title

    Table title
    Column header The table header 01 The table header 02
    table header Value 01 - 01 Value 01 - 02
    table header Value 02 - 01 Value 02 - 02
    table header Value 03 - 01 Value 03 - 02
    table header Value 04 - 01 Value 04 - 02
    table header Value 05 - 01 Value 05 - 02

    Table - row zebra styling

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Table - sticky header

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02

    Sample page with sticky header and sticky table header (open directly for demonstration purpose)

    UI Core
    Login

    Dies ist eine Headline

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Table title
    The table header 01 The table header 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02
    Value 01 - 01 Value 01 - 02
    Value 02 - 01 Value 02 - 02
    Value 03 - 01 Value 03 - 02
    Value 04 - 01 Value 04 - 02
    Value 05 - 01 Value 05 - 02