4 #Organisms Organisms
Definition of all available Organisms.
Source:
assets/styles/styleguide.scss, line 95
Source:
assets/styles/styleguide.scss, line 105
Example
Markup
<form class="address-form">
<div class="input">
<label for="company" class="input__label">Firmenname</label>
<input type="text" name="company" id="company" class="input__widget">
</div>
<div class="input">
<label for="address" class="input__label">Strasse & Nummer</label>
<input type="text" name="address" id="address" class="input__widget">
</div>
<div class="input">
<label for="zip" class="input__label">PLZ</label>
<input type="text" name="zip" id="zip" class="input__widget">
</div>
<div class="input">
<label for="city" class="input__label">Ort</label>
<input type="text" name="city" id="city" class="input__widget">
</div>
<div class="input">
<label for="phone" class="input__label">Telefon</label>
<input type="tel" name="phone" id="phone" class="input__widget">
</div>
</form>
Source:
assets/styles/04-organisms/01-base/_address-form.scss, line 1
Example
Title
Farbe Blau, Grösse M
69.90
120.00
Markup
<div class="basket-product-list">
<div class="product-card product-card--basket">
<a href="javascript://" class="product-card__link">
<div class="product-card__image">
<div class="image image--square image--fill">
<div class="image__image"><img src="images/test-image.jpg"></div>
</div>
</div>
<h4 class="product-card__title">
Title
</h4>
<div class="product-card__meta">
<span class="availability availability--good"></span>
Hersteller #545587
</div>
<div class="product-card__info">
Farbe Blau, Grösse M
</div>
</a>
<form class="product-card__actions card-actions card-actions--extended">
<div class="card-actions__quantity quantity quantity--buttons">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<button value="-" class="quantity__minus">-</button>
<button value="+" class="quantity__plus">+</button>
</div>
<button href="javascript://" class="card-actions__primary card-actions__discreet btn btn--plain btn--icon icon icon-menu-more"></button>
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
</form>
<div class="product-card__price price price--stacked">
<span class="price__amount">69.90</span>
</div>
</div>
<div class="product-card product-card--basket">
<a href="javascript://" class="product-card__link">
<div class="product-card__image">
<div class="image image--square image--fill">
<div class="image__image"><img src="images/test-image.jpg"></div>
</div>
</div>
<h4 class="product-card__title">
Title
</h4>
<div class="product-card__meta">
<span class="availability availability--good"></span>
Hersteller #545587
</div>
<div class="product-card__info">
Farbe Blau, Grösse M
</div>
</a>
<form class="product-card__actions card-actions card-actions--extended">
<div class="card-actions__quantity quantity quantity--buttons">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<button value="-" class="quantity__minus">-</button>
<button value="+" class="quantity__plus">+</button>
</div>
<button href="javascript://" class="card-actions__primary card-actions__discreet btn btn--plain btn--icon icon icon-menu-more"></button>
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
</form>
<div class="product-card__price price price--reduced price--stacked">
<span class="price__amount">69.90</span>
<span class="price__strikethrough">120.00</span>
</div>
</div>
</div>
Source:
assets/styles/04-organisms/01-base/_basket-product-list.scss, line 1
4.1.2.1 #Organisms.Base.Basket Product List.Variables Variables
Parameters:
-
$rds--basket-product-list--breakpoint#{$rds--basket-product-list--breakpoint}
Source:
assets/styles/04-organisms/01-base/_basket-product-list.scss, line 105
Example
Gesamtsumme
| Warenwert inkl. MwSt. | 4'220.40 |
|---|---|
| 7.7% Mehrwertsteuer | 324.95 |
| Versandkosten | 7.60 |
| Gesamtsumme | 4'228.00 |
- Gesamtsumme 4'228.00
- zur Kasse
Markup
<div class="basket-summary basket-summary--has-summary">
<h3 class="basket-summary__title">Gesamtsumme</h3>
<table class="basket-summary__table totals-table">
<tbody>
<tr>
<th>Warenwert inkl. MwSt.</th>
<td>4'220.40</td>
</tr>
<tr>
<th>7.7% Mehrwertsteuer</th>
<td>324.95</td>
</tr>
<tr>
<th>Versandkosten</th>
<td>7.60</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Gesamtsumme</th>
<td>4'228.00</td>
</tr>
</tfoot>
</table>
<div class="basket-summary__message message">
<ul class="basket-summary__actions message__actions message-actions">
<li class="basket-summary__summary message-actions__double-text">
Gesamtsumme <strong>4'228.00</strong>
</li>
<li>
<a class="basket-summary__btn btn btn--shout" href="javascript://">zur Kasse</a>
</li>
</ul>
</div>
<div class="coupon">
<div class="coupon__wrap">
<input type="checkbox" id="coupon-toggle" name="coupon-toggle" class="coupon__toggle" value="1">
<label for="coupon-toggle" class="coupon__trigger bar">
<h3 class="coupon__title bar__title card-title card-title--left-zero">Gutschein eingeben</h3>
</label>
<div class="coupon__content">
<div class="input">
<input type="text" name="coupon_code" class="input__widget" placeholder="Gutscheincode" id="coupon_code" value="" />
</div>
<button class="coupon__btn btn" type="submit" name="apply_coupon" value="1">Einlösen</button>
</div>
</div>
</div>
</div>
Source:
assets/styles/04-organisms/01-base/_basket-summary.scss, line 1
4.1.3.1 #Organisms.Base.Basket Summary.Variables Variables
Parameters:
-
$rds--basket-summary--breakpoint#{$rds--basket-summary--breakpoint}
Source:
assets/styles/04-organisms/01-base/_basket-summary.scss, line 125
Example
Markup
<div class="coupon">
<div class="coupon__wrap">
<input type="checkbox" id="coupon-toggle" name="coupon-toggle" class="coupon__toggle" value="1">
<label for="coupon-toggle" class="coupon__trigger bar">
<h3 class="coupon__title bar__title card-title card-title--left-zero">Gutschein eingeben</h3>
</label>
<div class="coupon__content">
<div class="input">
<input type="text" name="coupon_code" class="input__widget" placeholder="Gutscheincode" id="coupon_code" value="" />
</div>
<button class="coupon__btn btn" type="submit" name="apply_coupon" value="1">Einlösen</button>
</div>
</div>
</div>
Source:
assets/styles/04-organisms/01-base/_coupon.scss, line 1
4.1.4.1 #Organisms.Base.Coupon.Variables Variables
Parameters:
-
$rds--coupon--breakpoint#{$rds--coupon--breakpoint}
Source:
assets/styles/04-organisms/01-base/_coupon.scss, line 106
Example
Markup
<form class="login-form">
<div class="input">
<label for="email" class="input__label">E-Mail Adresse oder Benutzername</label>
<input type="email" name="email" id="email" class="input__widget">
</div>
<div class="input">
<label for="password" class="input__label">Passwort</label>
<input type="password" name="password" id="password" class="input__widget">
</div>
<a href="javascript" class="login-form__forgot-password">Passwort vergessen?</a>
<button class="login-form__submit btn btn--shout" type="submit">Anmelden</button>
</form>
Source:
assets/styles/04-organisms/01-base/_login-form.scss, line 1
Example
- Datum
- 01.01.2019
- Bestellnummer
- 4567893
- Gesamtbetrag
- 4228.00
- Bezahlungsart
- Kreditkarte
- Kontakt E-Mail
- name@provider.tld
- Lieferadresse
-
Raptus AG
Gartenweg 1
3250 Lyss - Rechnungsadresse
-
Raptus AG
Gartenweg 1
3250 Lyss - Anmerkungen
- Dies ist eine normale Bestellung benötigt eigentlich keine Anmerkung
- Status
- In Bearbeitung
Bestellte Produkte
| Warenwert inkl. MwSt. | 4'220.40 |
|---|---|
| 7.7% Mehrwertsteuer | 324.95 |
| Versandkosten | 7.60 |
| Gesamtsumme | 4'228.00 |
Markup
<div class="order-detail">
<dl class="order-detail__summary definition-list">
<dt>Datum</dt>
<dd>01.01.2019</dd>
<dt>Bestellnummer</dt>
<dd>4567893</dd>
<dt>Gesamtbetrag</dt>
<dd>4228.00</dd>
<dt>Bezahlungsart</dt>
<dd>Kreditkarte</dd>
<dt>Kontakt E-Mail</dt>
<dd><a href="javascript://">name@provider.tld</a></dd>
<dt>Lieferadresse</dt>
<dd>
Raptus AG<br>
Gartenweg 1<br>
3250 Lyss
</dd>
<dt>Rechnungsadresse</dt>
<dd>
Raptus AG<br>
Gartenweg 1<br>
3250 Lyss
</dd>
<dt>Anmerkungen</dt>
<dd>Dies ist eine normale Bestellung benötigt eigentlich keine Anmerkung</dd>
<dt>Status</dt>
<dd class="definition-list__price-text">In Bearbeitung</dd>
</dl>
<div class="order-detail__products-title card-title card-title--left-zero card-title--large">
<h4 class="card-title__title">Bestellte Produkte</h4>
</div>
<div class="order-detail__products basket-product-list">
<div class="product-card product-card--basket">
<a href="javascript://" class="product-card__link">
<div class="product-card__image">
<div class="image image--square image--fill">
<div class="image__image"><img src="images/test-image.jpg"></div>
</div>
</div>
<h4 class="product-card__title">
Title
</h4>
<div class="product-card__meta">
<span class="availability availability--good"></span>
Hersteller #545587
</div>
<div class="product-card__info">
Farbe Blau, Grösse M
</div>
</a>
<div class="product-card__price price price--stacked">
<span class="price__amount">69.90</span>
</div>
<div class="product-card__actions card-actions card-actions--extended">
<div class="card-actions__quantity quantity">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
</div>
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
</div>
</div>
<div class="product-card product-card--basket">
<a href="javascript://" class="product-card__link">
<div class="product-card__image">
<div class="image image--square image--fill">
<div class="image__image"><img src="images/test-image.jpg"></div>
</div>
</div>
<h4 class="product-card__title">
Title
</h4>
<div class="product-card__meta">
<span class="availability availability--good"></span>
Hersteller #545587
</div>
<div class="product-card__info">
Farbe Blau, Grösse M
</div>
</a>
<div class="product-card__price price price--reduced price--stacked">
<span class="price__amount">69.90</span>
<span class="price__strikethrough">120.00</span>
</div>
<div class="product-card__actions card-actions card-actions--extended">
<div class="card-actions__quantity quantity">
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
</div>
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
</div>
</div>
</div>
<div class="order-detail__totals">
<table class="totals-table">
<tbody>
<tr>
<th>Warenwert inkl. MwSt.</th>
<td>4'220.40</td>
</tr>
<tr>
<th>7.7% Mehrwertsteuer</th>
<td>324.95</td>
</tr>
<tr>
<th>Versandkosten</th>
<td>7.60</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Gesamtsumme</th>
<td>4'228.00</td>
</tr>
</tfoot>
</table>
</div>
</div>
Source:
assets/styles/04-organisms/01-base/_order-detail.scss, line 1
4.1.7.1 #Organisms.Base.Order Detail.Variables Variables
Parameters:
-
$rds--order-detail--breakpoint#{$rds--order-detail--breakpoint} -
$rds--order-detail--totals--background#{$rds--order-detail--totals--background}
Source:
assets/styles/04-organisms/01-base/_order-detail.scss, line 170
Example
142 von 256 Produkte
Alle Produkte zeigen und Filter zurücksetzen
Darstellung
Markup
<input class="toggle" type="radio" name="products" id="product--list">
<input class="toggle" type="radio" name="products" id="product--grid" checked="checked">
<div class="page-header">
<nav class="page-header__breadcrumb breadcrumb">
<ol>
<li>
<a href="javascript://">Home</a>
</li>
<li>
<a href="javascript://">Musik</a>
</li>
</ol>
</nav>
<div class="page-header__bar bar bar--return">
<h1 class="bar__title">
Musical, Theater & Folk
</h1>
<div class="bar__secondary bar-actions">
<ul class="bar-actions__actions">
<li>
<label for="product--list" class="btn btn--plain btn--icon icon icon-view-vertical"></label>
</li>
<li>
<label for="product--grid" class="btn btn--plain btn--icon icon icon-view-horizontal"></label>
</li>
<li>
<button class="btn btn--plain btn--icon icon icon-filter"></button>
</li>
</ul>
</div>
</div>
<div class="page-header__info">
142 von 256 Produkte
<a class="page-header__reset-filter" href="javascript://">Alle Produkte zeigen und Filter zurücksetzen</a>
</div>
<div class="page-header__actions">
<div class="page-header__action page-header__action--ordering">
<label for="ordering">
Sortiere nach
</label>
<div class="select">
<select type="text" id="ordering" class="input__widget select__widget" size="1">
<option>Verfügbarkeit</option>
<option>Preis absteigend</option>
<option>Preis aufsteigend</option>
</select>
</div>
</div>
<div class="page-header__action page-header__action--display">
<span>
Darstellung
</span>
<div>
<label for="product--list" class="page-header__action-icon icon icon-view-vertical"></label><label for="product--grid" class="page-header__action-icon icon icon-view-horizontal"></label>
</div>
</div>
</div>
</div>
Source:
assets/styles/04-organisms/01-base/_page-header.scss, line 1
4.1.8.1 #Organisms.Base.Page Header.Variables Variables
Parameters:
-
$rds--page-header--breakpoint#{$rds--page-header--breakpoint} -
$rds--page-header--shadow#{$rds--page-header--shadow}
Source:
assets/styles/04-organisms/01-base/_page-header.scss, line 234
Source:
assets/styles/04-organisms/_import-blocks.scss, line 1
Example
Titel
The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
Titel
The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times.
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
Markup
<article class="block">
<header class="block__header">
<h2 class="block__title">Titel</h2>
<div class="block__text wysiwyg">
<p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times.</p>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</header>
<section class="block__content">
[BLOCK CONTENT]
</section>
<p class="block__overview">
<a href="javascript://">Overview</a>
</p>
</article>
<article class="block block--dark">
<header class="block__header">
<h2 class="block__title">Titel</h2>
<div class="block__text wysiwyg">
<p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times.</p>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</header>
<section class="block__content">
[BLOCK CONTENT]
</section>
<p class="block__overview">
<a href="javascript://">Overview</a>
</p>
</article>
Source:
assets/styles/04-organisms/04-blocks/_block.scss, line 1
4.4.1.1 #Organisms.Blocks.Block.Variables Variables
Parameters:
-
$rds--block--background--light#{$rds--block--background--light} -
$rds--block--background--dark#{$rds--block--background--dark}
Source:
assets/styles/04-organisms/04-blocks/_block.scss, line 150