Buttons
Button normal
<a href="#" class="button solid primary"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid secondary"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid gradient"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid white"><span class="inner">Mehr Erfahren</span></a>
Button outline
<a href="#" class="button outline primary"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button outline secondary"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button outline gradient"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button outline white"><span class="inner">Mehr Erfahren</span></a>
Button Sizes
small
<a href="#" class="button solid primary small"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid secondary small"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid gradient small"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid white small"><span class="inner">Mehr Erfahren</span></a>
normal
<a href="#" class="button solid primary medium"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid secondary medium"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid gradient medium"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid white medium"><span class="inner">Mehr Erfahren</span></a>
large
<a href="#" class="button solid primary"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid secondary"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid gradient"><span class="inner">Mehr Erfahren</span></a>
<a href="#" class="button solid white"><span class="inner">Mehr Erfahren</span></a>
Forms
Dropdown
<div class="form-clearfix clearfix"><label>Bitte ausfüllen<span class="required">*</span></label>
<div class="select-wrapper">
<select class="input">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
</select>
</div>
</div>
Single Line Text
<div class="form-clearfix clearfix">
<label>Single Line Text<span class="required">*</span></label>
<div class="form-group">
<input placeholder="Single Line Text" class="input w-full" type="text">
</div>
</div>
Multi Line Text
<div class="form-clearfix clearfix">
<label>Multi Line Text</label>
<div class="form-group">
<textarea class="input"></textarea>
</div>
</div>
Radio Button
<div class="form-clearfix clearfix">
<label>Radio Buttons</label>
<div class="form-group">
<ul class="inputs-list">
<li>
<input type="radio" class="input" name="test" value="1" id="radio1">
<label for="radio1" class="input-radio">
<span class="custom-radio">Radio 1</span>
</label>
</li>
<li>
<input type="radio" class="input" name="test" value="1" id="radio2">
<label for="radio2" class="input-radio">
<span class="custom-radio">Radio 2</span>
</label>
</li>
<li>
<input type="radio" class="input" name="test" value="1" id="radio3">
<label for="radio3" class="input-radio">
<span class="custom-radio">Radio 3</span>
</label>
</li>
</ul>
</div>
</div>
Checkbox
<div class="form-clearfix clearfix">
<label>Checkbox</label>
<div class="input-checkbox">
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" class="inputnot" value="Checkbox 1">
<span>Checkbox 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" class="inputnot" value="Checkbox 2">
<span>Checkbox 2</span>
</label>
</li>
</ul>
</div>
</div>
Icons
Essentials
Solid
<i class="fas fa-lightbulb"></i>
<i class="fas fa-seedling"></i>
<i class="fas fa-clock"></i>Light
<i class="fal fa-lightbulb"></i>
<i class="fal fa-seedling"></i>
<i class="fal fa-clock"></i>Essentials
<i class="icon text-xxl sws-icon-anfahrt"></i><i class="icon text-xxl sws-icon-barrierefrei"></i><i class="icon text-xxl sws-icon-bus"></i><i class="icon text-xxl sws-icon-e-mobilitaet"></i><i class="icon text-xxl sws-icon-freibad"></i><i class="icon text-xxl sws-icon-gas"></i><i class="icon text-xxl sws-icon-gastro"></i><i class="icon text-xxl sws-icon-hallenbad"></i><i class="icon text-xxl sws-icon-hinweis"></i><i class="icon text-xxl sws-icon-hotspot"></i><i class="icon text-xxl sws-icon-internet"></i><i class="icon text-xxl sws-icon-kurse"></i><i class="icon text-xxl sws-icon-netz"></i><i class="icon text-xxl sws-icon-oeffnungszeiten"></i><i class="icon text-xxl sws-icon-sauna"></i><i class="icon text-xxl sws-icon-smart home"></i><i class="icon text-xxl sws-icon-strom"></i><i class="icon text-xxl sws-icon-telefon"></i><i class="icon text-xxl sws-icon-telekom"></i><i class="icon text-xxl sws-icon-tv"></i><i class="icon text-xxl sws-icon-waerme"></i><i class="icon text-xxl sws-icon-wasser"></i><i class="icon text-xxl sws-icon-wellness"></i>Tabellen
Standard Tabelle
| Head 1 | Head 2 | Head 3 | Head 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
<table class="table-default">
<thead>
<tr>
<td>Head 1</td>
<td>Head 2</td>
<td>Head 3</td>
<td>Head 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
Farbige Tabelle
| Head 1 | Head 2 | Head 3 | Head 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
<table class="table-default table-white bg-primary">
<thead>
<tr>
<td>Head 1</td>
<td>Head 2</td>
<td>Head 3</td>
<td>Head 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
Farbige Tabelle
| Head 1 | Head 2 | Head 3 | Head 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
<table class="table-default table-white bg-secondary">
<thead>
<tr>
<td>Head 1</td>
<td>Head 2</td>
<td>Head 3</td>
<td>Head 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
Paginierung
<div class="page-navigation">
<ul class="neos-widget-paginator">
<li class="previous">
<a href="#">vorherige</a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="current">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li class="next">
<a href="#">nächste</a>
</li>
</ul>
</div>