Input Icon

The input icons are a special extension of the form groups. In this, an input and an icon are specially designed into an optical component.

The following code examples shows how to use form group:

<div class="form-group form-group--icon">
  <input type="text" class="input">
  <div class="form-group__icon icon icon--user"></div>
</div>

The following list describe all existing block/element/modifier classes of the component.

.form-group--icon - required the extension for the form group, that design the input & icon group to one component
.form-group--page-header - finnet theme for page header

Basic Example:

Theme basic Screen size XL

html

Theme

In the following, very special variants for certain themes are presented.

The following example shows a special theme of the input icon, which only occurs in the finanzen.net Page Header.

For this design to work, the input icon must be located within the .page-header class.

Theme de [FIX] Screen size XL

html