We're using the colors provided by our other product DB UI Base, by which Design tokens are being provided.
Please have a look at the related page within the Marketingportal for more information as well: https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Farbe
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
A file containing the Deutsche Bahn color palette for Adobe InDesign, Adobe Illustrator or Adobe Photoshop is provided by the DB Marketingportal.
The included iconset has been developed in cooperation with the Center of Excellence @ Personenverkehr and replaces the previous enterprise only icons. More information: https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Icons/Funktionale-Icons-Architektur-und-Fahrzeuge
You could use the icons either within your SCSS code as described below, which is the recommended approach. Alternatively you could also use the attribute based configuration.
And we're additionally providing the icons as the sources (SVG) files as well.
All of the available glyphs variables are shown on this page right next to the icon, with the SCSS and attribute based variables/values shown next to them.
Use the following SCSS mixin for setting an icon:
// schema
@mixin icon(
$glyph: "",
$size: $icon-size,
$style: $icon-style,
$position: "before"
);
// example
span.with-an-icon {
@include icon(glyph(account), 20, "outline");
}
As both $icon-size and $icon-style are available to get configured with default values, and $position is only a variant (explained in the next paragraph) only the first one is really mandatory.
If you'd like to include the icon after the text, set the last parameter to after.
In case of the need to display only the icon and hide the text next to it, use the following mixin:
@include is-icon-text-replace();
Use the data-icon and data-icon-variant HTML attributes for setting an icon:
<a href="#" data-icon="alarm" data-icon-variant="24-outline">Alarm</a>
The data-icon-variant is an optional attribute, that you don't need to declare in case that you'd like to use the default icon size and style, that are defined by the $icon-size and $icon-style SCSS variables (size: 24 and style: outline as defaults), that could obviously get overwritten by individual SCSS declarations; so you'll end up with a very simply definition when relying on the defaults:
<a href="#" data-icon="alarm">Alarm</a>
Of course this icons definition does as well have an equivalent for icons after the content: data-icon-variant-after
If you'd like to include the icon after the content/text, use the HTML attribute data-icon-after instead of data-icon, example:
<a
href="#"
data-icon-after="alarm"
data-icon-variant-after="24-outline"
class="elm-link"
>Alarm</a
>
In case of the need to display only the icon and hide the text next to it, use the following class:
.is-icon-text-replace
font-sizeIf you'd like to control the icons font-size any further (defining sizes in between all of the data-icon-variant declarations, like e.g. having an icon font-size of 23px instead of 24px when defining data-icon-variant="24-outline"), you could set set one of the CSS variables --icon-font-size-before or --icon-font-size-after (in this case --icon-font-size-before: 23px).
<a
href="#"
data-icon="alarm"
data-icon-variant="24-outline"
style="--icon-font-size-before: 23px"
>Alarm</a
>
As mentioned above we're even also providing all of the icon sources (svg files) within this package in the folder node_modules/@db-ui/core/dist/icons/.
And we're enabling to change the colors for the illustrative icons ("pulse" and icon itself) as well as the functional icons (only the single-color icon), through the two following CSS variables / CSS custom properties, with their included default (second value):
var(--db-icon-color, currentColor)
var(--db-icon-pulse-color, #EC0016)
Regarding accessibility icons are providing cognitive complementary visual support for sighted people (e.g. people with reading difficulties), as well as quick recognition of specific functionality and UX patterns like e.g. the bin/waste paper basket symbol for a delete action.
On the other hand icons shouldn't get recognized and output by assistive technologies like screenreaders, as those glyphs or signs being used in case of an icon webfont don't necessarly provide a meaning - and on the other hand each icon being used on the page should always as well get included in conjunction with some textual description both as a fallback as well as providing some meaning even and especially if the icon itself doesn't provide a unique meaning on it's own (to all users idependently from their skill level/experience, culture, etc.).
Additionally this pattern has been tested and approved regarding accessibility.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
We're delivering general font declarations and the web fonts for our generally used DB Screen Sans font.
In case that you need to use font sizes smaller than 16pt please switch to our font-family DB Screen Sans Digital Regular for better readability / accessibility.
Please find this rule and a lot of further information regarding and more information on typography: https://marketingportal.extranet.deutschebahn.com/marketingportal/Marke-und-Design/Basiselemente/Typografie/Fuer-digitale-Anwendungen
Primary font: "DB Screen Sans", "Helvetica", "Arial", sans-serif;
Primary font italic: "DB Screen Sans", "Helvetica", "Arial", sans-serif;
Primary font bold: "DB Screen Sans", "Helvetica", "Arial", sans-serif;
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
Body: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor