Raptus Design Theme

2 #Atoms Atoms

Definition of all available Atoms.

Source: assets/styles/styleguide.scss, line 11
Source: assets/styles/styleguide.scss, line 21

2.1.1 #Atoms.Assets.Colors Colors

The following colors are available.

Brand
  • Default

    #{$rds--brand}
    .bg--brand
    .text--brand

  • Weak

    #{$rds--brand-weak}
    .bg--brand-weak
    .text--brand-weak

  • Strong

    #{$rds--brand-strong}
    .bg--brand-strong
    .text--brand-strong

Secondary
  • Default

    #{$rds--secondary}
    .bg--secondary
    .text--secondary

  • Weak

    #{$rds--secondary-weak}
    .bg--secondary-weak
    .text--secondary-weak

  • Strong

    #{$rds--secondary-strong}
    .bg--secondary-strong
    .text--secondary-strong

Gray
  • 900

    #{$rds--gray-900}
    .bg--gray-900
    .text--gray-900

  • 800

    #{$rds--gray-800}
    .bg--gray-800
    .text--gray-800

  • 700

    #{$rds--gray-700}
    .bg--gray-700
    .text--gray-700

  • 600

    #{$rds--gray-600}
    .bg--gray-600
    .text--gray-600

  • 500

    #{$rds--gray-500}
    .bg--gray-500
    .text--gray-500

  • 400

    #{$rds--gray-400}
    .bg--gray-400
    .text--gray-400

  • 300

    #{$rds--gray-300}
    .bg--gray-300
    .text--gray-300

  • 200

    #{$rds--gray-200}
    .bg--gray-200
    .text--gray-200

  • 100

    #{$rds--gray-100}
    .bg--gray-100
    .text--gray-100

  • 50

    #{$rds--gray-50}
    .bg--gray-50
    .text--gray-50

  • 0

    #{$rds--gray-0}
    .bg--gray-0
    .text--gray-0

Signal
  • Success

    #{$rds--signal-success}
    .bg--signal-success
    .text--signal-success

  • Warning

    #{$rds--signal-warning}
    .bg--signal-warning
    .text--signal-warning

  • Danger

    #{$rds--signal-danger}
    .bg--signal-danger
    .text--signal-danger

  • Info

    #{$rds--signal-info}
    .bg--signal-info
    .text--signal-info

Text
  • Dark

    #{$rds--text-dark}
    .text--text-dark

  • Light

    #{$rds--text-light}
    .text--text-light

  • Invert

    #{$rds--text-invert}
    .text--text-invert

  • Alternative

    #{$rds--text-alternative}
    .text--text-alternative

Source: assets/styles/02-atoms/01-assets/_color.scss, line 1
Source: assets/styles/styleguide.scss, line 29

2.2.1 #Atoms.LayerStyles.Color Color

The following layer style colors are available.

Color
  • Discreet

    #{$rds--layer-style--color--discreet}
    .bg--discreet
    .text--discreet

  • Normal

    #{$rds--layer-style--color--normal}
    .bg--normal
    .text--normal

  • Focus

    #{$rds--layer-style--color--focus}
    .bg--focus
    .text--focus

  • Shout

    #{$rds--layer-style--color--shout}
    .bg--shout
    .text--shout

Gray
  • Discreet

    #{$rds--layer-style--color--gray-discreet}
    .bg--gray-discreet
    .text--gray-discreet

  • Normal

    #{$rds--layer-style--color--gray-normal}
    .bg--gray-normal
    .text--gray-normal

  • Shout

    #{$rds--layer-style--color--gray-shout}
    .bg--gray-shout
    .text--gray-shout

Source: assets/styles/02-atoms/02-layer-styles/_color.scss, line 17

2.2.1.1 #Atoms.LayerStyles.Color.Variables Variables

Parameters:
  • $rds--layer-style--color--discreet
    #{$rds--layer-style--color--discreet}
  • $rds--layer-style--color--discreet--text
    #{$rds--layer-style--color--discreet--text}
  • $rds--layer-style--color--normal
    #{$rds--layer-style--color--normal}
  • $rds--layer-style--color--normal--text
    #{$rds--layer-style--color--normal--text}
  • $rds--layer-style--color--focus
    #{$rds--layer-style--color--focus}
  • $rds--layer-style--color--focus--text
    #{$rds--layer-style--color--focus--text}
  • $rds--layer-style--color--shout
    #{$rds--layer-style--color--shout}
  • $rds--layer-style--color--shout--text
    #{$rds--layer-style--color--shout--text}
  • $rds--layer-style--color--gray-discreet
    #{$rds--layer-style--color--gray-discreet}
  • $rds--layer-style--color--gray-discreet--text
    #{$rds--layer-style--color--gray-discreet--text}
  • $rds--layer-style--color--gray-normal
    #{$rds--layer-style--color--gray-normal}
  • $rds--layer-style--color--gray-normal--text
    #{$rds--layer-style--color--gray-normal--text}
  • $rds--layer-style--color--gray-shout
    #{$rds--layer-style--color--gray-shout}
  • $rds--layer-style--color--gray-shout--text
    #{$rds--layer-style--color--gray-shout--text}
