Skip to content

Commit e295b66

Browse files
mfranzkemfranzke
authored
feat(logo): integrate sizes and related pulse as an option for headlines (#171)
* refactor: added headline pulse * feat: added logo component * refactor(logo): further optimizations * chore: added another aspect
1 parent f9b5199 commit e295b66

22 files changed

+239
-8
lines changed

‎source/_patterns/01-elements/headline/_headline.hbs

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎source/_patterns/01-elements/headline/_headline.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Headline
3+
---
4+
5+
## Pulse
6+
7+
You could add the DB Pulse to the headline element by adding the `data-pulse` attribute – we're taking care of sizing it accordingly to the DB logo if this one is also present on the same page, as defined by the rules on the Marketingportal regarding the [logo](https://marketingportal.extranet.deutschebahn.com/de/brandguide/logo-3) and the [pulse](https://marketingportal.extranet.deutschebahn.com/en/pulse).

‎source/_patterns/01-elements/headline/headline-pulse.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{> elements-logo }}
2+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
3+
{{> elements-headline }}

‎source/_patterns/01-elements/headline/headline-pulse.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"type": "2",
3+
"text": "Lorem ipsum dolores sint",
4+
"pulse": true
5+
}

‎source/_patterns/01-elements/headline/headline.hbs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
2+
<h{{ type }} class="elm-headline {{ styleModifier }}"{{#if id}} id="{{id}}"{{/if }}{{#if pulse}} data-pulse{{/if }}>{{ text }}</h{{ type }}>

‎source/_patterns/01-elements/headline/_headline.json renamed to ‎source/_patterns/01-elements/headline/headline.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"type": "1",
2+
"type": "2",
33
"text": "Lorem ipsum dolores sint"
44
}

‎source/_patterns/01-elements/headline/headline.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎source/_patterns/01-elements/headline/headline.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,23 @@
66

77
// * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
88
margin-top: to-rem($pxValue: 24);
9+
10+
&[data-pulse] {
11+
&::after {
12+
background: var(--db-pulse-background, #ec0016);
13+
border-radius: calc(
14+
var(--db-logo-height, #{$db-logo-default-height}) / 7 * 0.5
15+
);
16+
content: "";
17+
display: block;
18+
margin-bottom: var(--db-pulse-margin-bottom, 14px);
19+
margin-top: calc(
20+
var(--db-logo-height, #{$db-logo-default-height}) * 0.5
21+
);
22+
width: var(--db-logo-width, #{$db-logo-default-width});
23+
height: calc(var(--db-logo-height, #{$db-logo-default-height}) / 7);
24+
}
25+
}
926
}
1027

1128
h1,

‎source/_patterns/01-elements/logo/_logo.demonstration.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.DO-NOT-COPY-THIS-CLASS-example-logo-list {
2+
list-style: none;
3+
4+
padding-left: 0;
5+
6+
color: $db-color-cool-gray-700;
7+
8+
li {
9+
display: inline-block;
10+
box-sizing: border-box;
11+
12+
margin: 4px;
13+
padding: 80px;
14+
border-radius: 4px;
15+
16+
color: $db-color-cool-gray-700;
17+
18+
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-cool-gray {
19+
background-color: $db-color-cool-gray-100;
20+
}
21+
22+
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
23+
--db-logo-color: #{$db-color-white};
24+
background-color: $db-color-red-500;
25+
}
26+
27+
&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-image {
28+
--db-logo-backgroundColor: #{$db-color-white};
29+
background-image: url("https://marketingportal.extranet.deutschebahn.com/sites/default/files/2021-05-19/Gruppe%20maskieren%2024.png");
30+
background-repeat: no-repeat;
31+
background-size: cover;
32+
33+
display: block;
34+
35+
padding: 20px;
36+
37+
width: 555px;
38+
height: 400px;
39+
}
40+
}
41+
}

‎source/_patterns/01-elements/logo/_logo.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: Deutsche Bahn Logo
3+
---
4+
5+
Please find a lot of more information regarding our logo and how to use it within the [Marketingportal](https://marketingportal.extranet.deutschebahn.com/de/logo-3).
6+
7+
## Adapt logos colors (background and fill)
8+
9+
You could easily change the line-colors of the logo as well as the background color by defining different color values for both CSS variables:
10+
11+
- `--db-logo-color`
12+
- `--db-logo-backgroundColor`
13+
14+
The fallback for an undefined `--db-logo-color` is our DB Red (`#f01414`), and `--db-logo-backgroundColor` would fall back to `transparent`, which is the general background defined by brand.
15+
16+
## Size
17+
18+
### SCSS (recommended)
19+
20+
Extend one of the size SCSS placeholders in case that you don't want the default (xlarge, 58px width, 40px height): `%logo-size-xsmall`, `%logo-size-small`, `%logo-size-medium`, `%logo-size-large` or `%logo-size-xlarge`
21+
22+
### HTML attribute
23+
24+
You could set the different button sizes via the `data-size` attribute, the default is `xlarge` and in that case is optional.

0 commit comments

Comments
 (0)