No notes defined.
<!-- Default -->
<h1 class="heading">Ich bin der Titel</h1>
<!-- Using Level (Deprecated) -->
<h1 class=" h1 ">Ich bin der Titel</h1>
<!-- Doc Only -->
<section class="doc-section">
<div class="doc-section doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Page Header Title</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div>
<h1 class="heading is-page-title">Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h1>
</div>
</div>
<div class="doc-section doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Page Section Title</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div>
<h2 class="heading is-section-title">Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h2>
</div>
</div>
<div class="doc-section doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Major Heading</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div>
<h3 class="heading">1. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h3>
</div>
</div>
<div class="doc-section doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Subheading</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div>
<h4 class="heading is-subheading">1.1 Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h4>
</div>
</div>
<div class="doc-section doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Minor Heading</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div>
<h5 class="heading is-minor">1.1.1 Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h5>
</div>
</div>
<div class="doc-section doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Small Heading</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-notes">Für Überschriften in kleingedruckten Texten</div>
</header>
<div>
<h6 class="heading is-small">Zwölf kleine Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h6>
</div>
</div>
</section>
<section class="doc-section">
<h2 class="doc-section-title">Darstellung im Textfluss</h2>
<h1 class="heading is-page-title">Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h1>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
<h2 class="heading is-section-title">Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h2>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
<h3 class="heading">1. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h3>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
<h4 class="heading is-subheading">1.1 Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h4>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
<h5 class="heading is-minor">1.1.1 Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h5>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
<h6 class="heading is-small">Zwölf kleine Boxkämpfer jagen Viktor quer über den großen Sylter Deich</h6>
<div class="copy is-small">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</section>
<!-- Default -->
<h{{level}} class="heading{{#modifier}} {{.}}{{/modifier}}">{{{content}}}</h{{level}}>
<!-- Using Level (Deprecated) -->
<h{{level}} class=" h{{level}} {{#modifier}} {{.}}{{/modifier}}">{{{content}}}</h{{level}}>
<!-- Doc Only -->
<section class="doc-section">
{{#variants}}
<div class="doc-section doc-variant">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul class="doc-variant-modifiers">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
{{#annotations}}
<div class="doc-notes">{{{.}}}</div>
{{/annotations}}
</header>
<div>
{{#variant}}
{{render '@heading' (contextData '@heading' this) merge=true}}
{{/variant}}
</div>
</div>
{{/variants}}
</section>
<section class="doc-section">
<h2 class="doc-section-title">Darstellung im Textfluss</h2>
{{#variants}}
{{#variant}}
{{render '@heading' (contextData '@heading' this) merge=true}}
{{/variant}}
{{#if is-small}}<div class="copy is-small">{{/if}}
{{render '@snippet--p'}}
{{render '@snippet--p-alt'}}
{{#if is-small}}</div>{{/if}}
{{/variants}}
</section>
/* Default */
{
"level": 1,
"content": "Ich bin der Titel"
}
/* Using Level (Deprecated) */
{
"level": 1,
"content": "Ich bin der Titel"
}
/* Doc Only */
{
"level": 1,
"content": "Ich bin der Titel",
"variants": [
{
"title": "Page Header Title",
"variant": {
"level": 1,
"modifier": "is-page-title",
"content": "Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich"
}
},
{
"title": "Page Section Title",
"variant": {
"level": 2,
"modifier": "is-section-title",
"content": "Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich"
}
},
{
"title": "Major Heading",
"variant": {
"level": 3,
"content": "1. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich"
}
},
{
"title": "Subheading",
"variant": {
"level": 4,
"modifier": "is-subheading",
"content": "1.1 Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich"
}
},
{
"title": "Minor Heading",
"annotations": null,
"variant": {
"level": 5,
"modifier": "is-minor",
"content": "1.1.1 Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich"
}
},
{
"title": "Small Heading",
"annotations": "Für Überschriften in kleingedruckten Texten",
"is-small": true,
"variant": {
"level": 6,
"modifier": "is-small",
"content": "Zwölf kleine Boxkämpfer jagen Viktor quer über den großen Sylter Deich"
}
}
]
}
@function heading-add-levels(
$variants: (),
){
//*
//* Interprets level property as heading level and copies style definitions
//*
@each $name, $styles in $variants {
@if type-of($styles) == map {
$level: map.get($styles, level);
@if $level {
$variants: map.deep-remove($variants, $name, level);
$styles: map.remove($styles, level);
@if type-of($level) == number and $level <= 6 {
$levelStyles: (
$level: $styles,
);
$variants: map.deep-merge($variants, $levelStyles);
}
}
}
}
@return $variants;
}
@function get-static-heading-font-size(
$level: 3,
$device: default,
){
// FIXME: Fails, if font size is keyword (e.g. "largest")
$font-size: 1rem;
@if map-has-key($headings-styles, $device) {
$styles: map-get($headings-styles, $device);
$styles: get-style($styles, $level);
@if type-of($styles) != "map" {
@return null;
}
@if map-has-key($styles, text-size) {
$variant: map-get($styles, text-size);
$font-size: get-static-font-size($variant);
} @else if map-has-key($styles, font-size) {
$font-size: map-get($styles, font-size);
}
}
@return $font-size;
}
@mixin heading-font-size(
$level: 3,
$device: default,
){
// FIXME: Should use mixin responsive-variable
$font-size: get-static-heading-font-size(
$level: $level,
$device: $device
);
font-size: $font-size;
$variable-name: get-variable-name($variant: $level, $prefix: "--fs-hl");
font-size: var(#{$variable-name}, #{$font-size});
}
@function get-static-heading-line-height(
$level: 3,
$device: default,
){
$line-height: $_line-height;
@if map-has-key($headings-styles, $device) {
$styles: map-get($headings-styles, $device);
$styles: get-style($styles, $level);
@if map-has-key($styles, line-height) {
$line-height: map-get($styles, line-height);
}
}
@return $line-height;
}
@mixin heading-line-height(
$level: 3,
$device: default,
){
$line-height: get-static-heading-line-height(
$level: $level,
$device: $device
);
line-height: $line-height;
$variable-name: get-variable-name($variant: $level, $prefix: "--lh-hl");
line-height: var(#{$variable-name}, #{$line-height});
}
@function get-heading-styles(
$level: 3,
$device: default,
){
@if map-has-key($headings-styles, $device) == false {
@debug "Error in @function get-heading-styles: Type was not found!";
@return (null: null);
}
$styles: map-get($headings-styles, $device);
@if map-has-key($styles, $level) == false {
@debug "Warning of @function get-heading-styles: Size #{$level} was not found!";
@return (null: null);
}
@return map-get($styles, $level);
}
@mixin heading-style(
$level: 3,
$device: default,
$properties...
){
$styles: get-heading-styles($level, $device);
// Remove font-sizes and line-heights from declarations
// and replace them with responsive variables
$filtered-styles: ();
@each $property, $value in $styles {
@if $property != font-size and $property != line-height and $property != text-size {
$filtered-styles: map-merge($filtered-styles, ($property: $value));
}
}
@if $device == default {
@include heading-font-size($level);
@include heading-line-height($level);
}
@include styles($filtered-styles, $properties...);
}
@mixin heading-responsive-styles(
$level: 3,
$device: default,
){
@if $device == default {
@include heading-style($level);
$styles: get-heading-styles($level);
$properties: map-keys($styles);
@if (index($properties, 'font-family') == null) {
font-family: $headings_font-family;
}
@if (index($properties, 'font-weight') == null) {
font-weight: $headings_font-weight;
}
}
@if $device == mobile {
@include not-on-desktop(){
@include heading-style($level, $device: $device);
}
}
@if $device == tablet {
@include only-on-tablet(){
@include heading-style($level, $device: $device);
}
}
@if $device == small-desktop {
@include only-on-small-desktop(){
@include heading-style($level, $device: $device);
}
}
}
@mixin styled-headings(
$levels: (1, 2, 3, 4, 5, 6),
$device: default,
){
$styles: map-get($headings-styles, $device);
@each $level, $declarations in $styles {
@if type-of($level) == number {
h#{$level} {
@extend %h#{$level};
}
}
}
}
$heading-variants: (
page-title: (
level: 1,
text-size: 4x-large,
font-family: 'Noto Serif',
font-weight: 400,
),
section-title: (
level: 2,
text-size: 3x-large,
font-family: 'Noto Sans',
font-weight: 700,
),
default: (
level: 3,
text-size: 2x-large,
line-height: 1.375,
font-family: 'Noto Sans',
font-weight: 700,
),
subheading: (
level: 4,
text-size: large,
line-height: 1.525,
font-family: 'Noto Sans',
font-weight: 700,
),
minor: (
level: 5,
font-size: calc(1rem + 1px),
line-height: calc(#{$_line-height} + 1px),
font-family: 'Noto Sans',
font-weight: 700,
),
small: (
level: 6,
text-size: small,
font-family: 'Noto Sans',
font-weight: 600,
),
) !default;
// Add fallback font families to tokens
@function add-fallback-fonts-to-headings(
$variants: $heading-variants,
) {
@each $key, $styles in $variants {
$fallback: $_font-family_fallback;
@if map.get($styles, font-family) == "Noto Serif" {
$fallback: $_font-family_fallback--secondary;
}
$styles: add-fallback-fonts($styles, $fallback);
$variants: map.set($variants, $key, $styles);
}
@return $variants;
}
@if meta.global-variable-exists(heading-variants) {
$heading-variants: add-fallback-fonts-to-headings($heading-variants);
}
@import "_heading.helpers";
@import "_heading.settings";
@import "_heading.styles";
$headings_font-family: inherit !default;
$headings_font-weight: 700 !default;
$headings-styles: (
default: (
page-title: (
level: 1,
font-size: 3.375rem,
line-height: 1.2,
margin-top: ($_stack-spacing--section, var(--sp-section)),
),
section-title: (
level: 2,
font-size: 2.25rem,
line-height: 1.3,
margin-top: ($_stack-spacing--section, var(--sp-section)),
),
default: (
level: 3,
font-size: largest,
line-height: largest,
margin-top: ($_stack-spacing--component, var(--sp-component)),
),
subheading: (
level: 4,
font-size: 1.05rem,
line-height: $_line-height,
margin-top: ($_stack-spacing, var(--sp)),
),
minor: (
level: 5,
font-size: small,
line-height: small,
margin-top: ($_stack-spacing, var(--sp)),
),
small: (
level: 6,
font-size: smallest,
line-height: smallest,
color: $_minor-color,
margin-top: ($_stack-spacing, var(--sp)),
),
),
mobile: (
page-title: (
level: 1,
font-size: 3rem,
line-height: 1.2,
),
section-title: (
level: 2,
font-size: 2rem,
line-height: 1.3,
),
),
) !default;
$heading-variants: () !default;
$heading-variants--mobile: () !default;
@each $device, $styles in $headings-styles {
$styles: heading-add-levels($styles);
$headings-styles: map.set($headings-styles, $device, $styles);
}
@if global-variable-exists(heading-variants) {
$headings-styles: map.deep-merge($headings-styles, (
default: heading-add-levels($heading-variants),
));
@if not global-variable-exists(heading-variants--mobile) or meta.type-of(heading-variants--mobile) != "map" {
$heading-variants--mobile: $heading-variants;
}
}
@if global-variable-exists(heading-variants--mobile) {
$headings-styles: map.deep-merge($headings-styles, (
mobile: heading-add-levels($heading-variants--mobile),
));
}
:root {
$responsive_font-sizes: ();
$responsive_line-heights: ();
@each $device in map-keys($headings-styles) {
$font-sizes: ();
$line-heights: ();
@each $level, $styles in map-get($headings-styles, $device) {
// If property is text-size use custom properties
// else use fixed values
@if map-has-key($styles, text-size) {
$variant: map-get($styles, text-size);
$font-sizes: map-merge($font-sizes, ($level: var(--fs-#{$variant})));
$line-heights: map-merge($line-heights, ($level: var(--lh-#{$variant})));
} @else {
@if map-has-key($styles, font-size) {
$font-size: map-get($styles, font-size);
$font-sizes: map-merge($font-sizes, ($level: $font-size));
}
@if map-has-key($styles, line-height) {
$line-height: map-get($styles, line-height);
$line-heights: map-merge($line-heights, ($level: $line-height));
}
}
}
$responsive_font-sizes: map-merge($responsive_font-sizes, ($device: $font-sizes));
$responsive_line-heights: map-merge($responsive_line-heights, ($device: $line-heights));
}
& {
@include responsive-variables(
$set: $responsive_font-sizes,
$prefix: --fs-hl
);
}
& {
@include responsive-variables(
$set: $responsive_line-heights,
$prefix: --lh-hl
);
}
}
//***** Generate placeholder classes (e.g. "%heading--section-title") *****//
@each $device in map-keys($headings-styles) {
@each $level in map-keys(map-get($headings-styles, $device)) {
$placeholderClass: heading;
@if type-of($level) == number {
$placeholderClass: h#{$level};
} @else if $level != default {
$placeholderClass: #{$placeholderClass}--#{$level};
}
%#{$placeholderClass} {
text-wrap: balance;
@include heading-responsive-styles(
$level: $level,
$device: $device,
);
}
}
}
//***** Generate classes *****//
@each $level in map-keys(map-get($headings-styles, default)) {
$selector: ".heading";
$placeholderClass: heading;
@if type-of($level) == number {
$selector: ".h#{$level}";
$placeholderClass: h#{$level};
} @else if $level != default {
$selector: "#{$selector}.is-#{$level}";
$placeholderClass: #{$placeholderClass}--#{$level};
}
#{$selector} {
@extend %#{$placeholderClass};
}
}