Source: assets/styles/02-atoms/02-layer-styles/_color.scss, line 237

2.2.2 #Atoms.LayerStyles.Elevation Elevation

The following layer style elevations are available.

Normal
Medium
High
South
Source: assets/styles/02-atoms/02-layer-styles/_elevation.scss, line 1

2.2.2.1 #Atoms.LayerStyles.Elevation.Variables Variables

Parameters:
  • $rds--layer-style--elevation--normal
    #{$rds--layer-style--elevation--normal}
  • $rds--layer-style--elevation--medium
    #{$rds--layer-style--elevation--medium}
  • $rds--layer-style--elevation--high
    #{$rds--layer-style--elevation--high}
  • $rds--layer-style--elevation--south
    #{$rds--layer-style--elevation--south}
Source: assets/styles/02-atoms/02-layer-styles/_elevation.scss, line 78

2.2.3 #Atoms.LayerStyles.Outline Outline

The following layer style outlines are available.

Discreet
Normal
Focus
Shout
Source: assets/styles/02-atoms/02-layer-styles/_outline.scss, line 1

2.2.3.1 #Atoms.LayerStyles.Outline.Variables Variables

Parameters:
  • $rds--layer-style--outline--width
    #{$rds--layer-style--outline--width}
  • $rds--layer-style--outline--style
    #{$rds--layer-style--outline--style}
  • $rds--layer-style--outline--discreet
    #{$rds--layer-style--outline--discreet}
  • $rds--layer-style--outline--normal
    #{$rds--layer-style--outline--normal}
  • $rds--layer-style--outline--focus
    #{$rds--layer-style--outline--focus}
  • $rds--layer-style--outline--shout
    #{$rds--layer-style--outline--shout}
Source: assets/styles/02-atoms/02-layer-styles/_outline.scss, line 83
Example

Far far away small

behind the word mountains small

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.

The Big Oxmox small

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

Little Blind Text small

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

Vokalia and Consonantia small

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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline

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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline

Markup
<h1>Far far away <small>small</small></h1>
<h2>behind the word <em>mountains</em> <small>small</small></h2>
<p>Far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in <em>Bookmarksgrove</em> 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>
<h2>The Big Oxmox <small>small</small></h2>
<p>The <strong>Big Oxmox</strong> advised her not to do so, because there were thousands of bad <a href="javascript://">Commas</a>, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
<h3>Little Blind Text <small>small</small></h3>
<p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the <small>Little</small> Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
<h4>Vokalia and Consonantia <small>small</small></h4>
<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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
<p class="small">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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
Source: assets/styles/02-atoms/03-typography/_typography.scss, line 278
Example

Heading 1

Heading 2

Heading 3

Heading 4

Markup
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
Source: assets/styles/02-atoms/03-typography/_typography.scss, line 39
Example

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.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline

Markup
<p>Far far away, behind the word mountains, far from the countries <em>Vokalia</em> 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>
<p>The <strong>Big Oxmox</strong> advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
<p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
Source: assets/styles/02-atoms/03-typography/_typography.scss, line 156
Example

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Markup
<p>Far far away, <small>behind the word mountains</small>, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="small">Far far away, behind the word <strong>mountains</strong>, far from the countries <em>Vokalia</em> and Consonantia, there live the blind texts.</p>
Source: assets/styles/02-atoms/03-typography/_typography.scss, line 172
Source: assets/styles/styleguide.scss, line 37
Examples
Default styling






shout
Shout






discreet
Discreet






Markup
<button class="btn btn--[modifier class]">[modifier class] default</button>
<button class="btn btn--[modifier class] btn--hover">[modifier class] hover</button>
<button class="btn btn--[modifier class] btn--focus">[modifier class] focus</button>
<button class="btn btn--[modifier class] btn--active">[modifier class] active</button>
<button class="btn btn--[modifier class] btn--disabled">[modifier class] disabled</button>
<button class="btn btn--[modifier class] btn--confirmed">[modifier class] confirmed</button>
<button class="btn btn--[modifier class] btn--danger">[modifier class] danger</button><br><br>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist">[modifier class] default</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--hover">[modifier class] hover</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--focus">[modifier class] focus</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--active">[modifier class] active</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--disabled">[modifier class] disabled</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--confirmed">[modifier class] confirmed</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--danger">[modifier class] danger</button><br><br>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist">[modifier class] default</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--hover">[modifier class] hover</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--focus">[modifier class] focus</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--active">[modifier class] active</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--disabled">[modifier class] disabled</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--confirmed">[modifier class] confirmed</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--danger">[modifier class] danger</button><br><br>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket"><span class="btn__text">[modifier class] default</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--hover"><span class="btn__text">[modifier class] hover</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--focus"><span class="btn__text">[modifier class] focus</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--active"><span class="btn__text">[modifier class] active</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--disabled"><span class="btn__text">[modifier class] disabled</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--confirmed"><span class="btn__text">[modifier class] confirmed</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--danger"><span class="btn__text">[modifier class] danger</span><span class="btn__batch disturber">1</span></button>
Source: assets/styles/02-atoms/04-base/_button.scss, line 1

