<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEM Naming Cheat Sheet by 9elements</title>
<meta name="description" content="A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.">

<meta property="og:title" content="BEM Naming Cheat Sheet by 9elements" />
<meta property="twitter:title" content="BEM Naming Cheat Sheet by 9elements" />
<meta property="og:image" content="https://9elements.com/bem-cheat-sheet/src/img/bem-cheat-sheet.png">
<meta property="twitter:image:src" content="https://9elements.com/bem-cheat-sheet/src/img/bem-cheat-sheet.png">
<meta property="og:description" content="A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.">
<meta property="twitter:description" content="A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.">
<meta property="og:url" content="https://9elements.com/bem-cheat-sheet/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@supremebeing09">
<meta name="twitter:label1" value="Made with ❤">
<meta name="twitter:data1" value="in Bochum by 9elements">

<link rel="icon" href="src/img/favicon.svg" type="image/png" />
<link href="https://fonts.googleapis.com/css?family=Audiowide|Fira+Code|Fira+Sans:300,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="src/css/main.css">
<script src="src/js/cookies-eu-banner.js"></script>
</head>
<body>
<div class="t-keyvisual">
<div class="t-keyvisual__body">
<h1 class="t-keyvisual__title">
BEM
<span class="t-keyvisual__subtitle">Cheat Sheet</span>
</h1>
</div>
<div class="t-keyvisual__decoration"></div>
</div>
<div class="t-intro">
<p>
When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS
developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM
cosmos by giving you naming-suggestions for some of the most common web components.
</p>
<p>
If you still have no idea what BEM means, we have added some <a href="#links">helpful links</a> below. For questions
or suggestions for improvement, find me on <a href="https://twitter.com/supremebeing09" target="_blank">Twitter</a>.
And last but not least…if you like the little Astronaut, we made some <a href="#wallpapers">Wallpapers</a>.
</p>
</div>

<div class="t-page-layout">
<a id="page-navigation"></a>
<aside class="t-page-layout__sidebar">
<nav class="t-main-nav" id="main-nav" aria-label="main">
<ul class="t-main-nav__list">
<li class="t-main-nav__item">
<a class="t-main-nav__link" href="#standard-blocks">Standard Blocks</a>
<ul class="t-main-nav__list t-main-nav__list--second">

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#breadcrumb">Breadcrumb</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#button">Button</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#card+i">Card I</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#card+ii">Card II</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#list">List</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#navigation">Navigation</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#tabs">Tabs</a></li>

</ul>
</li>

<li class="t-main-nav__item">
<a class="t-main-nav__link" href="#form-blocks">Form Blocks</a>
<ul class="t-main-nav__list t-main-nav__list--second">

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#checkbox">Checkbox</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#custom+checkbox">Custom Checkbox</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#input+group">Input Group</a></li>

</ul>
</li>

<li class="t-main-nav__item">
<a class="t-main-nav__link" href="#layout-blocks">Layout Blocks</a>
<ul class="t-main-nav__list t-main-nav__list--second">

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#imposter">Imposter</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#sidebar">Sidebar</a></li>

<li class="t-main-nav__item"><a class="t-main-nav__link" href="#stack">Stack</a></li>

</ul>
</li>

<li class="t-main-nav__item">
<a href="#links" class="t-main-nav__link">Further Reading</a>
</li>
</ul>
</nav>

<label for="show-html" class="t-checkbox">
<input class="t-checkbox__input" type="checkbox" id="show-html" checked="true">
<svg class="t-checkbox__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<rect width="21" height="21" x=".5" y=".5" fill="#FFF" stroke="#006F94" rx="3" />
<path class="tick" stroke="#f09" fill="none" stroke-width="3" d="M4 9l7 6L27-2"></path>
</svg>
<span class="t-checkbox__label">Show HTML</span>
</label>
</aside>

