Styleguide

Typography 

<h1>Achtung, hier kommt die Prämienverbilligungsinitiative!</h1>
<h2>Achtung, hier kommt die Prämienverbilligungsinitiative!</h2>
<h3>Achtung, hier kommt die Prämienverbilligungsinitiative!</h3>
<p>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 This is a <a href="#">link in the excerpt</a> 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.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, This is a <a href="#">link in the content</a> 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.</p>
<p>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.</p>
<p>Here comes a multiline <a href="#">link 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.</a> Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
<p>This is a <a href="#">link in the content</a>, inside a standard text content.</p>
<h2>Ordered List</h2>
<ol>
    <li>List</li>
    <li>List</li>
    <li>List item with subitems
        <ol>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>List item with subitems
                <ol>
                    <li>Subitem</li>
                    <li>Subitem</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>List item</li>
</ol>
<h2>Unordered List</h2>
<ul>
    <li>List</li>
    <li>List</li>
    <li>List item with subitems
        <ul>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>List item with subitems
                <ul>
                    <li>Subitem</li>
                    <li>Subitem</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>List item</li>
</ul>
<blockquote>
    <p>Was für ein wunderschönes Quote.</p>
</blockquote>
<p>Super<sup>8</sup> or sub<sub>7</sub>?</p>
 
<h1>Achtung, hier kommt die Prämienverbilligungsinitiative!</h1>
<h2>Achtung, hier kommt die Prämienverbilligungsinitiative!</h2>
<h3>Achtung, hier kommt die Prämienverbilligungsinitiative!</h3>
<p>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 This is a <a href="#">link in the excerpt</a> 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.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
	labore et dolore magna aliquyam erat, This is a <a href="#">link in the content</a> 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.</p>
<p>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.</p>
<p>Here comes a multiline <a href="#">link 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.</a> Stet clita kasd gubergren, no sea takimata
	sanctus est Lorem ipsum dolor sit amet.</p>
<p>This is a <a href="#">link in the content</a>, inside a standard text content.</p>
<h2>Ordered List</h2>
<ol>
	<li>List</li>
	<li>List</li>
	<li>List item with subitems
		<ol>
			<li>Subitem</li>
			<li>Subitem</li>
			<li>List item with subitems
				<ol>
					<li>Subitem</li>
					<li>Subitem</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>List item</li>
</ol>
<h2>Unordered List</h2>
<ul>
	<li>List</li>
	<li>List</li>
	<li>List item with subitems
		<ul>
			<li>Subitem</li>
			<li>Subitem</li>
			<li>List item with subitems
				<ul>
					<li>Subitem</li>
					<li>Subitem</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>List item</li>
</ul>
<blockquote><p>Was für ein wunderschönes Quote.</p></blockquote>
<p>Super<sup>8</sup> or sub<sub>7</sub>?</p>
  • Content: 
    /**
 * General
 */
body {
	font-family: $font-primary;
	color: $color-text;
}

h1 {
	@include heading-font;
	font-size: 2rem; // 32/16

	@include media($_DESKTOP) {
		font-size: 2.875rem; // 46/16
	}
}

h2 {
	@include heading-font;
	font-size: 1.625rem; // 26/16

	@include media($_DESKTOP) {
		font-size: 1.9375rem; // 31/16
	}
}

h3 {
	@include heading-font;
	font-size: 1.25rem; // 20/16

	@include media($_DESKTOP) {
		font-size: 1.46875rem; // 23.5/16
	}
}

h4, h5 {
	@include heading-font;
	font-size: 1rem;

	@include media($_DESKTOP) {
		font-size: 1.25rem; // 23.5/16
	}
}

/**
 * Text
 */

p {
	letter-spacing: 0.015625em;
	line-height: 1.75em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	font-size: 1rem;
}

.u-t-excerpt {
	font-size: 1.25rem; // 20/16

	@include media($_DESKTOP) {
		font-size: 1.5rem; // 24/16
		hyphens: initial; // sorry IE users
	}
}

a {
	color: $color-text;
	outline: none;
	text-decoration-line: underline;
	text-decoration-color: $color-primary-light;
	text-decoration-thickness: 0.25em;
	text-underline-position: under;
	text-underline-offset: -0.125em;
	text-decoration-skip-ink: none;
	box-decoration-break: clone;
	transition: all $transition-fast $transition-ease;

	@include high-contrast {
		text-decoration-color: $color-text;
	}

	@include hover {
		background-color: $color-primary-light;
		box-shadow: 0 0 0 .25em $color-primary-light;

		@include high-contrast {
			background-color: $color-text;
			box-shadow: 0 0 0 .25em $color-text;
			color: #ffffff;
		}
	}
}

strong, b {
	font-weight: $font-weight-bold;
}

/**
 * Lists
 */

ul, ol {
	line-height: 1.75em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;

	li {
		position: relative;
		padding-left: 1.5em;

		&:before {
			position: absolute;
			left: 0;
		}
	}
}

li > ol, li > ul {
	margin-top: 0;
	margin-bottom: 0;
}

ol {
	counter-reset: item;

	> li {
		counter-increment: item;

		> ol > li {
			padding-left: 2.5em;

			> ol > li {
				padding-left: 3em;
			}
		}

		&:before {
			content: counters(item, ".") ".";
		}
	}
}

ul li:before {
	content: "\25A0";
	color: $color-secondary;
	transform: translateY(-0.1em) rotate(-5deg);
	font-size: 0.9em;
	-webkit-text-size-adjust: 50%;
}

::selection {
	color: $color-white;
	background: $color-primary;

	@include high-contrast {
		background: $color-primary-dark;
	}
}

/**
 * Quotes
 */
blockquote, q {
	font-size: 1.25rem;
	color: $color-primary;
	font-weight: $font-weight-bold;
	font-family: $font-title;
	letter-spacing: 0.018125em;
	line-height: 1.2727272727em;

	@include high-contrast {
		color: $color-primary-dark;
	}

	p {
		display: inline;
	}

	&::before {
		content: '\0000AB';
		display: inline-block;
		padding-right: 0.125em;
	}

	&::after {
		content: '\0000BB';
		display: inline-block;
		padding-left: 0.125em;
	}
}

/**
 * Sub- and Superscript
 */
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/**
 * Prevent wrapping of gendered words
 *
 * @see THEME_DIR/lib/twig/filters/wptexturize.php
 */
span.nowrap {
	white-space: nowrap;
}
  • URL: /components/raw/typographie/_typographie.scss
  • Filesystem Path: styleguide/src/components/typographie/_typographie.scss
  • Size: 3.1 KB 
/* No context defined. */

No notes defined.