2.4.1.1 #Atoms.Base.Buttons.Variables Variables

Parameters:
  • $rds--button--padding
    #{$rds--button--padding}
  • $rds--button--margin
    #{$rds--button--margin}
  • $rds--button--min-width
    #{$rds--button--min-width}
  • $rds--button--font-family
    #{$rds--button--font-family}
  • $rds--button--font-size
    #{$rds--button--font-size}
  • $rds--button--font-size--responsive
    #{$rds--button--font-size--responsive}
  • $rds--button--font-weight
    #{$rds--button--font-weight}
  • $rds--button--color
    #{$rds--button--color}
  • $rds--button--color--hover
    #{$rds--button--color--hover}
  • $rds--button--color--focus
    #{$rds--button--color--focus}
  • $rds--button--color--active
    #{$rds--button--color--active}
  • $rds--button--color--disabled
    #{$rds--button--color--disabled}
  • $rds--button--color--confirmed
    #{$rds--button--color--confirmed}
  • $rds--button--color--danger
    #{$rds--button--color--danger}
  • $rds--button--background-color
    #{$rds--button--background-color}
  • $rds--button--background-color--hover
    #{$rds--button--background-color--hover}
  • $rds--button--background-color--focus
    #{$rds--button--background-color--focus}
  • $rds--button--background-color--active
    #{$rds--button--background-color--active}
  • $rds--button--background-color--disabled
    #{$rds--button--background-color--disabled}
  • $rds--button--background-color--confirmed
    #{$rds--button--background-color--confirmed}
  • $rds--button--background-color--danger
    #{$rds--button--background-color--danger}
  • $rds--button--border
    #{$rds--button--border}
  • $rds--button--border-color--hover
    #{$rds--button--border-color--hover}
  • $rds--button--border-color--focus
    #{$rds--button--border-color--focus}
  • $rds--button--border-color--active
    #{$rds--button--border-color--active}
  • $rds--button--border-color--disabled
    #{$rds--button--border-color--disabled}
  • $rds--button--border-color--confirmed
    #{$rds--button--border-color--confirmed}
  • $rds--button--border-color--danger
    #{$rds--button--border-color--danger}
  • $rds--button--shout--padding
    #{$rds--button--shout--padding}
  • $rds--button--shout--margin
    #{$rds--button--shout--margin}
  • $rds--button--shout--color
    #{$rds--button--shout--color}
  • $rds--button--shout--color--hover
    #{$rds--button--shout--color--hover}
  • $rds--button--shout--color--focus
    #{$rds--button--shout--color--focus}
  • $rds--button--shout--color--active
    #{$rds--button--shout--color--active}
  • $rds--button--shout--color--disabled
    #{$rds--button--shout--color--disabled}
  • $rds--button--shout--color--confirmed
    #{$rds--button--shout--color--confirmed}
  • $rds--button--shout--color--danger
    #{$rds--button--shout--color--danger}
  • $rds--button--shout--background-color
    #{$rds--button--shout--background-color}
  • $rds--button--shout--background-color--hover
    #{$rds--button--shout--background-color--hover}
  • $rds--button--shout--background-color--focus
    #{$rds--button--shout--background-color--focus}
  • $rds--button--shout--background-color--active
    #{$rds--button--shout--background-color--active}
  • $rds--button--shout--background-color--disabled
    #{$rds--button--shout--background-color--disabled}
  • $rds--button--shout--background-color--confirmed
    #{$rds--button--shout--background-color--confirmed}
  • $rds--button--shout--background-color--danger
    #{$rds--button--shout--background-color--danger}
  • $rds--button--shout--border
    #{$rds--button--shout--border}
  • $rds--button--shout--border-color--hover
    #{$rds--button--shout--border-color--hover}
  • $rds--button--shout--border-color--focus
    #{$rds--button--shout--border-color--focus}
  • $rds--button--shout--border-color--active
    #{$rds--button--shout--border-color--active}
  • $rds--button--shout--border-color--disabled
    #{$rds--button--shout--border-color--disabled}
  • $rds--button--shout--border-color--confirmed
    #{$rds--button--shout--border-color--confirmed}
  • $rds--button--shout--border-color--danger
    #{$rds--button--shout--border-color--danger}
  • $rds--button--plain--color
    #{$rds--button--plain--color}
  • $rds--button--plain--color--hover
    #{$rds--button--plain--color--hover}
  • $rds--button--plain--color--focus
    #{$rds--button--plain--color--focus}
  • $rds--button--plain--color--active
    #{$rds--button--plain--color--active}
  • $rds--button--plain--color--disabled
    #{$rds--button--plain--color--disabled}
  • $rds--button--plain--color--confirmed
    #{$rds--button--plain--color--confirmed}
  • $rds--button--plain--color--danger
    #{$rds--button--plain--color--danger}
  • $rds--button--icon--size
    #{$rds--button--icon--size}
  • $rds--button--icon--width
    #{$rds--button--icon--width}
  • $rds--button--discreet--font-size
    #{$rds--button--discreet--font-size}
  • $rds--button--discreet--font-size--responsive
    #{$rds--button--discreet--font-size--responsive}
  • $rds--button--discreet--padding
    #{$rds--button--discreet--padding}