<main class="t-page-layout__main" id="main">
<div class="t-section">
<h2 class="t-section__headline" id="standard-blocks">Standard Blocks</h2>
<p class="t-section__intro">
In this section you will find elements that can be found on many websites and web applications.
In general, it is advisable to consider whether a class name can be derived from the semantic HTML.
For example <code>card_header</code>, <code>cardfooter</code> or <code>list_item</code>.
</p>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="breadcrumb"></a>
<h3 class="t-card__headline" omit>Breadcrumb<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb__list">
<li class="breadcrumb__item"><a class="breadcrumb__link" href="#">Home</a></li>
<li class="breadcrumb__item"><a class="breadcrumb__link" href="#">About</a></li>
<li class="breadcrumb__item"><a class="breadcrumb__link" href="#" aria-current="location">Vision</a></li>
</ol>
</nav>
</div>
<pre><code><nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb_list">
<li class="breadcrumb
item"><a class="breadcrumblink" href="#">Home</a></li>
<li class="breadcrumb
item"><a class="breadcrumblink" href="#">About</a></li>
<li class="breadcrumb
item"><a class="breadcrumb_link" href="#" aria-current="location">Vision</a></li>
</ol>
</nav></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>Don't use something like <code>Breadcrumb Navigation</code> for the aria-label as this would result in a screenreader announcing navigation twice.</p>

</div>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="button"></a>
<h3 class="t-card__headline" omit>Button<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<a href="#" class="button">
<span class="button__prepend">
 🚀
</span>
<span class="button__body">My Button</span>
<span class="button__append">
 👨‍🚀
</span>
</a>
</div>
<pre><code><a href="#" class="button">
<span class="button_prepend">
 🚀
</span>
<span class="button
body">My Button</span>
<span class="button
_append">
 👨‍🚀
</span>
</a></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>This Button is more a link than a button. If you have a button in a form that is not a link, you should use a <code><button></code> element instead. Also note that most of the time you don't need an extra <code>button__body</code> element.</p>

</div>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="card+i"></a>
<h3 class="t-card__headline" omit>Card I<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<article class="card">
<aside class="card__aside">
<figure class="card__figure">
<img src="https://satyr.io/400x200?text=card__image" alt="Dummy Image" class="card__image">
</figure>
</aside>
<header class="card__header">
<h2 class="card__title">Card Title</h2>
<h3 class="card__subtitle">
Card Subtitle
</h3>
</header>
<div class="card__body">
<p class="card__copy">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis
deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut
temporibus, at amet corporis id asperiores.
</p>
</div>
<footer class="card__footer">
<div class="card__actions">
<button class="button">
Button
</button>
</div>
</footer>
</article>
</div>
<pre><code><article class="card">
<aside class="card_aside">
<figure class="card
figure">
<img src="
https://satyr.io/400x200?text=cardimage" alt="Dummy Image" class="cardimage">
</figure>
</aside>
<header class="card
header">
<h2 class="card
title">Card Title</h2>
<h3 class="card
subtitle">
Card Subtitle
</h3>
</header>
<div class="card
body">
<p class="card
copy">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis
deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut
temporibus, at amet corporis id asperiores.
</p>
</div>
<footer class="card
footer">
<div class="card
_actions">
<button class="button">
Button
</button>
</div>
</footer>
</article></code></pre>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="card+ii"></a>
<h3 class="t-card__headline" omit>Card II<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<article class="card">
<div class="card__header">
<figure class="card__figure">
<img src="https://satyr.io/400x200?text=card__image" alt="" class="card__image">
</figure>
</div>
<div class="card__body">
<h2 class="card__title">Card Title</h2>
<h3 class="card__subtitle">
Card Subtitle
</h3>
<p class="card__copy">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis
deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut
temporibus, at amet corporis id asperiores.
</p>
</div>
<footer class="card__footer">
<div class="card__actions">
<button class="button">
Button
</button>
</div>
</footer>
</article>
</div>
<pre><code><article class="card">
<div class="card_header">
<figure class="card
figure">
<img src="https://satyr.io/400x200?text=card
image" alt="" class="cardimage">
</figure>
</div>
<div class="card
body">
<h2 class="card
title">Card Title</h2>
<h3 class="card
subtitle">
Card Subtitle
</h3>
<p class="card
copy">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis sint perspiciatis
deleniti ab possimus ut? Ducimus fugiat hic velit necessitatibus. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Repellendus sapiente harum soluta excepturi ut
temporibus, at amet corporis id asperiores.
</p>
</div>
<footer class="card
footer">
<div class="card
_actions">
<button class="button">
Button
</button>
</div>
</footer>
</article></code></pre>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="list"></a>
<h3 class="t-card__headline" omit>List<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<ul class="list">
<li class="list__item">one</li>
<li class="list__item">two</li>
<li class="list__item">
three
<ul class="list list--second">
<li class="list__item list__item--second">Point 3.1</li>
<li class="list__item list__item--second">Point 3.2</li>
<li class="list__item list__item--second">Point 3.3</li>
</ul>
</li>
<li class="list__item">four</li>
</ul>
</div>
<pre><code><ul class="list">
<li class="list_item">one</li>
<li class="list
item">two</li>
<li class="list
item">
three
<ul class="list list--second">
<li class="list
item listitem--second">Point 3.1</li>
<li class="list
item listitem--second">Point 3.2</li>
<li class="list
item listitem--second">Point 3.3</li>
</ul>
</li>
<li class="list
_item">four</li>
</ul></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>It is not uncommon that you have to design several different lists on one page. In this case, it is a good idea to add an extension to the name (separated by a hyphen).<br> Something like <code>counter-list</code>, <code>article-list</code>, <code>customer-list</code>.</p>

