Forms
Text Input Field
CODE
×
HTML
<div class='form-floating mb-6'> <input type=text value='' class='form-control' placeholder='Placeholder-Text' id='input-1'> <label for='input-1'>Name of form element</label> </div>
CSS
input[type=text].form-control { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } .form-control:focus { box-shadow: none; } .form-control:focus-visible { box-shadow: 0 0 0 1px var(--bsc1); border-color: var(--bsc1) !important; }
JS
Text Input Field
Last Edit: Aug 18, 2023, 11:31am
×
Name of form element
Password Field
CODE
×
HTML
<div class='form-floating mb-6 pw'> <input type=password value='' class='form-control' placeholder='Your password' id='input-2'> <label for='input-2'>Password</label> </div>
CSS
input[type=password].form-control { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } .form-control:focus { box-shadow: none; } .form-control:focus-visible { box-shadow: 0 0 0 1px var(--bsc1); border-color: var(--bsc1) !important; }
JS
Password Field
Last Edit: Aug 18, 2023, 11:31am
×
Password
Invalid Input Field
CODE
×
HTML
<div class='form-floating mb-6 error'> <input type=email value='54870' class='form-control is-invalid' placeholder='Placeholder-Text' id='input-error'> <label class='error' for='input-error'>Name of form element</label> </div>
CSS
input[type=email].form-control.is-invalid { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); } label.error { color: var(--fec) !important; } .form-control:focus { box-shadow: none; } .form-control:focus-visible { box-shadow: 0 0 0 1px var(--bsc1); border-color: var(--bsc1) !important; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); }
JS
Invalid Input Field
Last Edit: Aug 18, 2023, 11:32am
×
Name of form element
Textarea
CODE
×
HTML
<div class='form-floating mb-6 textarea'> <textarea class='form-control' placeholder='Your message' id='textarea'></textarea> <label for='textarea'>Your Message</label> </div>
CSS
textarea.form-control { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); max-height: 50vh; min-height: 120px !important; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } .form-control:focus { box-shadow: none; } .form-control:focus-visible { box-shadow: 0 0 0 1px var(--bsc1); border-color: var(--bsc1) !important; }
JS
Textarea
Last Edit: Aug 18, 2023, 11:32am
×
Your Message
Select Menue
CODE
×
HTML
<div class='form-floating mb-6 v2'> <select class='form-select form-select-lg' aria-label='example' id='select-1'><option selected>Please select one item ...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option></select> <label for='select-1'>Name of select list</label> </div>
CSS
.form-floating > .form-select { padding-top: 1rem; padding-bottom: 0; } select.form-select.form-select-lg { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-m); color: var(--fc2); border-color: var(--lc5); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); padding-left: 0.75rem; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); }
JS
Select Menue
Last Edit: Aug 18, 2023, 8:58am
×
Please select one item ...
One
Two
Three
Four
Five
Name of select list
Radiobutton
CODE
×
HTML
<div class='form-check mb-3'> <input type=radio value='' class='form-check-input' name='flexRadio-1' id='flexRadio-1'> <label class='form-check-label' for='flexRadio-1'>Name of form element</label> </div>
CSS
label.form-check-label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-xs); line-height: var(--lh-s); color: var(--fc2); margin-left: 10px; } input[type=radio].form-check-input { border-color: var(--lc5); margin-top: 0px; width: 26px; height: 26px; } input[type=radio].form-check-inputdisabled { background-color: var(--bc5); opacity:1; } .form-check-input:focus[type=radio] { box-shadow: none; } .form-check-input:focus-visible[type=radio] { border-color: var(--lsc1); box-shadow: 0 0 0 0.15rem var(--bsc1); } .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { color: var(--fdc); opacity: 1; } .form-check-input:checked[type=radio] { background-color: var(--bsc2); border-color: var(--lsc2); } .form-check-input:checked[type=radio][disabled], .form-check-input:checked:disabled[type=radio] { border-color: var(--ldc); } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); }
JS
Radiobutton
Last Edit: Aug 18, 2023, 8:58am
×
Name of form element
Checkbox
CODE
×
HTML
<div class='form-check mb-3 checkbox'> <input type=checkbox value='' class='form-check-input' id='flexCheck-1'> <label class='form-check-label' for='flexCheck-1'>Name of form element</label> </div>
CSS
input[type=checkbox].form-check-input { border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-color: var(--lc5); margin-top: 0px; } label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-s); line-height: var(--lh-s); color: var(--fc2); } label.form-check-label { font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); font-size: var(--fs-xs); line-height: var(--lh-s); color: var(--fc2); margin-left: 10px; }
JS
Checkbox
Last Edit: Aug 18, 2023, 8:58am
×
Name of form element
Button Group
CODE
×
HTML
<div class='button-group'> <button class='btn btn-primary'>Who we are</button> <button class='btn btn-secondary'>GET IN TOUCH</button> </div>
CSS
@media (min-width: 576px) { .button-group button + button, .button-group .btn + .btn { margin-left: 24px !important; } } @media (max-width: 575px) { .button-group button + button, .button-group .btn + .btn { margin-top: 0px !important; } } button.btn.btn-primary { font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); font-size: var(--fs-l); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-width: var(--lw3); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); width:auto; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); color: var(--fpb); background-color: var(--bsc2); border-color: var(--lsc2); margin-top: 38px; margin-bottom: 24px; padding-top: 16px; padding-right: 46px; padding-bottom: 16px; padding-left: 46px; } button.btn.btn-secondary { font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); font-size: var(--fs-l); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-width: var(--lw4); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); width:auto; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); background-color:transparent; border-color: var(--lc7); color: var(--fsb); margin-top: 38px; margin-bottom: 24px; padding-top: 16px; padding-right: 46px; padding-bottom: 16px; padding-left: 46px; } button.btn.btn-primary:hover, button.btn.btn-primary:focus { border-color: var(--lsc1); background-color: var(--bsc1); color: var(--fsc2); } button.btn.btn-secondary:hover, button.btn.btn-secondary:focus { background-color: var(--bsc4); color: var(--fsc2); border-color: var(--lsc1); } @media screen and (max-width: 991px) { button.btn.btn-primary { font-size: var(--fs-m); } button.btn.btn-secondary { font-size: var(--fs-m); } } @media screen and (max-width: 575px) { button.btn.btn-primary { margin-top: 24px; } button.btn.btn-secondary { margin-top: 24px; } } @media screen and (max-width: 389px) { button.btn.btn-secondary { width: 100%; } }
JS
Button Group
Last Edit: Dec 8, 2023, 9:55am
×
Who we are
GET IN TOUCH