Internetstiftelsen Styleguide

Typography 

<div class="wrapper" role="main">
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.supersize</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h1 class="supersize">Typografiska regler för Internetstiftelsens webbplatser.</h1>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H1</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h1>Typografi Ut ante enim, mollis sit amet arcu sed, auctor accumsan arcu</h1>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H2</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H3</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H4</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.preamble</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p class="preamble u-indent-1">Typografiska regler för Internetstiftelsens webbplatser.</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">P</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p>Typografiska regler för Internetstiftelsens webbplatser. <strong>Den här texten är bold</strong> och <em>den här texten är italic</em></p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">A</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p>Typografiska regler för Internetstiftelsens webbplatser <a href="https://google.se">lorem non turpis condimentum iaculis <svg class="icon o-mega-menu__link__icon">
                        <use xlink:href="#icon-external-link"></use>
                    </svg>
                </a> Typografiska regler för Internetstiftelsens webbplatser</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">LISTS</p>
        </div>
        <div class="grid-18 grid-md-14">
            <ul class="checklist">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Sed nisl justo, pharetra non scelerisque</li>
                <li> Vestibulum ullamcorper</li>
                <li>
                    Nam vitae mauris blandit
                    <ul>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Sed nisl justo, pharetra non scelerisque</li>
                        <li> Vestibulum ullamcorper</li>
                        <li>
                            Nam vitae mauris blandit
                            <ul>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Sed nisl justo, pharetra non scelerisque</li>
                                <li> Vestibulum ullamcorper</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

            <ol>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Sed nisl justo, pharetra non scelerisque</li>
                <li> Vestibulum ullamcorper</li>
                <li>
                    Nam vitae mauris blandit
                    <ol>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Sed nisl justo, pharetra non scelerisque</li>
                        <li> Vestibulum ullamcorper</li>
                        <li>
                            Nam vitae mauris blandit
                            <ol>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Sed nisl justo, pharetra non scelerisque</li>
                                <li> Vestibulum ullamcorper</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">Lists with modifiers</p>
        </div>
        <div class="grid-18 grid-md-14">
            <ul class="bullet-list--quote jade">
                <li>Lorem ipsum dolor sit amet</li>
                <li class="peacock">Sed nisl justo, pharetra non scelerisque</li>
                <li>Vestibulum ullamcorper</li>
            </ul>

            <ul class="bullet-list--arrow-right-variant ruby">
                <li>Lorem ipsum dolor sit amet</li>
                <li class="ocean">Sed nisl justo, pharetra non scelerisque</li>
                <li>Vestibulum ullamcorper</li>
            </ul>

            <ul class="bullet-list--heart-variant ruby">
                <li>Lorem ipsum dolor sit amet</li>
                <li class="jade">Sed nisl justo, pharetra non scelerisque</li>
                <li>Vestibulum ullamcorper</li>
            </ul>

            <ul class="bullet-list--check-variant jade">
                <li class="ocean">Lorem ipsum dolor sit amet</li>
                <li class="bullet-list--close-variant ruby">Sed nisl justo, pharetra non scelerisque</li>
                <li class="sandstone">Vestibulum ullamcorper</li>
            </ul>

            <ul class="bullet-list--close-variant ruby">
                <li class="peacock">Lorem ipsum dolor sit amet</li>
                <li class="bullet-list--check-variant jade">Sed nisl justo, pharetra non scelerisque</li>
                <li class="lemon">Vestibulum ullamcorper</li>
            </ul>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.meta</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p class="meta">Typografiska regler för Internetstiftelsens webbplatser.</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.small</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p class="small">Typografiska regler för Internetstiftelsens webbplatser.</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">BLOCKQUOTE</p>
        </div>
        <div class="grid-18 grid-md-14">
            <blockquote class="jade">
                <svg class="icon">
                    <use xlink:href="#icon-quote"></use>
                </svg>
                <p>Välkommen till Internetmuseum!
 Här tar vi dig med på en resa genom den svenska internethistorien.</p>
                <cite class="meta">Frank Zappa</cite>
            </blockquote>

        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">pre > code</p>
        </div>
        <div class="grid-18 grid-md-14">
            <pre><code>const debounce = (func, delay) => {
	let inDebounce;

	return (...args) => {
		const context = this;
		clearTimeout(inDebounce);
		inDebounce = setTimeout(() => func.apply(context, args), delay);
	};
};

