Web Design Guide
2024-10-28 08:44:01 | 2.0.0
<div class="container -full">
<div class="grid-x small-up-3 medium-up-6">
<div class="cell -bg-white -cs-dark">
<h2>Color scheme -cs-dark in <a href="#">white background</a></h2>
<p>Color scheme -cs-dark in <a href="#">white background</a></p>
<ul class=" list -unordered">
<li class="list__item">unordered <a href='#'>list</a>
</li>
<li class="list__item">unordered <a href='#'>list</a>
</li>
</ul>
<ol class=" list -ordered">
<li class="list__item">ordered <a href='#'>list</a>
</li>
<li class="list__item">ordered <a href='#'>list</a>
</li>
</ol>
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
<li class="list__item">nested chevron
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
</ul>
</li>
</ul>
<button class=" btn -icon-only -chevron-right" href="#">
</button><br>
<button class=" btn -icon-only -fill -chevron-right" href="#">
</button><br>
<button class=" btn "> Mehr
</button><br>
<button class=" btn -cta -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -secondary -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -disabled -chevron-right" href="#"> Mehr
</button>
</div>
<div class="cell -bg-gray-light -cs-dark">
<h2>Color scheme -cs-dark in <a href="#">gray-light background</a></h2>
<p>Color scheme -cs-dark in <a href="#">gray-light background</a></p>
<ul class=" list -unordered">
<li class="list__item">unordered <a href='#'>list</a>
</li>
<li class="list__item">unordered <a href='#'>list</a>
</li>
</ul>
<ol class=" list -ordered">
<li class="list__item">ordered <a href='#'>list</a>
</li>
<li class="list__item">ordered <a href='#'>list</a>
</li>
</ol>
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
<li class="list__item">nested chevron
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
</ul>
</li>
</ul>
<button class=" btn -icon-only -chevron-right" href="#">
</button><br>
<button class=" btn -icon-only -fill -chevron-right" href="#">
</button><br>
<button class=" btn "> Mehr
</button><br>
<button class=" btn -cta -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -secondary -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -disabled -chevron-right" href="#"> Mehr
</button>
</div>
<div class="cell -bg-gray-dark -cs-dark">
<h2>Color scheme -cs-dark in <a href="#">gray-dark background</a></h2>
<p>Color scheme -cs-dark in <a href="#">gray-dark background</a></p>
<ul class=" list -unordered">
<li class="list__item">unordered <a href='#'>list</a>
</li>
<li class="list__item">unordered <a href='#'>list</a>
</li>
</ul>
<ol class=" list -ordered">
<li class="list__item">ordered <a href='#'>list</a>
</li>
<li class="list__item">ordered <a href='#'>list</a>
</li>
</ol>
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
<li class="list__item">nested chevron
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
</ul>
</li>
</ul>
<button class=" btn -icon-only -chevron-right" href="#">
</button><br>
<button class=" btn -icon-only -fill -chevron-right" href="#">
</button><br>
<button class=" btn "> Mehr
</button><br>
<button class=" btn -cta -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -secondary -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -disabled -chevron-right" href="#"> Mehr
</button>
</div>
<div class="cell -bg-black -cs-white">
<h2>Color scheme -cs-white in <a href="#">black background</a></h2>
<p>Color scheme -cs-white in <a href="#">black background</a></p>
<ul class=" list -unordered">
<li class="list__item">unordered <a href='#'>list</a>
</li>
<li class="list__item">unordered <a href='#'>list</a>
</li>
</ul>
<ol class=" list -ordered">
<li class="list__item">ordered <a href='#'>list</a>
</li>
<li class="list__item">ordered <a href='#'>list</a>
</li>
</ol>
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
<li class="list__item">nested chevron
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
</ul>
</li>
</ul>
<button class=" btn -icon-only -chevron-right" href="#">
</button><br>
<button class=" btn -icon-only -fill -chevron-right" href="#">
</button><br>
<button class=" btn "> Mehr
</button><br>
<button class=" btn -cta -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -secondary -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -disabled -chevron-right" href="#"> Mehr
</button>
</div>
<div class="cell -bg-primary -cs-light">
<h2>Color scheme -cs-light in <a href="#">primary background</a></h2>
<p>Color scheme -cs-light in <a href="#">primary background</a></p>
<ul class=" list -unordered">
<li class="list__item">unordered <a href='#'>list</a>
</li>
<li class="list__item">unordered <a href='#'>list</a>
</li>
</ul>
<ol class=" list -ordered">
<li class="list__item">ordered <a href='#'>list</a>
</li>
<li class="list__item">ordered <a href='#'>list</a>
</li>
</ol>
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
<li class="list__item">nested chevron
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
</ul>
</li>
</ul>
<button class=" btn -icon-only -chevron-right" href="#">
</button><br>
<button class=" btn -icon-only -fill -chevron-right" href="#">
</button><br>
<button class=" btn "> Mehr
</button><br>
<button class=" btn -cta -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -secondary -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -disabled -chevron-right" href="#"> Mehr
</button>
</div>
<div class="cell -bg-secondary -cs-light">
<h2>Color scheme -cs-light in <a href="#">secondary background</a></h2>
<p>Color scheme -cs-light in <a href="#">secondary background</a></p>
<ul class=" list -unordered">
<li class="list__item">unordered <a href='#'>list</a>
</li>
<li class="list__item">unordered <a href='#'>list</a>
</li>
</ul>
<ol class=" list -ordered">
<li class="list__item">ordered <a href='#'>list</a>
</li>
<li class="list__item">ordered <a href='#'>list</a>
</li>
</ol>
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
<li class="list__item">nested chevron
<ul class=" list -chevron">
<li class="list__item">chevron <a href='#'>list</a>
</li>
<li class="list__item"><a href='#'>chevron list</a>
</li>
</ul>
</li>
</ul>
<button class=" btn -icon-only -chevron-right" href="#">
</button><br>
<button class=" btn -icon-only -fill -chevron-right" href="#">
</button><br>
<button class=" btn "> Mehr
</button><br>
<button class=" btn -cta -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -secondary -chevron-right" href="#"> Mehr
</button><br>
<button class=" btn -disabled -chevron-right" href="#"> Mehr
</button>
</div>
</div>
</div>
<div class="container -full -st-medium">
<div class="grid-x small-up-4">
<div class="cell">
<h2>Color scheme none</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--simple">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -light">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--overlay -light -bottom">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-white -cs-dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-black -cs-white">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-secondary -cs-light ">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--horizontal">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
</div>
</div>
</a></div>
</div>
</div>
<div class="cell -bg-gray-light -cs-dark">
<h2>Color scheme -cs-dark in gray-light background</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--simple">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -light">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--overlay -light -bottom">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-white -cs-dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-black -cs-white">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-secondary -cs-light ">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--horizontal">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
</div>
</div>
</a></div>
</div>
</div>
<div class="cell -bg-black -cs-white">
<h2>Color scheme -cs-white in black background</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--simple">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -light">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--overlay -light -bottom">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-white -cs-dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-black -cs-white">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-secondary -cs-light ">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--horizontal">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
</div>
</div>
</a></div>
</div>
</div>
<div class="cell -bg-primary -cs-light">
<h2>Color scheme -cs-light in primary background</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--simple">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -light">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--highlight -dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--overlay -light -bottom">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__signet"><span>New</span></div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-white -cs-dark">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-black -cs-white">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell large-4"><a href="#" class="link__teaser">
<div class=" teaser teaser--tile -bg-secondary -cs-light ">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
<div class="teaser__cta">
<span class="teaser__btn-wrapper">
<span class="teaser__btn btn "> More
</span>
</span>
</div>
</div>
</div>
</a></div>
<div class="cell"><a href="#" class="link__teaser">
<div class=" teaser teaser--horizontal">
<div class="teaser__visual">
<div class="teaser__image media ">
<img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
</div>
</div>
<div class="teaser__content">
<span class="teaser__date -event">10.01.12</span>
<span class="teaser__headline h2">
Handwerker und Bauunternehmer
</span>
<div class="teaser__text">
<p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
</div>
</div>
</div>
</a></div>
</div>
</div>
</div>
</div>
<div class="container -full">
<div class="grid-x small-up-3 medium-up-6">
<div class="cell -bg-white -cs-dark">
<h2>Color scheme -cs-dark in <a href="#">white background</a></h2>
<p>Color scheme -cs-dark in <a href="#">white background</a></p>
{{render '@atoms-list' unorderedList}}
{{render '@atoms-list' orderedList}}
{{render '@atoms-list' chevronList}}
{{render '@atoms-button--icon'}}<br>
{{render '@atoms-button--filled-icon'}}<br>
{{render '@atoms-button'}}<br>
{{render '@atoms-button--cta'}}<br>
{{render '@atoms-button--secondary'}}<br>
{{render '@atoms-button--disabled'}}
</div>
<div class="cell -bg-gray-light -cs-dark">
<h2>Color scheme -cs-dark in <a href="#">gray-light background</a></h2>
<p>Color scheme -cs-dark in <a href="#">gray-light background</a></p>
{{render '@atoms-list' unorderedList}}
{{render '@atoms-list' orderedList}}
{{render '@atoms-list' chevronList}}
{{render '@atoms-button--icon'}}<br>
{{render '@atoms-button--filled-icon'}}<br>
{{render '@atoms-button'}}<br>
{{render '@atoms-button--cta'}}<br>
{{render '@atoms-button--secondary'}}<br>
{{render '@atoms-button--disabled'}}
</div>
<div class="cell -bg-gray-dark -cs-dark">
<h2>Color scheme -cs-dark in <a href="#">gray-dark background</a></h2>
<p>Color scheme -cs-dark in <a href="#">gray-dark background</a></p>
{{render '@atoms-list' unorderedList}}
{{render '@atoms-list' orderedList}}
{{render '@atoms-list' chevronList}}
{{render '@atoms-button--icon'}}<br>
{{render '@atoms-button--filled-icon'}}<br>
{{render '@atoms-button'}}<br>
{{render '@atoms-button--cta'}}<br>
{{render '@atoms-button--secondary'}}<br>
{{render '@atoms-button--disabled'}}
</div>
<div class="cell -bg-black -cs-white">
<h2>Color scheme -cs-white in <a href="#">black background</a></h2>
<p>Color scheme -cs-white in <a href="#">black background</a></p>
{{render '@atoms-list' unorderedList}}
{{render '@atoms-list' orderedList}}
{{render '@atoms-list' chevronList}}
{{render '@atoms-button--icon'}}<br>
{{render '@atoms-button--filled-icon'}}<br>
{{render '@atoms-button'}}<br>
{{render '@atoms-button--cta'}}<br>
{{render '@atoms-button--secondary'}}<br>
{{render '@atoms-button--disabled'}}
</div>
<div class="cell -bg-primary -cs-light">
<h2>Color scheme -cs-light in <a href="#">primary background</a></h2>
<p>Color scheme -cs-light in <a href="#">primary background</a></p>
{{render '@atoms-list' unorderedList}}
{{render '@atoms-list' orderedList}}
{{render '@atoms-list' chevronList}}
{{render '@atoms-button--icon'}}<br>
{{render '@atoms-button--filled-icon'}}<br>
{{render '@atoms-button'}}<br>
{{render '@atoms-button--cta'}}<br>
{{render '@atoms-button--secondary'}}<br>
{{render '@atoms-button--disabled'}}
</div>
<div class="cell -bg-secondary -cs-light">
<h2>Color scheme -cs-light in <a href="#">secondary background</a></h2>
<p>Color scheme -cs-light in <a href="#">secondary background</a></p>
{{render '@atoms-list' unorderedList}}
{{render '@atoms-list' orderedList}}
{{render '@atoms-list' chevronList}}
{{render '@atoms-button--icon'}}<br>
{{render '@atoms-button--filled-icon'}}<br>
{{render '@atoms-button'}}<br>
{{render '@atoms-button--cta'}}<br>
{{render '@atoms-button--secondary'}}<br>
{{render '@atoms-button--disabled'}}
</div>
</div>
</div>
<div class="container -full -st-medium">
<div class="grid-x small-up-4">
<div class="cell">
<h2>Color scheme none</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--simple'}}</div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-highlight'}}</div>
<div class="cell">{{render '@molecules-teaser--dark-highlight'}}</div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-overlay'}}</div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-white'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-black'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-secondary'}}</div>
<div class="cell">{{render '@molecules-teaser--horizontal'}}</div>
</div>
</div>
<div class="cell -bg-gray-light -cs-dark">
<h2>Color scheme -cs-dark in gray-light background</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--simple'}}</div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-highlight'}}</div>
<div class="cell">{{render '@molecules-teaser--dark-highlight'}}</div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-overlay'}}</div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-white'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-black'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-secondary'}}</div>
<div class="cell">{{render '@molecules-teaser--horizontal'}}</div>
</div>
</div>
<div class="cell -bg-black -cs-white">
<h2>Color scheme -cs-white in black background</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--simple'}}</div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-highlight'}}</div>
<div class="cell">{{render '@molecules-teaser--dark-highlight'}}</div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-overlay'}}</div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-white'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-black'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-secondary'}}</div>
<div class="cell">{{render '@molecules-teaser--horizontal'}}</div>
</div>
</div>
<div class="cell -bg-primary -cs-light">
<h2>Color scheme -cs-light in primary background</h2>
<div class="grid-x">
<div class="cell">
<h3>Simple teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--simple'}}</div>
<div class="cell">
<h3>Light Highlight teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-highlight'}}</div>
<div class="cell">{{render '@molecules-teaser--dark-highlight'}}</div>
<div class="cell">
<h3>Light Overlay teaser</h3>
</div>
<div class="cell">{{render '@molecules-teaser--light-overlay'}}</div>
<div class="cell">
<h3>Tile teasers</h3>
</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-white'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-black'}}</div>
<div class="cell large-4">{{render '@molecules-teaser--tile-secondary'}}</div>
<div class="cell">{{render '@molecules-teaser--horizontal'}}</div>
</div>
</div>
</div>
</div>
{
"unorderedList": {
"tag": "ul",
"modifiers": "-unordered",
"items": [
{
"text": "unordered <a href='#'>list</a>"
},
{
"text": "unordered <a href='#'>list</a>"
}
]
},
"orderedList": {
"tag": "ol",
"modifiers": "-ordered",
"items": [
{
"text": "ordered <a href='#'>list</a>"
},
{
"text": "ordered <a href='#'>list</a>"
}
]
},
"chevronList": {
"tag": "ul",
"modifiers": "-chevron",
"items": [
{
"text": "chevron <a href='#'>list</a>"
},
{
"text": "<a href='#'>chevron list</a>"
},
{
"text": "nested chevron",
"tag": "ul",
"modifiers": "-chevron",
"items": [
{
"text": "chevron <a href='#'>list</a>"
},
{
"text": "<a href='#'>chevron list</a>"
}
]
}
]
}
}
-
Content:
/* Color Scheme */ $dark-color-scheme: map-get($color-schemes, $color-scheme-dark); $light-color-scheme: map-get($color-schemes, $color-scheme-light); @include custom-scheme-variant($dark-color-scheme, $light-color-scheme); @each $name, $color-scheme in $color-schemes { .-cs-#{$name} { @include color-scheme-variant($color-scheme); @include root-color-scheme-variant($color-scheme); } } @include breakpoint(pre-medium down) { @each $name, $color-scheme in $color-schemes { .-cs-mobile-#{$name} { @include color-scheme-variant($color-scheme); @include root-color-scheme-variant($color-scheme); } } } // Accordion specific case @each $background-selector, $background-value in $accordion-schemes { #{$background-selector} { @include accordion-color-scheme-variant($background-value, $background-value); } } - URL: /components/raw/color-scheme/_color-scheme.scss
- Filesystem Path: src/components/03-css-utilities/02-helpers/color-scheme/_color-scheme.scss
- Size: 854 Bytes
- Handle: @color-scheme
- Preview:
- Filesystem Path: src/components/03-css-utilities/02-helpers/color-scheme/color-scheme.hbs
- References (15): @atoms-list, @atoms-button--icon, @atoms-button--filled-icon, @atoms-button, @atoms-button--cta, @atoms-button--secondary, @atoms-button--disabled, @molecules-teaser--simple, @molecules-teaser--light-highlight, @molecules-teaser--dark-highlight, @molecules-teaser--light-overlay, @molecules-teaser--tile-white, @molecules-teaser--tile-black, @molecules-teaser--tile-secondary, @molecules-teaser--horizontal
There are no notes for this item.