</div>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="navigation"></a>
<h3 class="t-card__headline" omit>Navigation<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<nav class="main-nav" aria-label="Main">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#" class="main-nav__link">Home</a>
</li>
<li class="main-nav__item">
<a href="#" class="main-nav__link">Work</a>
</li>
<li class="main-nav__item">
<a href="#" class="main-nav__link">About us</a>
</li>
</ul>
</nav>
</div>
<pre><code><nav class="main-nav" aria-label="Main">
<ul class="main-nav_list">
<li class="main-nav
item">
<a href="#" class="main-nav
link">Home</a>
</li>
<li class="main-nav
item">
<a href="#" class="main-nav
link">Work</a>
</li>
<li class="main-nav
item">
<a href="#" class="main-nav
_link">About us</a>
</li>
</ul>
</nav></code></pre>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="tabs"></a>
<h3 class="t-card__headline" omit>Tabs<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<div class="tabs">
<ul class="tabs__list" role="tablist">
<li class="tabs__item" role="presentation">
<a href="#A" class="tabs__link" id="tab-A" role="tab" aria-controls="A" aria-selected="true" tabindex="0">Section A</a>
</li>
<li class="tabs__item" role="presentation">
<a href="#B" class="tabs__link" id="tab-B" role="tab" aria-controls="B" aria-selected="false" tabindex="-1">Section B</a>
</li>
<li class="tabs__item" role="presentation">
<a href="#C" class="tabs__link" id="tab-C" role="tab" aria-controls="C" aria-selected="false" tabindex="-1">Section C</a>
</li>
</ul>

<section id="A" class="tabs__section" role="tabpanel" aria-labelledby="tab-A" aria-hidden="false">
<div class="tabs__body">
Content of section A<br>
This is an accessible implementation for a tab-list. Needed JS and documentation
can be found <a href="https://codepen.io/2kool2/pen/Kzaddm?editors=0100" omit="" target="_blank">here</a>.
</div>
</section>

<section id="B" class="tabs__section" role="tabpanel" aria-labelledby="tab-B" aria-hidden="true">
<div class="tabs__body">
Content of section B
</div>
</section>

