Style Guide

Examples
Default styling
Text

E-Mail

Number

Date

Textarea

Select
Select mit FakeOption
Option
:focus
Focus
Text

E-Mail

Number

Date

Textarea

Select
Select mit FakeOption
Option
:active
Active
Text

E-Mail

Number

Date

Textarea

Select
Select mit FakeOption
Option
:disabled
Disabled
Text

E-Mail

Number

Date

Textarea

Select
Select mit FakeOption
Option
:valid
Valid
Text

E-Mail

Number

Date

Textarea

Select
Select mit FakeOption
Option
.error
Error
Text

E-Mail

Number

Date

Textarea

Select
Select mit FakeOption
Option
Markup
<strong>Text</strong><br/>
<input type="text" class='[modifier class]' value="Text" /><br/>
<strong>E-Mail</strong><br/>
<input type="email" class='[modifier class]' value="info@dc.ag" /><br/>
<strong>Number</strong><br/>
<input type="number" class='[modifier class]' value="123" /><br/>
<strong>Date</strong><br/>
<input type="date" class='[modifier class]' value="2025-01-01" /><br/>
<strong>Textarea</strong><br/>
<textarea class='[modifier class]'>Text</textarea><br/>
<strong>Select</strong><br/>
<div class="selectBody">
<select class='[modifier class]'>
  <option disabled selected>Choose</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
</div>
<strong>Select mit FakeOption</strong><br/>
<div class="selectBody">
  <div class="selectBody__fakeOption"">Option</div>
</div>
Source: build/doc/doc.css, line 3577