Source: assets/styles/02-atoms/04-base/_button.scss, line 508
Markup
<a class="chip">Chip</a>
<a class="chip chip--hover">Chip hover</a>
<a class="chip chip--active">Chip active</a>
Source: assets/styles/02-atoms/04-base/_chip.scss, line 1

2.4.2.1 #Atoms.Base.Chips.Variables Variables

Parameters:
  • $rds--chip--padding
    #{$rds--chip--padding}
  • $rds--chip--margin
    #{$rds--chip--margin}
  • $rds--chip--color
    #{$rds--chip--color}
  • $rds--chip--color--hover
    #{$rds--chip--color--hover}
  • $rds--chip--color--active
    #{$rds--chip--color--active}
  • $rds--chip--background-color
    #{$rds--chip--background-color}
  • $rds--chip--background-color--hover
    #{$rds--chip--background-color--hover}
  • $rds--chip--background-color--active
    #{$rds--chip--background-color--active}
  • $rds--chip--border
    #{$rds--chip--border}
  • $rds--chip--border-color--hover
    #{$rds--chip--border-color--hover}
  • $rds--chip--border-color--active
    #{$rds--chip--border-color--active}
  • $rds--chip--border-radius
    #{$rds--chip--border-radius}
  • $rds--chip--small
    #{$rds--chip--small}
Source: assets/styles/02-atoms/04-base/_chip.scss, line 63
Example
Datum
01.01.2019
Lieferadresse
Raptus AG
Gartenweg 1
3250 Lyss
Status
In Bearbeitung
Markup
<dl class="definition-list">
    <dt>Datum</dt>
    <dd>01.01.2019</dd>
    <dt>Lieferadresse</dt>
    <dd>
        Raptus AG<br>
        Gartenweg 1<br>
        3250 Lyss
    </dd>
    <dt>Status</dt>
    <dd class="definition-list__price-text">In Bearbeitung</dd>
</dl>
Source: assets/styles/02-atoms/04-base/_list.scss, line 221

2.4.3.1 #Atoms.Base.Definition List.Variables Variables

Parameters:
  • $rds--definition-list--small
    #{$rds--definition-list--small}
  • $rds--definition-list--padding
    #{$rds--definition-list--padding}
  • $rds--definition-list--border
    #{$rds--definition-list--border}
  • $rds--definition-list--grid
    #{$rds--definition-list--grid}
  • $rds--definition-list--grid-sm
    #{$rds--definition-list--grid-sm}
  • $rds--definition-list--breakpoint
    #{$rds--definition-list--breakpoint}
  • $rds--definition-list--price-text--color
    #{$rds--definition-list--price-text--color}
  • $rds--definition-list--price--padding
    #{$rds--definition-list--price--padding}
Source: assets/styles/02-atoms/04-base/_list.scss, line 395
Example
-11%
Markup
<div class="disturber">-11%</div>
Source: assets/styles/02-atoms/04-base/_disturber.scss, line 1

2.4.4.1 #Atoms.Base.Disturber.Variables Variables

Parameters:
  • $rds--disturber--background-color
    #{$rds--disturber--background-color}
  • $rds--disturber--color
    #{$rds--disturber--color}
  • $rds--disturber--padding
    #{$rds--disturber--padding}
  • $rds--disturber--border-radius
    #{$rds--disturber--border-radius}
  • $rds--disturber--font-weight
    #{$rds--disturber--font-weight}
Source: assets/styles/02-atoms/04-base/_disturber.scss, line 29

2.4.5 #Atoms.Base.Images Images

  • Default

    .image

  • Wide

    .image.image--wide

  • Wide fill

    .image.image--wide.image--fill

  • Landscape

    .image.image--landscape

  • Landscape fill

    .image.image--landscape.image--fill

  • Portrait

    .image.image--portrait

  • Portrait fill

    .image.image--portrait.image--fill

  • Square

    .image.image--square

  • Square fill

    .image.image--square.image--fill

  • Square fill circle

    .image.image--square.image--fill.image--circle

Source: assets/styles/02-atoms/04-base/_image.scss, line 1

2.4.5.1 #Atoms.Base.Images.Variables Variables

Parameters:
  • $rds--image--wide--aspect
    #{$rds--image--wide--aspect}
  • $rds--image--landscape--aspect
    #{$rds--image--landscape--aspect}
  • $rds--image--portrait--aspect
    #{$rds--image--portrait--aspect}
  • $rds--image--square--aspect
    #{$rds--image--square--aspect}
  • $rds--image--background-color
    #{$rds--image--background-color}
  • $rds--image--wide--breakpoint
    #{$rds--image--wide--breakpoint}
  • $rds--image--caption--color
    #{$rds--image--caption--color}
  • $rds--image--caption--background-color
    #{$rds--image--caption--background-color}
  • $rds--image--caption--gradient
    #{$rds--image--caption--gradient}