<section id="C" class="tabs__section" role="tabpanel" aria-labelledby="tab-C" aria-hidden="true">
<div class="tabs__body">
Content of section C
</div>
</section>
</div>
</div>
<pre><code><div class="tabs">
<ul class="tabs_list" role="tablist">
<li class="tabs
item" role="presentation">
<a href="#A" class="tabs
link" id="tab-A" role="tab" aria-controls="A" aria-selected="true" tabindex="0">Section A</a>
</li>
<li class="tabs
item" role="presentation">
<a href="#B" class="tabs
link" id="tab-B" role="tab" aria-controls="B" aria-selected="false" tabindex="-1">Section B</a>
</li>
<li class="tabs
item" role="presentation">
<a href="#C" class="tabs
_link" id="tab-C" role="tab" aria-controls="C" aria-selected="false" tabindex="-1">Section C</a>
</li>
</ul>

<section id="A" class="tabs_section" role="tabpanel" aria-labelledby="tab-A" aria-hidden="false">
<div class="tabs
_body">
Content of section A<br>
This is an accessible implementation for a tab-list. Needed JS and documentation
can be found <a href="https://codepen.io/2kool2/pen/Kzaddm?editors=0100&#34; omit="" target="_blank">here</a>.
</div>
</section>

<section id="B" class="tabs_section" role="tabpanel" aria-labelledby="tab-B" aria-hidden="true">
<div class="tabs
_body">
Content of section B
</div>
</section>

<section id="C" class="tabs_section" role="tabpanel" aria-labelledby="tab-C" aria-hidden="true">
<div class="tabs
_body">
Content of section C
</div>
</section>
</div></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>This is an accessible implementation for a tab-list. You do not need to add the aria attributes as they should be inserted with JS when enabled. Needed JS and documentation can be found <a href="https://codepen.io/2kool2/pen/Kzaddm?editors=0100" omit="" target="_blank">here</a>.</p>

</div>
</div>

</article>

</div>

<div class="t-section">
<h2 class="t-section__headline" id="form-blocks">Form Blocks</h2>
<p class="t-section__intro">
Please note that the input elements do not work in this area.
For a live example you can find linked CodePens in some blocks.<br>
I have to admit that I sometimes omit the class for some elements and address the DOM element directly.
For example <code>.custom-checkbox > svg</code> instead of <code>.custom-checkbox__icon</code>.
</p>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="checkbox"></a>
<h3 class="t-card__headline" omit>Checkbox<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<label for="MyCheckbox" class="checkbox">
<input class="checkbox__input" type="checkbox" id="MyCheckbox">
<div class="checkbox__body">
<span class="checkbox__label">My Checkbox</span>
<span class="checkbox__help">
Here you find some useful help Text with a <a href="#" omit>Link</a>.
</span>
</div>
</label>
</div>
<pre><code><label for="MyCheckbox" class="checkbox">
<input class="checkbox_input" type="checkbox" id="MyCheckbox">
<div class="checkbox
body">
<span class="checkbox
label">My Checkbox</span>
<span class="checkbox
_help">
Here you find some useful help Text with a <a href="#" omit>Link</a>.
</span>
</div>
</label></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>The label is the outer node in this example, so you can click anywhere to toggle the checkbox. Naming is a little strange though, as the label is named checkbox and then there is a span named label.</p>