const checkElements = debounce(() => {
	const accordionElementFresh = document.querySelector(`.js-${className}`);

	if (accordionElementFresh) {
		attachAccordion();
	}
}, 50);

const observeHandler = (mutationsList) => {
	mutationsList.forEach((mutation) => {
		if (mutation.type !== 'childList') {
			return;
		}

		checkElements();
	});
};

const observer = new MutationObserver(observeHandler);

observer.observe(document.body, { childList: true, subtree: true });</code>
			</pre>
        </div>
    </div>
</div>

<h1></h1>
<p></p>
<button type="button" class="grid-toggle">Grid</button>
 
<div class="wrapper" role="main">
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.supersize</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h1 class="supersize">{{supersize}}</h1>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H1</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h1>{{h1}}</h1>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H2</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h2>{{h2}}</h2>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H3</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h3>{{h2}}</h3>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H4</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h4>{{h2}}</h4>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.preamble</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p class="preamble u-indent-1">{{preamble}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">P</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p>{{preamble}} <strong>{{strong}}</strong> och <em>{{italic}}</em></p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">A</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p>{{paragraph}} <a href="https://google.se">{{link}} {{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}</a> {{paragraph}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">LISTS</p>
		</div>
		<div class="grid-18 grid-md-14">
			<ul class="checklist">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Sed nisl justo, pharetra non scelerisque</li>
				<li> Vestibulum ullamcorper</li>
				<li>
					Nam vitae mauris blandit
					<ul>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Sed nisl justo, pharetra non scelerisque</li>
						<li> Vestibulum ullamcorper</li>
						<li>
							Nam vitae mauris blandit
							<ul>
								<li>Lorem ipsum dolor sit amet</li>
								<li>Sed nisl justo, pharetra non scelerisque</li>
								<li> Vestibulum ullamcorper</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>

			<ol>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Sed nisl justo, pharetra non scelerisque</li>
				<li> Vestibulum ullamcorper</li>
				<li>
					Nam vitae mauris blandit
					<ol>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Sed nisl justo, pharetra non scelerisque</li>
						<li> Vestibulum ullamcorper</li>
						<li>
							Nam vitae mauris blandit
							<ol>
								<li>Lorem ipsum dolor sit amet</li>
								<li>Sed nisl justo, pharetra non scelerisque</li>
								<li> Vestibulum ullamcorper</li>
							</ol>
						</li>
					</ol>
				</li>
			</ol>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">Lists with modifiers</p>
		</div>
		<div class="grid-18 grid-md-14">
			<ul class="bullet-list--quote jade">
				<li>Lorem ipsum dolor sit amet</li>
				<li class="peacock">Sed nisl justo, pharetra non scelerisque</li>
				<li>Vestibulum ullamcorper</li>
			</ul>

			<ul class="bullet-list--arrow-right-variant ruby">
				<li>Lorem ipsum dolor sit amet</li>
				<li class="ocean">Sed nisl justo, pharetra non scelerisque</li>
				<li>Vestibulum ullamcorper</li>
			</ul>

			<ul class="bullet-list--heart-variant ruby">
				<li>Lorem ipsum dolor sit amet</li>
				<li class="jade">Sed nisl justo, pharetra non scelerisque</li>
				<li>Vestibulum ullamcorper</li>
			</ul>

			<ul class="bullet-list--check-variant jade">
				<li class="ocean">Lorem ipsum dolor sit amet</li>
				<li class="bullet-list--close-variant ruby">Sed nisl justo, pharetra non scelerisque</li>
				<li class="sandstone">Vestibulum ullamcorper</li>
			</ul>

			<ul class="bullet-list--close-variant ruby">
				<li class="peacock">Lorem ipsum dolor sit amet</li>
				<li class="bullet-list--check-variant jade">Sed nisl justo, pharetra non scelerisque</li>
				<li class="lemon">Vestibulum ullamcorper</li>
			</ul>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.meta</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p class="meta">{{meta}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.small</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p class="small">{{small}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">BLOCKQUOTE</p>
		</div>
		<div class="grid-18 grid-md-14">
			<blockquote class="jade">
				{{>@ icon id="quote"}}
				<p>{{blockquote}}</p>
				<cite class="meta">{{quotee}}</cite>
			</blockquote>

		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">pre > code</p>
		</div>
		<div class="grid-18 grid-md-14">
			<pre><code>const debounce = (func, delay) => {
	let inDebounce;

	return (...args) => {
		const context = this;
		clearTimeout(inDebounce);
		inDebounce = setTimeout(() => func.apply(context, args), delay);
	};
};

const checkElements = debounce(() => {
	const accordionElementFresh = document.querySelector(`.js-${className}`);

	if (accordionElementFresh) {
		attachAccordion();
	}
}, 50);

const observeHandler = (mutationsList) => {
	mutationsList.forEach((mutation) => {
		if (mutation.type !== 'childList') {
			return;
		}

		checkElements();
	});
};

const observer = new MutationObserver(observeHandler);

observer.observe(document.body, { childList: true, subtree: true });</code>
			</pre>
		</div>
	</div>
</div>

{{> @grid-toggle }}
 
{
  "supersize": "Typografiska regler för Internetstiftelsens webbplatser.",
  "h1": "Typografi Ut ante enim, mollis sit amet arcu sed, auctor accumsan arcu",
  "h2": "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
  "preamble": "Typografiska regler för Internetstiftelsens webbplatser.",
  "paragraph": "Typografiska regler för Internetstiftelsens webbplatser",
  "meta": "Typografiska regler för Internetstiftelsens webbplatser.",
  "small": "Typografiska regler för Internetstiftelsens webbplatser.",
  "blockquote": "Välkommen till Internetmuseum!
 Här tar vi dig med på en resa genom den svenska internethistorien.",
  "quotee": "Frank Zappa",
  "link": "lorem non turpis condimentum iaculis",
  "strong": "Den här texten är bold",
  "italic": "den här texten är italic"
}
  • Content: 
    @charset "UTF-8";
@use '../variables' as var;
@use '../functions' as func;
@use '../extends';
@use '../colors/colors' as colors;
@use '../colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/baseline/plumber' as plumber;
@use '../bem' as bem;

h1,
.alpha,
%alpha {
	@include plumber.plumber(
		$font-size: 3,
		$line-height: 4,
		$leading-bottom: 2,
		$baseline: var.$headings-baseline
	);

	font-family: var.$font-family-headings;

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 4,
			$line-height: 5,
			$leading-bottom: 1,
			$baseline: var.$headings-baseline
		);
	}
}

h2,
.beta,
%beta {
	@include plumber.plumber(
		$font-size: 2.44444,
		$line-height: 3,
		$leading-bottom: 1,
		$baseline: var.$headings-baseline
	);

	font-family: var.$font-family-headings;

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 2.666666,
			$leading-bottom: 1
		);

		line-height: 1.75rem;
	}
}

h3,
.gamma,
%gamma {
	@include plumber.plumber(
		$font-size: 2.22222,
		$line-height: 3,
		$leading-top: 0,
		$leading-bottom: 1
	);

	font-family: var.$font-family-headings;
}

h4,
.delta,
%delta {
	@include plumber.plumber(
		$font-size: 1.888888,
		$line-height: 3,
		$leading-top: 0,
		$leading-bottom: 1
	);

	font-family: var.$font-family-headings;
}

%reset-link-style {
	padding: unset;
	border-bottom: unset;
	color: unset;
	text-decoration: unset;

	&:hover,
	&:focus {
		border-bottom: unset;
		border-radius: unset;
		background-color: unset;
	}
}

p a,
td a:not([class*='tag']),
th a:not([class*='tag']) {
	@extend %break-long-links;
	@extend %link-styles;
}

ul:not([class]),
ol:not([class]) {
	li > a {
		@extend %break-long-links;
		@extend %link-styles;
	}
}

li {
	padding-top: func.rhythm(0.25);
	padding-bottom: func.rhythm(0.25);
}

li ul,
li ol {
	margin-top: func.rhythm(1);
	margin-left: func.rhythm(4);
	padding-top: 0;
	padding-left: 0;
}

li ol {
	list-style-type: lower-latin;
}

li ol li ol {
	list-style-type: lower-roman;
}

ul.bullet-list--quote,
ul.bullet-list--arrow-right-variant,
ul.bullet-list--heart-variant,
ul.bullet-list--check-variant,
ul.bullet-list--close-variant {
	@include colorFunc.color_classes(
		$map: colorFunc.$colors,
		$attribute: '--bullet-list-icon-color',
		$prefix: '-'
	);

	padding-left: func.rhythm(4);
	list-style: none;

}

ul[class*='bullet-list--'] > li,
li.bullet-list--quote,
li.bullet-list--arrow-right-variant,
li.bullet-list--heart-variant,
li.bullet-list--check-variant,
li.bullet-list--close-variant {
	position: relative;

	&::before {
		position: absolute;
		top: func.rhythm(1);
		right: 100%;
		margin-right: func.rhythm(1);
		background-color: var(--bullet-list-icon-color, #{colors.$color-black});
		content: '';
	}
}

ul[class*='bullet-list--'] > li {
	@include colorFunc.color_classes(
		$map: colorFunc.$colors,
		$attribute: '--bullet-list-icon-color',
		$prefix: '-'
	);
}

li.bullet-list--quote,
li.bullet-list--arrow-right-variant,
li.bullet-list--heart-variant,
li.bullet-list--check-variant,
li.bullet-list--close-variant {
	@include colorFunc.color_classes(
		$map: colorFunc.$colors,
		$attribute: '--bullet-list-icon-color',
		$prefix: '-'
	);
}

ul[class*='bullet-list--'] > li.bullet-list--quote,
ul[class*='bullet-list--'] > li.bullet-list--arrow-right-variant,
ul[class*='bullet-list--'] > li.bullet-list--heart-variant,
ul[class*='bullet-list--'] > li.bullet-list--check-variant,
ul[class*='bullet-list--'] > li.bullet-list--close-variant {
	@include colorFunc.color_classes(
		$map: colorFunc.$colors,
		$attribute: '--bullet-list-icon-color',
		$prefix: '-'
	);
}

ul.bullet-list--quote > li::before,
ul[class*='bullet-list--'] > li.bullet-list--quote::before,
li.bullet-list--quote::before {
	width: func.rhythm(1);
	height: func.rhythm(2);
	-webkit-mask: url('../../atoms/icon/quote.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/quote.svg') no-repeat center / contain;
}

ul.bullet-list--arrow-right-variant > li::before,
ul[class*='bullet-list--'] > li.bullet-list--arrow-right-variant::before,
li.bullet-list--arrow-right-variant::before {
	width: func.rhythm(1.5);
	height: func.rhythm(1.5);
	-webkit-mask: url('../../atoms/icon/arrow-variant.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/arrow-variant.svg') no-repeat center / contain;
}

ul.bullet-list--heart-variant > li::before,
ul[class*='bullet-list--'] > li.bullet-list--heart-variant::before,
li.bullet-list--heart-variant::before {
	width: func.rhythm(1.5);
	height: func.rhythm(1.5);
	-webkit-mask: url('../../atoms/icon/heart-variant.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/heart-variant.svg') no-repeat center / contain;
}

ul.bullet-list--heart-variant > li::after,
ul[class*='bullet-list--'] > li.bullet-list--heart-variant::after,
li.bullet-list--heart-variant::after {
	position: absolute;
	top: func.rhythm(1);
	right: calc(100% + #{func.rhythm(1)});
	width: func.rhythm(1.5);
	height: func.rhythm(1.5);
	background-color: colors.$color-snow;
	-webkit-mask: url('../../atoms/icon/heart-variant-glare.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/heart-variant-glare.svg') no-repeat center / contain;
	content: '';
}

ul.bullet-list--check-variant > li::before,
ul[class*='bullet-list--'] > li.bullet-list--check-variant::before,
li.bullet-list--check-variant::before,
ul.bullet-list--close-variant > li::before,
ul[class*='bullet-list--'] > li.bullet-list--close-variant::before,
li.bullet-list--close-variant::before {
	top: func.rhythm(1);
	width: func.rhythm(1.5);
	height: func.rhythm(1.5);
}

ul.bullet-list--check-variant > li::before,
ul[class*='bullet-list--'] > li.bullet-list--check-variant::before,
li.bullet-list--check-variant::before {
	-webkit-mask: url('../../atoms/icon/check-variant.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/check-variant.svg') no-repeat center / contain;
}

ul.bullet-list--close-variant > li::before,
ul[class*='bullet-list--'] > li.bullet-list--close-variant::before,
li.bullet-list--close-variant::before {
	-webkit-mask: url('../../atoms/icon/close-variant.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/close-variant.svg') no-repeat center / contain;
}

ul.bullet-list--check-variant > li::after,
ul[class*='bullet-list--'] > li.bullet-list--check-variant::after,
li.bullet-list--check-variant::after,
ul.bullet-list--close-variant > li::after,
ul[class*='bullet-list--'] > li.bullet-list--close-variant::after,
li.bullet-list--close-variant::after {
	position: absolute;
	top: func.rhythm(1);
	right: calc(100% + #{func.rhythm(1)});
	width: func.rhythm(1.5);
	height: func.rhythm(1.5);
	background-color: colors.$color-snow;
	content: '';
}

ul.bullet-list--check-variant > li::after,
ul[class*='bullet-list--'] > li.bullet-list--check-variant::after,
li.bullet-list--check-variant::after {
	-webkit-mask: url('../../atoms/icon/check-variant-inner.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/check-variant-inner.svg') no-repeat center / contain;
}

ul.bullet-list--close-variant > li::after,
ul[class*='bullet-list--'] > li.bullet-list--close-variant::after,
li.bullet-list--close-variant::after {
	-webkit-mask: url('../../atoms/icon/close-variant-inner.svg') no-repeat center / contain;
	mask: url('../../atoms/icon/close-variant-inner.svg') no-repeat center / contain;
}

p,
ul,
ol,
dl {
	@include plumber.plumber(
		$leading-bottom: 3
	);
}

.small,
small {
	@include plumber.plumber(
		$font-size: 1.5,
		$line-height: 2,
		$leading-bottom: 0
	);
}

.supersize,
%supersize {
	@include plumber.plumber(
		$font-size: 3,
		$line-height: 4,
		$leading-bottom: 1,
		$baseline: var.$headings-baseline
	);

	font-family: var.$font-family-bold;

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 4.5,
			$line-height: 5,
			$leading-bottom: 1
		);
	}

	@include breakpoint.bp-up(md) {
		@include plumber.plumber(
			$font-size: 7,
			$line-height: 8,
			$leading-bottom: 2
		);
	}

	&--large-mobile {
		hyphens: auto;
		hyphenate-limit-chars: 13 3 4;
		overflow-wrap: break-word;

		@include plumber.plumber(
			$font-size: 4.5,
			$line-height: 5,
			$leading-bottom: 1
		);

		@include breakpoint.bp-up(md) {
			hyphens: initial;
			overflow-wrap: normal;

			@include plumber.plumber(
				$font-size: 7,
				$line-height: 8,
				$leading-bottom: 2
			);
		}
	}
}

.godzilla {
	@include plumber.plumber(
		$leading-top: 0,
		$leading-bottom: 0
	);

	line-height: 79px;
	font-size: 120px;
	font-family: var.$font-family-bold;
	letter-spacing: -#{func.to_rem(5px)};

	@include breakpoint.bp-up(sm) {
		line-height: 100px;
		font-size: 150px;
	}

	@include breakpoint.bp-up(md) {
		line-height: 135px;
		font-size: 200px;
		letter-spacing: -#{func.to_rem(10px)};
	}

	@include breakpoint.bp-up(lg) {
		line-height: 201px;
		font-size: 295px;
		letter-spacing: -#{func.to_rem(20px)};
	}

	@include breakpoint.bp-up(xl) {
		line-height: 247px;
		font-size: 360px;
	}

	// Special rule for decade starting with 1
	@include bem.m(19) {
		&::first-letter {
			letter-spacing: -#{func.to_rem(20px)};

			@include breakpoint.bp-up(lg) {
				letter-spacing: -#{func.to_rem(40px)};
			}

			@include breakpoint.bp-up(xl) {
				letter-spacing: -#{func.to_rem(45px)};
			}
		}
	}
}

.preamble,
%preamble {

	@include plumber.plumber(
		$font-size: 2.55555,
		$line-height: 4,
		$leading-bottom: 4
	);

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 3,
			$line-height: 4,
			$leading-bottom: 4
		);
	}
}