Source: assets/styles/02-atoms/04-base/_image.scss, line 256
Example
  • Vokalia
  • Consonantia
Markup
<ul class="inline-list">
    <li>Vokalia</li>
    <li>Consonantia</li>
</ul>
Source: assets/styles/02-atoms/04-base/_list.scss, line 30

2.4.6.1 #Atoms.Base.Inline List.Variables Variables

Parameters:
  • $rds--inline-list--spacing
    #{$rds--inline-list--spacing}
Source: assets/styles/02-atoms/04-base/_list.scss, line 62
Example
Markup
<a href="javascript://" class="labeled-icon icon icon-wishlist">
    Label
</a>
Source: assets/styles/02-atoms/04-base/_labeled-icon.scss, line 1

2.4.7.1 #Atoms.Base.Labeled Icon.Variables Variables

Parameters:
  • $rds--labeled-icon--font-size
    #{$rds--labeled-icon--font-size}
  • $rds--labeled-icon--color
    #{$rds--labeled-icon--color}
  • $rds--labeled-icon--icon-color
    #{$rds--labeled-icon--icon-color}
  • $rds--labeled-icon--icon-size
    #{$rds--labeled-icon--icon-size}
Source: assets/styles/02-atoms/04-base/_labeled-icon.scss, line 74

2.4.8.1 #Atoms.Base.Logo.Variables Variables

Parameters:
  • $rds--logo--width
    #{$rds--logo--width}
  • $rds--logo--height
    #{$rds--logo--height}
  • $rds--logo--max-width
    #{$rds--logo--max-width}
  • $rds--logo--border-radius
    #{$rds--logo--border-radius}
  • $rds--logo--border
    #{$rds--logo--border}
  • $rds--logo--background
    #{$rds--logo--background}
  • $rds--logo--color
    #{$rds--logo--color}
  • $rds--logo--invert--border-radius
    #{$rds--logo--invert--border-radius}
  • $rds--logo--invert--border
    #{$rds--logo--invert--border}
  • $rds--logo--invert--background
    #{$rds--logo--invert--background}
  • $rds--logo--invert--color
    #{$rds--logo--invert--color}
Source: assets/styles/02-atoms/04-base/_logo.scss, line 77
Example
  1. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  2. Far far away, behind the word
    1. Far from the countries
    2. Vokalia and Consonantia, there live the blind texts.
Markup
<ol class="ordered-list">
    <li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
    <li>Far far away, behind the word
        <ol>
            <li>Far from the countries</li>
            <li>Vokalia and Consonantia, there live the blind texts.</li>
        </ol>
    </li>
</ul>
Source: assets/styles/02-atoms/04-base/_list.scss, line 137

2.4.9.1 #Atoms.Base.Ordered List.Variables Variables

Parameters:
  • $rds--ordered-list--padding
    #{$rds--ordered-list--padding}
  • $rds--ordered-list--border
    #{$rds--ordered-list--border}
Source: assets/styles/02-atoms/04-base/_list.scss, line 210

2.4.10 #Atoms.Base.Overlay Overlay

  • Fadeout

    .fadeout-overlay

  • Darken

    .darken-overlay

  • Darken solid

    .darken-overlay .darken-overlay--solid

Source: assets/styles/02-atoms/04-base/_overlay.scss, line 1

2.4.10.1 #Atoms.Base.Overlay.Variables Variables

Parameters:
  • $rds--fadeout-overlay--background-color
    #{$rds--fadeout-overlay--background-color}
  • $rds--fadeout-overlay--gradient
    #{$rds--fadeout-overlay--gradient}
  • $rds--fadeout-overlay--gradient--opacity
    #{$rds--fadeout-overlay--gradient--opacity}
  • $rds--fadeout-overlay--stop
    #{$rds--fadeout-overlay--stop}
  • $rds--darken-overlay--background-color
    #{$rds--darken-overlay--background-color}
  • $rds--darken-overlay--gradient
    #{$rds--darken-overlay--gradient}
Source: assets/styles/02-atoms/04-base/_overlay.scss, line 125
Example
69.90
69.90 120.00
69.90 120.00
69.90 statt vorher 120.00
ab 69.90
Markup
<div class="price">
    <span class="price__amount">69.90</span>
</div>
<div class="price price--reduced">
    <ins class="price__amount">69.90</ins>
    <del class="price__strikethrough">120.00</del>
</div>
<div class="price price--reduced price--stacked">
    <ins class="price__amount">69.90</ins>
    <del class="price__strikethrough">120.00</del>
</div>
<div class="price price--reduced">
    <ins class="price__amount">69.90</ins>
    <span class="price__info">statt vorher 120.00</span>
</div>
<div class="price">
    <span class="price__info">ab</span>
    <span class="price__amount">69.90</span>
</div>
Source: assets/styles/02-atoms/04-base/_price.scss, line 1

2.4.11.1 #Atoms.Base.Price.Variables Variables