</div>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="custom+checkbox"></a>
<h3 class="t-card__headline" omit>Custom Checkbox<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<label for="MyCustomCheckbox" class="custom-checkbox">
<input class="custom-checkbox__input" type="checkbox" id="MyCustomCheckbox">
<svg class="custom-checkbox__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
<rect width="21" height="21" x=".5" y=".5" fill="#FFF" stroke="#006F94" rx="3" />
<path class="tick" stroke="#6EA340" fill="none" stroke-linecap="round" stroke-width="4" d="M4 10l5 5 9-9"></path>
</svg>
<span class="custom-checkbox__label">My Checkbox</span>
</label>
</div>
<pre><code><label for="MyCustomCheckbox" class="custom-checkbox">
<input class="custom-checkbox_input" type="checkbox" id="MyCustomCheckbox">
<svg class="custom-checkbox
icon" xmlns="http://www.w3.org/2000/svg&#34; viewBox="0 0 22 22">
<rect width="21" height="21" x=".5" y=".5" fill="#FFF" stroke="#006F94" rx="3" />
<path class="tick" stroke="#6EA340" fill="none" stroke-linecap="round" stroke-width="4" d="M4 10l5 5 9-9"></path>
</svg>
<span class="custom-checkbox
_label">My Checkbox</span>
</label></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>This is a custom checkbox. For better accessibility the actual input is placed on top of the Icon. Check the html to get a better understanding of the structure. Here you find a working <a href="https://codepen.io/9elements/pen/VwLdogK">Codepen</a>.</p>

</div>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="input+group"></a>
<h3 class="t-card__headline" omit>Input Group<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<div class="input-group">
<label for="myInput" class="input-group__label">Label:</label>
<input type="text" id="myInput" class="input-group__input">
<span class="input-group__help">
This is a help text. Could be a warning, too. For different colors you
should use modifier classes.
</span>
</div>
</div>
<pre><code><div class="input-group">
<label for="myInput" class="input-group_label">Label:</label>
<input type="text" id="myInput" class="input-group
input">
<span class="input-group
_help">
This is a help text. Could be a warning, too. For different colors you
should use modifier classes.
</span>
</div></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>If you need different states, you'll have to choose if you want to apply the modifier to the outer input-group like <code>.input-group--error</code>.<br> Afterwards, you can either style all child elements accordingly. Or only add a modifier to the element that needs modification (<code>input-group__help--error</code>). See this <a href="https://codepen.io/9elements/pen/PoqVMWa">Codepen</a> as a reference.</p>

</div>
</div>

</article>

</div>

<div class="t-section">
<h2 class="t-section__headline" id="layout-blocks">Layout Blocks</h2>
<p class="t-section__intro">
Layout blocks behave somewhat differently than the other blocks on this page.
Here the children are addressed via general selectors (like <code>> *</code> or <code>> * + *</code>).
The goal is to create a container in which all kinds of blocks can be placed.
Either the number is limited (<code>imposter</code> or <code>sidebar</code>), or any number of children
can be inserted (<code>stack</code>).<br>
To make it easier to distinguish them from the others, you can use a prefix (<code>l-stack</code>, <code>l-sidebar</code>).
It is also a smart idea to specify the distances between the individual elements using this outer layout block. Then the child elements would have no margin.
</p>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="imposter"></a>
<h3 class="t-card__headline" omit>Imposter<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<div class="imposter">
<div></div>
</div>
</div>
<pre><code><div class="imposter">
<div></div>
</div></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>The imposter creates a container where all child elements are positioned in the center of it. Typically this container would span over the whole viewport (<code>height: 100vh</code> and <code>width: 100vw</code>).</p>

</div>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="sidebar"></a>
<h3 class="t-card__headline" omit>Sidebar<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<div class="sidebar">
<aside></aside>
<div></div>
</div>

<div class="sidebar sidebar--reverse">
<aside></aside>
<div></div>
</div>
</div>
<pre><code><div class="sidebar">
<aside></aside>
<div></div>
</div>

<div class="sidebar sidebar--reverse">
<aside></aside>
<div></div>
</div></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>The Sidebar-Block assumes, that it contains exactly two child elements where the sidebar is the first and the content the second.</p>

</div>
</div>

</article>

<article class="t-card">
<div class="t-card__header">
<a class="t-anchor" id="stack"></a>
<h3 class="t-card__headline" omit>Stack<a href="#page-navigation" class="t-card__totop"><span class="visuallyhidden">back to navigation</span></a></h3>
</div>