.meta {
	@include plumber.plumber(
		$font-size: 1.75,
		$baseline: var.$mono-baseline
	);

	font-family: var.$font-family-mono;
	font-weight: normal;
	letter-spacing: func.to_rem(0.5px);
	text-transform: uppercase;
}

.mono {
	font-family: var.$font-family-mono;
	font-weight: normal;
	letter-spacing: func.to_rem(0.5px);
	text-decoration: none;
	text-transform: uppercase;
}

::selection {
	background-color: colors.$color-ruby-light;
}

::-moz-selection {
	background-color: colors.$color-ruby-light;
}

blockquote {

	@include colorFunc.color_classes (
		$map: colorFunc.$colors,
		$prefix: '-',
		$attribute: 'fill',
		$element: 'svg'
	);

	display: flex;
	position: relative;
	flex-direction: column;
	margin-top: func.rhythm(6);
	margin-right: 0;
	margin-bottom: func.rhythm(5);
	margin-left: 0;
	padding-left: func.to_rem(40px);

	p {
		@include plumber.plumber(
			$font-size: 2.5,
			$line-height: 3,
			$leading-top: 1,
			$leading-bottom: 0,
			$baseline: var.$headings-baseline
		);
	}

	svg {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: func.rhythm(2);
		height: func.rhythm(4);
		fill: colors.$color-black;

		@include breakpoint.bp-up(md) {
			width: func.rhythm(3);
			height: func.rhythm(6);
		}
	}

	.meta {
		@include plumber.plumber(
			$font-size: 1.75,
			$leading-bottom: 0
		);

		margin-top: func.rhythm(1);
		line-height: func.rhythm(2.5);
	}

	@include breakpoint.bp-up(sm) {
		padding-right: func.rhythm(3);
		max-width: func.to_rem(613px);
		margin-left: auto;
		margin-right: auto;
	}

	@include breakpoint.bp-up(md) {
		margin-top: func.rhythm(6.5);
		padding-left: func.to_rem(52px);

		p {
			@include plumber.plumber(
				$font-size: 2.7,
				$line-height: 4,
				$leading-bottom: 0,
				$leading-top: 1
			);

			line-height: 32px;
		}

		.meta {
			margin-top: func.rhythm(0.5);
			line-height: func.rhythm(3.5);
		}
	}

	@include breakpoint.bp-up(lg) {
		margin-left: initial;
		margin-right: initial;
	}
}

