Source: scss/_4-Controls.scss, line 1
Source: scss/_4-Controls.scss, line 1
Source: scss/_4-Controls/_buttons.scss, line 1
Works with any element not just <button>. Just add class selector .btn.
:hover – Mouse over
:active – Mouse click
.disabled – Disabled button
<button type="button" class="btn btn-primary [modifier class]"><span>Button</span></button>Source: scss/_4-Controls/_buttons.scss, line 368
:hover – Mouse over
:active – Mouse click
.disabled – Disabled button
<div class="page-section page-section--dark">
<div class="grid justify-content-center">
<div class="col">
<button type="button" class="btn btn-primary [modifier class]"><span>Button</span></button>
</div>
</div>
</div>Source: scss/_4-Controls/_buttons.scss, line 289
:hover – Mouse over
:active – Mouse click
.disabled – Disabled button
<button class="btn btn-primary btn-sm [modifier class]"><span>Small Button</span></button>Source: scss/_4-Controls/_buttons.scss, line 386
:hover – Mouse over
:active – Mouse click
.disabled – Disabled button
<div class="page-section page-section--dark">
<div class="grid justify-content-center">
<div class="col">
<button type="button" class="btn btn-primary btn-sm [modifier class]"><span>Button</span></button>
</div>
</div>
</div>Source: scss/_4-Controls/_buttons.scss, line 404
:hover – Mouse over
:active – Mouse click
.disabled – Disabled button
<button class="btn btn-dark btn-lg [modifier class]"><span>Form Button</span></button>:hover – Mouseover
<a class="[modifier class]" href="#">Big Link</a>Source: scss/_4-Controls/_links.scss, line 13
Default links on dark background.
:hover – Mouseover
<div class="page-section page-section--dark">
<div class="grid justify-content-center">
<div class="col">
<a class="[modifier class]" href="#">Big Link</a>
</div>
</div>
</div>Source: scss/_4-Controls/_links.scss, line 31
:hover – Mouseover
<a class="link-sm [modifier class]" href="#">Small Link</a>Source: scss/_4-Controls/_links.scss, line 41
:hover – Mouseover
<a href="#" class="link-ext [modifier class]">External Link
<svg class="icon"><use xlink:href="#icon-link-arrow"></use></svg>
</a>Im Customizers kann für die Fahreigenschaften Max Power, Support Relation und Ramp-Up aus je drei Einstellungen gewählt werden.
Im Customizers kann für die Fahreigenschaften Max Power, Support Relation und Ramp-Up aus je drei Einstellungen gewählt werden.
:hover – Mouseover
Im Customizers kann für die Fahreigenschaften Max Power, Support Relation und Ramp-Up aus je drei Einstellungen gewählt werden.
Im Customizers kann für die Fahreigenschaften Max Power, Support Relation und Ramp-Up aus je drei Einstellungen gewählt werden.
<p class="p3">Im Customizers kann für die Fahreigenschaften <a href="#" class="[modifier class]">Max Power, Support Relation und Ramp-Up</a> aus je drei Einstellungen gewählt werden.</p>
<p class="p4">Im Customizers kann für die Fahreigenschaften <a href="#" class="[modifier class]">Max Power, Support Relation und Ramp-Up</a> aus je drei Einstellungen gewählt werden.</p>Source: scss/_4-Controls/_inputs.scss, line 1
:focus – Focused input
:disabled – Disabled input
<div class="form-group has-float-label">
<input type="email" class="form-control [modifier class]" id="exampleFormControlInput" placeholder=" ">
<label class="form-control-placeholder" for="exampleFormControlInput">Text input label</label>
</div>Source: scss/_4-Controls/_inputs.scss, line 167
<div class="form-group has-float-label">
<input type="email" class="form-control is-invalid" id="exampleFormControlInput3" placeholder=" " value="eduard.bodakATinterlutions.de">
<label class="form-control-placeholder" for="exampleFormControlInput3">Text input label</label>
<div class="invalid-feedback f2">Please choose a username.</div>
</div>Source: scss/_4-Controls/_inputs.scss, line 185
<div class="form-row">
<div class="col-desk-12">
<div class="form-group has-float-label">
<textarea class="form-control" id="dein-anliegen" placeholder=" " rows="4"></textarea>
<label class="form-control-placeholder" for="dein-anliegen">Dein Anliegen</label>
</div>
</div>
</div>Source: scss/_4-Controls/_inputs.scss, line 204
<div class="page-section page-section--grey">
<div class="grid justify-content-center">
<div class="col-desk-12">
<div class="input-group has-float-label">
<input type="email" class="form-control" placeholder=" " id="newsletter" aria-label="Email Adresse" aria-describedby="button-addon2">
<label class="form-control-placeholder" for="newsletter">Email Adresse</label>
<div class="input-group-append">
<button class="btn btn-dark btn-lg" type="button" id="button-addon2"><span>Anmelden</span></button>
</div>
</div>
</div>
</div>
</div><div class="ln-select form-group has-float-label js--custom-select">
<label class="ln-select__label" for="form-select-option-select">Option auswählen</label>
<select name="option-select" id="form-select-option-select">
<option value="option-first">Option 1</option>
<option value="option-second">Option 2</option>
<option value="option-third">Option 3</option>
</select>
</div>Source: scss/_4-Controls/_dropdowns.scss, line 18
alias for form select fields with Radio Buttons
<div class="ln-select ln-select--radio form-group has-float-label js--custom-select">
<label class="ln-select__label" for="form-select-cm-select">Option auswählen</label>
<select name="cm-select" id="form-select-cm-select">
<option value="s-160-170-cm">S 160 - 170 cm</option>
<option value="m-170-180-cm">M 170 - 180 cm</option>
<option value="l-180-190-cm">L 180 - 190 cm</option>
</select>
</div>Source: scss/_4-Controls/_dropdowns.scss, line 35
alias for form select fields with model description
<div class="ln-select ln-select--model form-group has-float-label js--custom-select">
<label class="ln-select__label" for="form-select-cm-select">Modell auswählen</label>
<select name="cm-select" id="form-select-cm-select">
<option value="model-01" data-type="Schaltung" data-name="Shimano GRX Di2 X345" data-price="<small>ab</small> 4.557 €">Modell 01</option>
<option value="model-02" data-type="Schaltung" data-name="Shimano GRX Di2 X345" data-price="<small>ab</small> 4.557 €">Modell 02</option>
<option value="model-03" data-type="Schaltung" data-name="Shimano GRX Di2 X345" data-price="<small>ab</small> 4.557 €">Modell 03</option>
</select>
</div>Source: scss/_4-Controls/_dropdowns.scss, line 52
alias for form select fields with checkboxes
<div class="ln-select ln-select--multiple form-group has-float-label js--custom-select">
<label class="ln-select__label" for="form-select-cm-select">Text input label</label>
<select name="cm-select" id="form-select-cm-select" multiple>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>Source: scss/_4-Controls/_dropdowns.scss, line 69
<section class="page-section">
<div class="grid justify-content-center">
<div class="col-desk-5 col-tab-6 col-mob-6">
<form>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group has-float-label">
<input type="text" class="form-control" id="kundennummer" placeholder=" ">
<label class="form-control-placeholder" for="kundennummer">Kundennummer</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-6 col-mob-6">
<div class="form-group has-float-label">
<input type="text" class="form-control" id="vorname" placeholder=" ">
<label class="form-control-placeholder" for="vorname">Vorname</label>
</div>
</div>
<div class="col-desk-6 col-mob-6">
<div class="form-group has-float-label">
<input type="text" class="form-control" id="nachname" placeholder=" ">
<label class="form-control-placeholder" for="nachname">Nachname</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group has-float-label">
<input type="email" class="form-control" id="email" placeholder=" ">
<label class="form-control-placeholder" for="email">Email Adresse</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group has-float-label">
<textarea class="form-control" id="anliegen" placeholder=" " rows="4"></textarea>
<label class="form-control-placeholder" for="anliegen">Dein Anliegen</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="ln-select ln-select--radio form-group has-float-label js--custom-select">
<label class="ln-select__label" for="example-select-form">Option auswählen</label>
<select name="cm-select" id="test-form">
<option value="s-160-170-cm">S 160 - 170 cm</option>
<option value="m-170-180-cm">M 170 - 180 cm</option>
<option value="l-180-190-cm">L 180 - 190 cm</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group">
<div class="form-checkbox">
<input class="form-checkbox__input" type="checkbox" id="gridCheck">
<label class="form-checkbox__label f1" for="gridCheck">
Ich möchte einen FAZUA Newletter abonnieren
</label>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<button class="btn btn-dark btn-lg btn-block" type="submit"><span>Submit</span></button>
</div>
</div>
</form>
</div>
</div>
</section>Source: scss/_4-Controls/_dropdowns.scss, line 151
<section class="page-section page-section--grey">
<div class="grid justify-content-center">
<div class="col-desk-5 col-tab-6 col-mob-6">
<form>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group has-float-label">
<input type="text" class="form-control" id="kundennummer-grey" placeholder=" ">
<label class="form-control-placeholder" for="kundennummer-grey">Kundennummer</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-6 col-mob-6">
<div class="form-group has-float-label">
<input type="text" class="form-control" id="vorname-grey" placeholder=" ">
<label class="form-control-placeholder" for="vorname-grey">Vorname</label>
</div>
</div>
<div class="col-desk-6 col-mob-6">
<div class="form-group has-float-label">
<input type="text" class="form-control" id="nachname-grey" placeholder=" ">
<label class="form-control-placeholder" for="nachname-grey">Nachname</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group has-float-label">
<input type="email" class="form-control" id="email-grey" placeholder=" ">
<label class="form-control-placeholder" for="email-grey">Email Adresse</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group has-float-label">
<textarea class="form-control" id="anliegen-grey" placeholder=" " rows="4"></textarea>
<label class="form-control-placeholder" for="anliegen-grey">Dein Anliegen</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="ln-select ln-select--radio form-group has-float-label js--custom-select">
<label class="ln-select__label" for="example-select-form-grey">Option auswählen</label>
<select name="cm-select" id="test-form2">
<option value="s-160-170-cm">S 160 - 170 cm</option>
<option value="m-170-180-cm">M 170 - 180 cm</option>
<option value="l-180-190-cm">L 180 - 190 cm</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group">
<div class="form-checkbox">
<input class="form-checkbox__input" type="checkbox" id="gridCheck-grey">
<label class="form-checkbox__label f1" for="gridCheck-grey">
Ich möchte einen FAZUA Newletter abonnieren
</label>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group">
<button class="btn btn-dark btn-lg btn-block disabled" type="button"><span>Disabled</span></button>
</div>
</div>
</div>
<div class="form-row">
<div class="col-desk-12">
<div class="form-group">
<button class="btn btn-dark btn-lg btn-block" type="submit"><span>Submit</span></button>
</div>
</div>
</div>
</form>
</div>
</div>
</section>Source: scss/_4-Controls/_upload.scss, line 1
Alias for form input file fields with example image. Image modal must be added.
<div class="form-group cm-upload js--custom-upload">
<span class="cm-upload__title p4">Kategorie</span>
<div class="cm-upload__container">
<div class="cm-upload__input">
<input type="file" class="cm-upload__file" id="file-example" name="example">
<span class="cm-upload__error">Invalid file!</span>
<label for="file-example" class="cm-upload__label">
<span class="cm-upload__filename"></span>
<span class="cm-upload__selectmsg">Select a file</span>
<span class="cm-upload__dragmsg">or drag it here</span>
</label>
</div>
<div class="cm-upload__no-file f2">Keine Datei ausgewählt</div>
<button class="cm-upload__remove-btn">
<svg class="icon">
<use xlink:href="#icon-close" href="#icon-close" aria-hidden="true"></use>
</svg>
</button>
</div>
<div class="cm-upload__footnotes">
<span class="cm-upload__info f2">Die maximale Dateigröße beträgt 4 MB</span>
<a href="#" class="cm-upload__example f2" data-toggle="modal" data-target="#imageModal" data-image-src="placeholder/image-slider-01.jpg">
<svg class="icon">
<use xlink:href="#icon-picture" href="#icon-picture" aria-hidden="true"></use>
</svg>
Beispielbild anzeigen</a>
</div>
</div>Source: scss/_4-Controls/_upload.scss, line 38
Alias for invalid form input file fields. Container and input must have the .is-invalid class added on failed validation. Please customize error message.
<div class="form-group cm-upload js--custom-upload is-invalid">
<span class="cm-upload__title p4">Kategorie*</span>
<div class="cm-upload__container">
<div class="cm-upload__input">
<input type="file" class="cm-upload__file" id="file-example" class="is-invalid" name="example" required>
<span class="cm-upload__error">Invalid file!</span>
<label for="file-example" class="cm-upload__label">
<span class="cm-upload__filename"></span>
<span class="cm-upload__selectmsg">Select a file</span>
<span class="cm-upload__dragmsg">or drag it here</span>
</label>
</div>
<div class="cm-upload__no-file f2">Keine Datei ausgewählt</div>
<button class="cm-upload__remove-btn">
<svg class="icon">
<use xlink:href="#icon-close" href="#icon-close" aria-hidden="true"></use>
</svg>
</button>
</div>
<div class="cm-upload__footnotes">
<span class="cm-upload__info f2">Die maximale Dateigröße beträgt 4 MB</span>
</div>
</div>Source: scss/_4-Controls/_checkbox.scss, line 1
:hover – Hover state
:checked – Checked state
:disabled – Inactive state
<div class="form-group">
<div class="form-checkbox">
<input class="form-checkbox__input [modifier class]" type="checkbox" id="checkbox">
<label class="form-checkbox__label f1 [modifier class]" for="checkbox">
Ich möchte einen FAZUA Newletter abonnieren
</label>
</div>
</div>