Phoenix Reisen Styleguide
Example
Markup
<form>
<label class="textfield">
<input type="text" />
<span class="textfield__label">Name</span>
</label>
<label class="radio">
<input type="radio" name="example" />
<span class="radio__label">Desktop</span>
</label>
<label class="radio">
<input type="radio" name="example" />
<span class="radio__label">Mobile</span>
</label>
<label class="select">
<select name="select">
<option disabled="disabled" selected="selected">Bitte wählen</option>
<option>MS Amadea</option>
<option>MS Amera</option>
<option>MS Artania</option>
<option>MS Albatros</option>
<option>MS Deutschland</option>
</select>
<span class="select__label" for="select">Lieblingsschiff</span>
</label>
<label class="textfield">
<textarea></textarea>
<span class="textfield__label">Comments</span>
</label>
<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__label">Check mich!</span>
</label>
<br/>
<div class="mt3">
<button type="button" class="btn btn--primary">
Abschicken
</button>
<button type="button" class="btn btn--primary" disabled="disabled">
<i class="fas fa-spinner fa-spin mr1"></i> Abschicken
</button>
<button type="button" class="btn btn--success" disabled="disabled">
<i class="fas fa-check mr1"></i> Gekauft
</button>
<button type="button" class="btn btn--secondary">
Abbrechen
</button>
</div>
<div class="mt3">
<button class="btn btn--warning">Löschen</button>
<button class="btn btn--danger">Alles löschen</button>
<button class="btn btn--link"><i class="fas fa-home mr1"></i> Home</button>
</div>
</form>
Source:
src/components/_forms.scss, line 1
Example
Deaktiviert
Markup
<label class="radio ">
<input
name=""
checked=""
onclick=""
type="radio"
/>
<span class="radio__label">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
</span>
</label>
<p><em>Deaktiviert</em></p>
<label class="radio ">
<input
name=""
checked=""
onclick=""
type="radio"
disabled="disabled"
/>
<span class="radio__label">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
</span>
</label>
Source:
src/components/_forms.scss, line 255
Example
Deaktiviert
Markup
<label class="checkbox">
<input
name=""
checked=""
onclick=""
type="checkbox"
/>
<span class="checkbox__label">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
</span>
</label>
<p><em>Deaktiviert</em></p>
<label class="checkbox">
<input
name=""
checked=""
onclick=""
type="checkbox"
disabled="disabled"
/>
<span class="checkbox__label">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
</span>
</label>
Source:
src/components/_forms.scss, line 320
Example
Markup
<label class="switch">
<span class="switch__input">
<input
name=""
checked=""
onclick=""
type="checkbox"
/>
<span class="switch__slider"></span>
</span>
<span class="switch__label">
Licht an oder aus, das ist hier die Frage. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.
</span>
</label>
Source:
src/components/_forms.scss, line 378
Example
Deaktiviert
Markup
<label class="textfield">
<input
type="text"
name=""
value=""
oninput=""
maxlength=""
autocomplete=""
placeholder="..."
/>
<span class="textfield__label">Input</span>
</label>
<label class="textfield">
<textarea
name=""
value=""
oninput=""
maxlength=""
placeholder="...">
</textarea>
<span class="textfield__label">Textarea</span>
</label>
<p><em>Deaktiviert</em></p>
<label class="textfield">
<input
type="text"
name=""
value=""
oninput=""
maxlength=""
autocomplete=""
placeholder="..."
disabled="disabled"
/>
<span class="textfield__label">Input</span>
</label>
<label class="textfield">
<textarea
name=""
value=""
oninput=""
maxlength=""
placeholder="..."
disabled="disabled">
</textarea>
<span class="textfield__label">Textarea</span>
</label>
Source:
src/components/_forms.scss, line 482
Example
Markup
<div class="textfield-with-button">
<label class="textfield ">
<input
type="text"
name=""
value=""
oninput=""
maxlength=""
autocomplete=""
placeholder="..."
/>
<span class="textfield__label">Input</span>
</label>
<button class="btn btn--primary"
<i class="fas fa-check mr2"></i>
<span>Speichern</span>
</button>
</div>
Source:
src/components/_forms.scss, line 539
Example
Deaktiviert
Markup
<label class="select ">
<select name="" onchange="">
<option selected="">Select</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>
<span class="select__label">
Select Label
</span>
</label>
<p><em>Deaktiviert</em></p>
<label class="select ">
<select name="" onchange="" disabled="disabled">
<option selected="">Select</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>
<span class="select__label">
Select Label
</span>
</label>
Source:
src/components/_forms.scss, line 593
400.70 #permalink Validierung
Hervorhebung durch Warnfarbe bei fehlerhafter Eingabe, meistens instant während des Tippens.
Example
Markup
<div>
<label class="textfield">
<input type="text" />
<span class="textfield__label alert--warning">
Buchungsnr... Bitte nur Ziffern
</span>
</label>
<label class="textfield">
<textarea></textarea>
<span class="textfield__label alert--warning">
Kommentar
</span>
</label>
<div class="mb3">
<label class="radio alert--warning">
<input type="radio" name="example" />
<span class="radio__label">Entweder</span>
</label>
<label class="radio alert--warning">
<input type="radio" name="example" />
<span class="radio__label">Oder</span>
</label>
</div>
<div class="mb3">
<label class="checkbox alert--warning">
<input type="checkbox" />
<span class="checkbox__label">Check mich!</span>
</label>
</div>
<button disabled="disabled">
Senden
</button>
</div>
Source:
src/components/_forms.scss, line 650
400.80 #permalink Formular Box
Fasst das Formular optisch als Box zusammen.
Example
Markup
<div class="form-box">
<label class="textfield">
<input type="text" />
<span class="textfield__label">Input</span>
</label>
<label class="textfield">
<textarea></textarea>
<span class="textfield__label">Textarea</span>
</label>
<button>Senden</button>
</div>
Source:
src/components/_forms.scss, line 695