b,
strong,
legend {
	font-family: var.$font-family-headings;
	font-weight: normal;
}
  • URL: /components/raw/typography/_typography.scss
  • Filesystem Path: src/configurations/typography/_typography.scss
  • Size: 11.6 KB

Typography

Blockquote

Blockquote icon can use any of the base colors. This is set by using class .colorname on the blockquote tag itself. If color is not set manually it will default to colors.$color-black. For a list of color names, see Color component

Bullet-list variants

Use bullet-list--quote, bullet-list--arrow-right-variant, bullet-list--heart-variant, bullet-list--check-variant, or bullet-list--close-variant on a ul to use the matching icon as its bullet. Icons accept the same base-color classes as blockquotes and default to black.

Apply a color class directly to an item to override only that bullet’s color, without changing its icon.

<ul class="bullet-list--quote jade">
    <li>First item</li>
    <li>Second item</li>
</ul>

<ul class="bullet-list--arrow-right-variant ruby">
    <li>First item</li>
    <li>Second item</li>
</ul>

<ul class="bullet-list--heart-variant ruby">
    <li>First item</li>
    <li>Second item</li>
</ul>

<ul class="bullet-list--quote jade">
    <li>First item</li>
    <li class="ruby">Second item</li>
</ul>

<ul class="bullet-list--check-variant jade">
    <li>First item</li>
    <li class="bullet-list--close-variant ruby">Second item</li>
</ul>

<ul class="bullet-list--close-variant ruby">
    <li>First item</li>
    <li class="bullet-list--check-variant jade">Second item</li>
</ul>