Parameters:
  • $rds--price--color
    #{$rds--price--color}
  • $rds--price--info--color
    #{$rds--price--info--color}
  • $rds--price--strikethrough--color
    #{$rds--price--strikethrough--color}
Source: assets/styles/02-atoms/04-base/_price.scss, line 109
Example
Markup
<div class="profile-image image image--square image--fill image--circle">
  <div class="profile-image__image image__image">
    <img src="images/test-image.jpg">
  </div>
</div>
Source: assets/styles/02-atoms/04-base/_profile-image.scss, line 1

2.4.12.1 #Atoms.Base.Profile Image.Variables Variables

Parameters:
  • $rds--profile-image--size
    #{$rds--profile-image--size}
Source: assets/styles/02-atoms/04-base/_profile-image.scss, line 36
Example

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.

The Big Oxmox small

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

Little Blind Text small

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.

Vokalia and Consonantia small

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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline

Markup
<div class="more">
    <input type="checkbox" id="more" class="more__toggle">
    <div class="more__content fadeout-overlay">
        <p>Far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in <em>Bookmarksgrove</em> 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>
        <h2>The Big Oxmox <small>small</small></h2>
        <p>The <strong>Big Oxmox</strong> advised her not to do so, because there were thousands of bad <a href="javascript://">Commas</a>, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
        <h3>Little Blind Text <small>small</small></h3>
        <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the <small>Little</small> Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
        <h4>Vokalia and Consonantia <small>small</small></h4>
        <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. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
    </div>
    <label for="more" class="more__label"><span class="more__label-more">Show more</span><span class="more__label-less">Show less</span></label>
</div>
Source: assets/styles/02-atoms/04-base/_more.scss, line 1

2.4.13.1 #Atoms.Base.Show More.Variables Variables

Parameters:
  • $rds--more--breakpoint
    #{$rds--more--breakpoint}
  • $rds--more--height
    #{$rds--more--height}
  • $rds--more--height--open
    #{$rds--more--height--open}
  • $rds--more--color
    #{$rds--more--color}
  • $rds--more--border
    #{$rds--more--border}
Source: assets/styles/02-atoms/04-base/_more.scss, line 135
Example
< >
< >
1 2
Markup
<div class="slider-control">
    <a href="javascript://" class="slider-control__prev slider-control--">&lt;</a>
    <a href="javascript://" class="slider-control__next slider-control--">&gt;</a>
</div>
<div class="slider-control">
    <a href="javascript://" class="slider-control__prev slider-control--inactive">&lt;</a>
    <a href="javascript://" class="slider-control__next slider-control--inactive">&gt;</a>
</div>
<div class="slider-control">
    <a class="slider-control__dot slider-control--current" href="javascript://">1</a>
    <a class="slider-control__dot" href="javascript://">2</a>
</div>
Source: assets/styles/02-atoms/04-base/_slider-control.scss, line 1

2.4.14.1 #Atoms.Base.Slider Control.Variables Variables

Parameters:
  • $rds--slider-control--color
    #{$rds--slider-control--color}
  • $rds--slider-control--color--hover
    #{$rds--slider-control--color--hover}
  • $rds--slider-control--color--inactive
    #{$rds--slider-control--color--inactive}
  • $rds--slider-control--dot--size
    #{$rds--slider-control--dot--size}
  • $rds--slider-control--dot--color
    #{$rds--slider-control--dot--color}
  • $rds--slider-control--dot--color--hover
    #{$rds--slider-control--dot--color--hover}
  • $rds--slider-control--dot--color--active
    #{$rds--slider-control--dot--color--active}
Source: assets/styles/02-atoms/04-base/_slider-control.scss, line 104
Examples
Default styling

vertical
Vertical Splitline

Markup
<hr class="splitline splitline--[modifier class]" />
Source: assets/styles/02-atoms/04-base/_splitline.scss, line 1

2.4.15.1 #Atoms.Base.Splitline.Variables Variables

Parameters:
  • $rds--splitline--color
    #{$rds--splitline--color}
  • $rds--splitline--margin
    #{$rds--splitline--margin}
  • $rds--splitline--size
    #{$rds--splitline--size}
  • $rds--splitline--border
    #{$rds--splitline--border}
  • $rds--splitline--vertical--color
    #{$rds--splitline--vertical--color}
  • $rds--splitline--vertical--height
    #{$rds--splitline--vertical--height}
  • $rds--splitline--vertical--border
    #{$rds--splitline--vertical--border}
Source: assets/styles/02-atoms/04-base/_splitline.scss, line 66
Example
  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  • Far far away, behind the word
    • Far from the countries
    • Vokalia and Consonantia, there live the blind texts.
Markup
<ul class="unordered-list">
    <li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
    <li>Far far away, behind the word
        <ul>
            <li>Far from the countries</li>
            <li>Vokalia and Consonantia, there live the blind texts.</li>
        </ul>
    </li>
</ul>
Source: assets/styles/02-atoms/04-base/_list.scss, line 72

2.4.16.1 #Atoms.Base.Unordered List.Variables Variables