<div class="t-card__body">
<div class="class-highlight">
<div class="stack">
<div></div>
<div></div>
<div></div>
</div>

<div class="stack stack--horizontal">
<div></div>
<div></div>
<div></div>
</div>
</div>
<pre><code><div class="stack">
<div></div>
<div></div>
<div></div>
</div>

<div class="stack stack--horizontal">
<div></div>
<div></div>
<div></div>
</div></code></pre>
</div>

<div class="t-card__aside">
<div class="t-note">
<h3 class="t-note__title">Note:</h3>
<p>Layout components should be able to nest any type of child element. The component arranges these childen and adds gaps if needed. To make it easier to recognise these elements you can use a prefix like <code>l-stack</code>.</p>

</div>
</div>

</article>

</div>

<div class="t-section">
<h2 class="t-section__headline" id="links">Further Reading</h2>
<ul class="t-link-list">
<li class="t-link-list__item">
<a href="https://www.smashingmagazine.com/2018/06/bem-for-beginners/" class="t-link-list__link">BEM For Beginners: Why You Need BEM</a> – by Inna Belaya on Smashing Magazine
</li>
<li class="t-link-list__item">
<a href="https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/" class="t-link-list__link">Battling BEM CSS: 10 Common Problems And How To Avoid Them</a> – by David Berner on Smashing Magazine
</li>
<li class="t-link-list__item">
<a href="https://css-tricks.com/bem-101/" class="t-link-list__link">BEM 101</a> – by Robin Rendle on CSS Tricks
</li>
<li class="t-link-list__item">
<a href="https://css-tricks.com/using-sass-control-scope-bem-naming/" class="t-link-list__link">Using Sass to Control Scope With BEM Naming </a> – by Andy Bell on CSS Tricks
</li>
</ul>
</div>
<div class="t-section">
<h2 class="t-section__headline" id="wallpapers">Wallpapers</h2>
<p class="t-section__intro">OK, you can't get enough of the super cute astronaut? No problem. Just download one of the wallpapers for your smartphone or desktop.</p>
<h3 class="t-section__subline">Desktop</h3>
<p class="t-section__intro">
<a href="src/img/wallpaper/1024x768.png" target="_blank">1024x768</a>,
<a href="src/img/wallpaper/1024x1024.png" target="_blank">1024x1024</a>,
<a href="src/img/wallpaper/1280x720.png" target="_blank">1280x720</a>,
<a href="src/img/wallpaper/1280x800.png" target="_blank">1280x800</a>,
<a href="src/img/wallpaper/1280x960.png" target="_blank">1280x960</a>,
<a href="src/img/wallpaper/1280x1024.png" target="_blank">1280x1024</a>,
<a href="src/img/wallpaper/1366x768.png" target="_blank">1366x768</a>,
<a href="src/img/wallpaper/1400x1050.png" target="_blank">1400x1050</a>,
<a href="src/img/wallpaper/1440x900.png" target="_blank">1440x900</a>,
<a href="src/img/wallpaper/1600x1200.png" target="_blank">1600x1200</a>,
<a href="src/img/wallpaper/1680x1050.png" target="_blank">1680x1050</a>,
<a href="src/img/wallpaper/1680x1200.png" target="_blank">1680x1200</a>,
<a href="src/img/wallpaper/1920x1080.png" target="_blank">1920x1080</a>,
<a href="src/img/wallpaper/1920x1200.png" target="_blank">1920x1200</a>,
<a href="src/img/wallpaper/1920x1440.png" target="_blank">1920x1440</a>,
<a href="src/img/wallpaper/2560x1440.png" target="_blank">2560x1440</a>,
<a href="src/img/wallpaper/3440x1440.png" target="_blank">3440x1440</a>
</p>
<h3 class="t-section__subline">Smartphone</h3>
<p class="t-section__intro">
<a href="src/img/wallpaper/1080x2160.png" target="_blank">1080x2160</a>,
<a href="src/img/wallpaper/1080x1920.png" target="_blank">1080x1920</a>,
<a href="src/img/wallpaper/1125x2436.png" target="_blank">1125x2436</a>
</p>
</div>
</main>
</div>

<footer class="footer" aria-label="footer">
<a href="https://www.9elements.com/contact" class="company-link" target="_blank">
<span class="company-link__label">We're open for business</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206 40">
<path fill="currentColor" d="M40.2 0v40H0V0h40.2zm-12 28.1l-.7.1H25l-8.6.1H15a29.1 29.1 0 00-4.1-.2l-.2.1-.1.5.1.2-.1.3v1.2l.2.2v.1h.2l.7.1H14l.5.1a114.7 114.7 0 006 0h.5a22.5 22.5 0 003 0 38.8 38.8 0 003.5-.3h.4l.9-.2c.1 0 .2 0 .2-.2h.3s.1-.4 0-.4H29l-.1-.3c0-.1.7-.2.3-.2l.4-.2s-.3-.3-.5-.3c0-.2.6-.2.4-.3h-.1c-.8 0 .3-.1.5-.2l-.7-.1H28.4h-.1zm170.6-16.4c5.6 0 6.7 3.7 7 5.2v.2h-4c-.3-1.4-1.2-2-2.8-2-.7 0-1.3 0-1.7.3-.5.3-.7.8-.7 1.3 0 1 .7 1.4 1.8 1.6l2.5.6c3.5.7 5 2.1 5 4.6 0 3.3-2.7 5.3-6.9 5.3-2 0-3.7-.4-5-1.3a5.7 5.7 0 01-2.4-4V23h4c.3 1.5 1.6 2.4 3.5 2.4 1.6 0 2.4-.6 2.4-1.5 0-.8-.5-1.2-1.6-1.5h-.2l-2.7-.6c-3.3-.7-4.8-2.3-4.8-4.8 0-1.6.7-3 1.8-4 1.2-.9 2.8-1.4 4.8-1.4zm-39.6.4l8.1 9.4v-9.4h4v16.4h-3.1l-8-9.2v9.2h-4V12.1h3zm-7.1 0v3.4h-8.4v3.2h7.3v3.4h-7.3v3h8.4v3.4h-12.4V12.1H152zm-62.8 0v13h8.2v3.4H85.3V12.1h4zm-8 0v3.4h-8.5v3.2h7.4v3.4h-7.4v3h8.4v3.4H68.8V12.1h12.4zm108 0v3.5H184v12.9h-4V15.6h-5.3v-3.5h14.6zm-76 0v3.4H105v3.2h7.3v3.4H105v3h8.4v3.4H101V12.1h12.4zm-55-.4a7 7 0 014.9 1.8 5.7 5.7 0 011.8 4.2c0 1.2-.5 2.5-1.4 4l-4.3 6.8h-4.5l3.1-5c-3.7-.1-6.2-2.5-6.2-5.7 0-3.5 2.8-6 6.6-6zm62 .4l6 8.9 5.9-8.9h3v16.4h-4V20l-3.8 5.9h-2.2l-3.9-5.9v8.5h-4V12.1h3zM29 9.3l-.3.1-.2.1-1 .5-.5.3-.8.5-.5.3-.4.2-.8.5-1.4 1-1 .7c-.2 0-.4.2-.5.3l-.6.4-.5.4-1 .6-.1.2c-1.4-1.2-2.8-2.2-4.2-3.5l-2-1.7-.3-.3-.4-.3h-.2c-.3 0-1 1.1-1 1-.2.3-.7.7-.6 1 0 .4.5.9 1 1.2l.3.2c.7.6 1.4 1 2.1 1.7l1 .8.8.7 1.2 1-.6.5-.7.6-1.6 1.3-.3.4-.7.5-.4.4c-.2 0-.3.2-.4.3l-.5.4-.8.7v.1l-.2.3v.3l.1.5c.1.3.2.5.1.8 0 .4.3.8.4.9l.2.2h.1v.1h.3v-.1l.2-.2h.1l.2-.2c.4-.4-.4.2-.2 0l1.2-1.1 1-1 1.5-1.2.3-.2v.1l1-.8.8-.7.2-.2.7-.5.3-.2.5.4.7.7.4.3.2.2.2.1-.6-.6c.3 0 1.7 1.3 1.9 1.5 0-.2.4 0 .7.3l.2.2 1.9 1.6v-.1l-.1-.1-.3-.4c.5.2.8.7 1.2 1V24l.3.2h.2l.4.3c.5.2 1 .7 1.4 1-.2-.2-.6-.5-.7-.8a21 21 0 00-1.5-1.4c.4-.2.6.5.9.4l-.3-.2c.2 0 .5.4.5.4l.3.2.4.2v.1c.3.2.8.7 1 .7L29 25l.8.6v-.2l.4.4c.1-.2-1.1-1.1-1.2-1.2l-.3-.3c.1 0-.2-.2-.1-.3l1.3.9-1-.8 1.4 1v-.2l.2.2.3.2.5.3-.2-.1-1.3-1.2a24 24 0 00-.6-.6H29a51 51 0 01-2.7-2.2l-5-4.3h.2l.1-.1.3-.2h.2l.1-.1v-.1c.2 0 .3-.2.4-.3l.2-.1.9-.6.4-.3.1-.1.4-.3.7-.5.3-.2h.2l.2-.3h.2c.2-.2.4-.4.6-.4l.1-.1.4-.3.8-.5.3-.1.6-.5h.2l.5-.5-1.3.8.1-.1a6.3 6.3 0 001-.7v-.2h-.1l-.4.2-.8.6c-.2 0-.4.1-.5.3a3 3 0 01-.6.3l-.2.1c-.1 0 0 0 0 0l.3-.3 1-.6 1.3-.8V11l.2-.2.2-.1.1-.1h-.2-.1v-.1l.4-.2h-.4l-.5.2-.3.1.3-.3-.6.3h-.2v-.1l.2-.1.2-.1c.2 0 .3-.2.4-.3.2 0 .3-.2.5-.3l-1.2.6h-.4c.1 0 .2 0 .3-.2l.2-.1.1-.1.6-.3-.4.1.2-.2-.2.1v-.1h-.3l.2-.1.1-.2zM58.4 15c-1.6 0-3 1.2-3 2.8 0 1.5 1.4 2.7 3 2.7s2.9-1.2 2.9-2.7c0-1.6-1.3-2.8-3-2.8z" fill-rule="evenodd"/>
</svg>
</a>
<div class="footer__body">
Made with
<span class="footer__heart">💜</span>
in
Bochum |
<a href="https://9elements.com/imprint" target="_blank">Imprint</a> |
<a href="https://9elements.com/privacy" target="_blank">Data Privacy</a>
</div>
</footer>

<div class="cookies-eu-banner" id="cookies-eu-banner" style="display: none;">
<div class="cookies-eu-banner__bd">
We care about your data, and we'd love to use analytics to make your experience better. <a href='https://9elements.com/privacy' target='_blank'>Privacy Policy</a>.
</div>
<div class="cookies-eu-banner__cta">
<button id="cookies-eu-reject" class="cookies-eu-banner__button">No, thanks.</button>
<button id="cookies-eu-accept" class="cookies-eu-banner__button cookies-eu-banner__button--okay">Okay!</button>
</div>
</div>
<script>
new CookiesEuBanner(function(){
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PDZ5MRH');
}, true);
</script>
<script src="src/js/highlight-and-copy.js"></script>
</body>
</html>

···