Parameters:
  • $rds--unordered-list--padding
    #{$rds--unordered-list--padding}
  • $rds--unordered-list--border
    #{$rds--unordered-list--border}
Source: assets/styles/02-atoms/04-base/_list.scss, line 126
Example
  • Vokalia
  • Consonantia
Markup
<ul class="unstyled-list">
    <li>Vokalia</li>
    <li>Consonantia</li>
</ul>
Source: assets/styles/02-atoms/04-base/_list.scss, line 1
Example
">
Markup
<div class="video" style="padding-top: 56.25%" data-video="<iframe title="FORS Drohne Clip" width="640" height="360" src="https://www.youtube.com/embed/qhJMEmXazbQ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>">
    <div class="image image--fill image--landscape video__cover">
        <div class="image__image">
            <img src="images/test-image.jpg">
        </div>
    </div>
</div>
<div class="video" style="padding-top: 56.25%">
    <iframe title="" src="https://www.youtube.com/embed/qhJMEmXazbQ?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" data-original-title="FORS Drohne Clip" width="640" height="360" frameborder="0"></iframe>
</div>
Source: assets/styles/02-atoms/04-base/_video.scss, line 1

2.4.18.1 #Atoms.Base.Video.Variables Variables

Parameters:
  • $rds--video--aspect
    #{$rds--video--aspect}
Source: assets/styles/02-atoms/04-base/_video.scss, line 88

2.5 #Atoms.Icons Icons

  • arrow-left

    .icon-arrow-left

  • arrow-right

    .icon-arrow-right

  • basket

    .icon-basket

  • checkmark

    .icon-checkmark

  • chevron-down

    .icon-chevron-down

  • chevron-up

    .icon-chevron-up

  • close

    .icon-close

  • filter

    .icon-filter

  • home

    .icon-home

  • info

    .icon-info

  • menu-more

    .icon-menu-more

  • menu-search

    .icon-menu-search

  • minus

    .icon-minus

  • notification

    .icon-notification

  • plus

    .icon-plus

  • profile

    .icon-profile

  • search

    .icon-search

  • select-box-checked

    .icon-select-box-checked

  • select-box

    .icon-select-box

  • star-filled

    .icon-star-filled

  • star-outline

    .icon-star-outline

  • view-horizontal

    .icon-view-horizontal

  • view-vertical

    .icon-view-vertical

  • warning

    .icon-warning

  • wishlist

    .icon-wishlist

  • eye

    .icon-view-vertical

  • eye-off

    .icon-warning

  • trash

    .icon-trash

  • globe

    .icon-globe

  • loading

    .icon-loading.icon--spin

Source: assets/styles/02-atoms/05-icons/_icon.scss, line 1
Source: assets/styles/styleguide.scss, line 45
Examples
Default styling

Message

Message

Message

Message

focus
Focus state

Message

Message

Message

Message

disabled
Disabled state

Message

Message

Message

Message

error
Error state

Message

Message

Message

Message

Markup
<div class="input input--[modifier class]">
    <label class="checkbox-radio">
        <input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="checkbox" [modifier class]>
        <span class="checkbox-radio__label">Label</span>
    </label>
    <p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
    <label class="checkbox-radio">
        <input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="radio" [modifier class]>
        <span class="checkbox-radio__label">Label</span>
    </label>
    <p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
    <label class="checkbox-radio">
        <input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="checkbox" [modifier class] checked>
        <span class="checkbox-radio__label">Label</span>
    </label>
    <p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
    <label class="checkbox-radio">
        <input class="checkbox-radio__widget checkbox-radio__widget--[modifier class]" type="radio" [modifier class] checked>
        <span class="checkbox-radio__label">Label</span>
    </label>
    <p class="input__message">Message</p>
</div>
Source: assets/styles/02-atoms/06-form-inputs/_checkbox_radio.scss, line 1

2.6.1.1 #Atoms.Form Inputs.Checkbox & Radio.Variables Variables

Parameters:
  • $rds--checkbox-radio--size
    #{$rds--checkbox-radio--size}
  • $rds--checkbox-radio--size-inner
    #{$rds--checkbox-radio--size-inner}
  • $rds--checkbox-radio--border-radius
    #{$rds--checkbox-radio--border-radius}
  • $rds--checkbox-radio--offset
    #{$rds--checkbox-radio--offset}
Source: assets/styles/02-atoms/06-form-inputs/_checkbox_radio.scss, line 223
Examples
Default styling
hover
Hover state
focus
Focus state
Markup
<div class="input input--[modifier class] input--inline">
    <input type="text" class="input__widget" placeholder="Inline label" [modifier class]>
    <button class="input__icon icon icon-search icon--only"></button>
</div>
Source: assets/styles/02-atoms/06-form-inputs/_input.scss, line 36

2.6.2.1 #Atoms.Form Inputs.Input Inline Label.Variables Variables

Parameters:
  • $rds--input--inline-small
    #{$rds--input--inline-small}
Source: assets/styles/02-atoms/06-form-inputs/_input.scss, line 218
Example

pcs
pcs
pcs
pcs
Markup
<div class="quantity">
    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
</div>
<div class="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>
<div class="quantity quantity--buttons quantity--big">
    <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>
<div class="quantity quantity--buttons">
    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
    <button value="-" class="quantity__minus">-</button>
    <button value="+" class="quantity__plus">+</button>
</div>
<br>
<div class="quantity">
    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
    <abbr class="quantity__uom">pcs</abbr>
</div>
<div class="quantity quantity--buttons">
    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
    <abbr class="quantity__uom">pcs</abbr>
    <button value="-" class="quantity__minus">-</button>
    <button value="+" class="quantity__plus">+</button>
</div>
<div class="quantity quantity--buttons quantity--big">
    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
    <abbr class="quantity__uom">pcs</abbr>
    <button value="-" class="quantity__minus">-</button>
    <button value="+" class="quantity__plus">+</button>
</div>
<div class="quantity">
    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4" disabled>
    <abbr class="quantity__uom">pcs</abbr>
</div>
Source: assets/styles/02-atoms/06-form-inputs/_quantity-input.scss, line 1
Examples
Default styling

Message

Some additional content

Message

hover
Hover state

Message

Some additional content

Message

focus
Focus state

Message

Some additional content

Message

disabled
Disabled state

Message

Some additional content

Message

error
Error state

Message

Some additional content

Message

Markup
<div class="input input--[modifier class]">
    <label for="select-[modifier class]" class="input__label">Native Select</label>
    <div class="select">
        <select type="text" id="select-[modifier class]" class="input__widget select__widget" size="1" [modifier class]>
            <option>Value</option>
            <option>Value 2</option>
            <option>Value 3</option>
        </select>
    </div>
    <p class="input__message">Message</p>
</div>
<div class="input input--[modifier class]">
    <label class="input__label">Custom Select</label>
    <input class="select__toggle" type="checkbox" id="select-custom-[modifier class]" tabindex="-1">
    <div class="select select--custom">
        <label class="input__widget select__widget" for="select-custom-[modifier class]">Bitte wählen</label>
        <div class="select__content">
            <ul class="unstyled-list">
                <li>
                    <a href="javascript://">Value</a>
                </li>
                <li>
                    <a href="javascript://">Value 2</a>
                </li>
                <li>
                    <a href="javascript://">Value 3</a>
                </li>
            </ul>
            <p>
                Some additional content
            </p>
        </div>
    </div>
    <p class="input__message">Message</p>
</div>
Source: assets/styles/02-atoms/06-form-inputs/_select.scss, line 1
Examples
Default styling

Message

hover
Hover state

Message

focus
Focus state

Message

disabled
Disabled state

Message

error
Error state

Message

Markup
<div class="input input--[modifier class]">
    <label for="input-[modifier class]" class="input__label">Text Input</label>
    <input type="text" id="input-[modifier class]" class="input__widget" [modifier class]>
    <p class="input__message">Message</p>
</div>
Source: assets/styles/02-atoms/06-form-inputs/_input.scss, line 1

2.6.5.1 #Atoms.Form Inputs.Text Input.Variables Variables

Parameters:
  • $rds--input--color
    #{$rds--input--color}
  • $rds--input--background-color
    #{$rds--input--background-color}
  • $rds--input--disabled--background-color
    #{$rds--input--disabled--background-color}
  • $rds--input--disabled--border-color
    #{$rds--input--disabled--border-color}
  • $rds--input--padding
    #{$rds--input--padding}
  • $rds--input--border-radius
    #{$rds--input--border-radius}
  • $rds--input--label-small
    #{$rds--input--label-small}
  • $rds--input--prevent-zoom-on-ios
    #{$rds--input--prevent-zoom-on-ios}
Source: assets/styles/02-atoms/06-form-inputs/_input.scss, line 201
Examples
Default styling

Message

focus
Focus state

Message

disabled
Disabled state

Message

error
Error state

Message

Markup
<div class="input input--[modifier class]">
    <label for="textarea-[modifier class]" class="input__label">Textarea</label>
    <textarea id="textarea-[modifier class]" class="input__widget" [modifier class]></textarea>
    <p class="input__message">Message</p>
</div>
Source: assets/styles/02-atoms/06-form-inputs/_input.scss, line 19
Examples
Default styling
1'000 pcs in stock
good
Good
1'000 pcs in stock
medium
Medium
1'000 pcs in stock
bad
Bad
1'000 pcs in stock
info
Info
1'000 pcs in stock
Markup
<div class="availability availability--[modifier class]"></div>
<div class="availability availability--[modifier class]">1'000 pcs in stock</div>
Source: assets/styles/02-atoms/07-availability/_availability.scss, line 1

2.7.1 #Atoms.Availability.Variables Variables

Parameters:
  • $rds--availability--size
    #{$rds--availability--size}
  • $rds--availability--good
    #{$rds--availability--good}
  • $rds--availability--medium
    #{$rds--availability--medium}
  • $rds--availability--bad
    #{$rds--availability--bad}
  • $rds--availability--info
    #{$rds--availability--info}
Source: assets/styles/02-atoms/07-availability/_availability.scss, line 97