Components
Alert
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>Await
<div class="await await-xl await--primary"></div>
<div class="await await-xl await--light"></div>
<div class="await await-lg await--primary"></div>
<div class="await await-lg await--light"></div>
<div class="await await--primary"></div>
<div class="await await--light"></div>
<div class="await await-sm await--primary"></div>
<div class="await await-sm await--light"></div>
<hr />
<button class="btn btn-primary btn-lg">
<div class="await await--inverse"></div>
</button>
<button class="btn btn-primary btn-lg btn-await btn-await--inverse">loading</button>
<hr />
<button class="btn btn-primary">
<div class="await await--inverse"></div>
</button>
<button class="btn btn-primary btn-await btn-await--inverse">loading</button>
<hr />
<button class="btn btn-primary btn-sm">
<div class="await await--inverse"></div>
</button>
<button class="btn btn-primary btn-sm btn-await btn-await--inverse">loading</button>Breadcrumb
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Rechte & Pflichten</li>
</ol>Button
These are notes associated with this button component.
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Checkbox
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<div class="checkbox">
<input id="first" type="checkbox" checked="checked" />
<label for="first">
First checkbox
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>Header
Arbeitslosenversicherung ALV
<div class="alv-header alv-header--inverse">
<span class="alv-header__brand mb-0">
<img src=".//assets/styleguide/images/swiss.svg" width="20" height="20" class="d-inline-block" alt="Swiss Confederation">
Arbeitslosenversicherung ALV
</span>
</div>Job Search Toolbar
<div class="toolbar toolbar--light md-whiteframe-3dp">
<jr2-job-search-toolbar jhistickytoolbaritem="" _nghost-c2="">
<div _ngcontent-c2="" class="container">
<div _ngcontent-c2="" class="toolbar-collapse">
<form _ngcontent-c2="" novalidate="" class="ng-untouched ng-pristine ng-valid">
<div _ngcontent-c2="" class="form-inline toolbar-form">
<div _ngcontent-c2="" class="form-group form-group--wide">
<jr2-typeahead-multiselect _ngcontent-c2="" formcontrolname="baseQuery" _nghost-c3="" class="ng-untouched ng-pristine ng-valid">
<div _ngcontent-c3="" class="form-control form-control-lg typeahead-multiselect d-flex flex-row flex-wrap">
<input _ngcontent-c3="" aria-multiline="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" class="input typeahead-multiselect__input ng-untouched ng-pristine ng-valid" name="inputValue" role="combobox" placeholder="Berufsbezeichnung, Berufsgruppe, Fähigkeiten"
aria-autocomplete="list" aria-expanded="false">
</div>
</jr2-typeahead-multiselect>
</div>
<div _ngcontent-c2="" class="form-group form-group--icon">
<jr2-typeahead-multiselect _ngcontent-c2="" formcontrolname="localityQuery" _nghost-c3="" class="ng-untouched ng-pristine ng-valid">
<div _ngcontent-c3="" class="form-control form-control-lg typeahead-multiselect d-flex flex-row flex-wrap">
<input _ngcontent-c3="" aria-multiline="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" class="input typeahead-multiselect__input ng-untouched ng-pristine ng-valid" name="inputValue" role="combobox" placeholder="Ort, Region, Kanton"
aria-autocomplete="list" aria-expanded="false">
</div>
</jr2-typeahead-multiselect>
<jr2-geo-location-select _ngcontent-c2="" _nghost-c4="">
<!---->
</jr2-geo-location-select>
</div>
<div style="flex-grow: 1;" class="d-none d-sm-block"></div>
<button _ngcontent-c2="" class="btn btn-primary btn-lg" type="submit"> <!----> <!----><span
_ngcontent-c2=""><span>500+ Jobs</span></span></button>
</div>
</form>
</div>
</div>
</jr2-job-search-toolbar>
</div>Jumbotron
Finden Sie jetzt Ihren Traumjob!
<div class="jumbotron jumbotron-fluid jumbotron--landingpage" style="background: url('.//assets/styleguide/images/bg-jobroom-landingpage.png');">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 col-xxl-8">
<div class="content--job-search">
<h1 class="tool__heading">Finden Sie jetzt Ihren Traumjob!</h1>
<div class="d-flex flex-row">
<div class="job-search__form">
<form>
<div class="form-group form-group--wide">
<label for="formGroupExampleInput" class="sr-only">Berufsbezeichnung, Berufsgruppe, Fähigkeiten</label>
<input type="text" class="form-control form-control-lg" id="formGroupExampleInput" placeholder="Berufsbezeichnung, Berufsgruppe, Fähigkeiten" />
</div>
<div class="form-group form-group--wide form-group--icon">
<label for="basic-addon2" class="sr-only">Ort, Region, Kanton</label>
<input type="text" class="form-control form-control-lg" placeholder="Ort, Region, Kanton" id="basic-addon2" />
<!-- todo refine -->
<a href="#" class="fa-stack form-control--icon">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-map-marker fa-stack-1x fa-inverse"></i>
</a>
</div>
<div class="form-group range-slider">
<label for="radius" class="sr-only">Radius</label>
<input class="range-slider__range" min="5" max="150" step="5" value="20" type="range" id="radius" />
<span class="range-slider__value range-slider__value--unit" data-unit="km">0</span>
</div>
<a class="btn btn-primary btn-lg btn-block" href="job-room/job-result-list.html">Traumjob finden!</a>
</form>
</div>
<div class="job-search__radar">
<div class="job-radar d-none d-md-inline-block">
Diesem Job-Profil entsprechen bereits<br />
<span class="badge badge-radar">1'644</span><br /> Jobs
<a href="job-room/job-result-list.html">Jetzt anzeigen!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Lists
Ordered
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>Unordered
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>Logo
nameswiss
nameswiss
nameswiss
nameswiss
Brand
nameswiss
Brand
nameswiss
Brand
alvswiss
Job-Room
alvswiss
amstat
alvswiss
w400px * h200px
<!-- REFACTORING -> LISTS -->
<div class="alv-logo">
<div class="alv-logo__title">
<strong>name</strong><span class="title__plus-ch">swiss</span>
</div>
</div>
<p></p>
<div class="alv-logo alv-logo--inverse">
<div class="alv-logo__title">
<strong>name</strong><span class="title__plus-ch">swiss</span>
</div>
</div>
<p></p>
<div class="alv-logo alv-logo--dark">
<div class="alv-logo__title">
<strong>name</strong><span class="title__plus-ch">swiss</span>
</div>
</div>
<hr />
<div class="alv-logo">
<div class="alv-logo__title-small">
<strong>name</strong><span class="title__plus-ch">swiss</span>
</div>
<span class="alv-logo__brand">Brand</span>
</div>
<p></p>
<div class="alv-logo alv-logo--inverse">
<div class="alv-logo__title-small">
<strong>name</strong><span class="title__plus-ch">swiss</span>
</div>
<span class="alv-logo__brand">Brand</span>
</div>
<p></p>
<div class="alv-logo alv-logo--dark">
<div class="alv-logo__title-small">
<strong>name</strong><span class="title__plus-ch">swiss</span>
</div>
<span class="alv-logo__brand">Brand</span>
</div>
<hr />
<div class="alv-logo">
<div class="alv-logo__title">
<strong>alv</strong><span class="title__plus-ch">swiss</span>
</div>
</div>
<p></p>
<div class="alv-logo alv-logo--inverse">
<strong class="alv-logo__brand--job-room">Job-Room</strong>
<div class="alv-logo__title-small">
<strong>alv</strong><span class="title__plus-ch">swiss</span>
</div>
</div>
<p></p>
<div class="alv-logo alv-logo--dark">
<strong class="alv-logo__brand--amstat">amstat</strong>
<div class="alv-logo__title-small">
<strong>alv</strong><span class="title__plus-ch">swiss</span>
</div>
</div>
<hr />
<nav class="navbar navbar-light bg-faded">
<div class="container">
<a class="navbar-brand alv-logo" href="#">
<div class="alv-logo__title">
<strong>name</strong><span class="title__plus-ch">swiss</span>
</div>
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Item</a>
</li>
</ul>
</div>
</nav>
<hr />
<div style="width: 400px; height: 200px;">
<span class="alv-logo-box">
w400px * h200px
</span>
</div>Pagination
<ul class="pagination pagination--block pagination-alv">
<li class="page-item">
<a class="page-link" href="#" tabindex="-1"><i class="fa fa-chevron-left" aria-hidden="true"></i> Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</li>
</ul>Paragraph
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>Radio
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend>Styled Radio buttons</legend>
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4" checked="checked">
<label for="optionsRadios4">
First radio
</label>
</div>
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5" checked="checked">
<label for="optionsRadios5">
Second radio
</label>
</div>
</fieldset>Search
<form class="form-inline">
<div class="collapse" id="searchForm">
<div class="form-group form-group--navbar">
<label for="search" class="sr-only">Wie können wir helfen?</label>
<div class="form-group--icon">
<input type="text" class="form-control" placeholder="Wie können wir helfen?" id="search" />
<a data-toggle="collapse" href="#searchForm" aria-expanded="false" aria-controls="searchForm" class="fa-stack form-control--icon">
<i class="fa fa-times fa-stack-1x"></i>
</a>
</div>
</div>
</div>
<a class="nav-link nav-link--search-left" data-toggle="collapse" href="#searchForm" aria-expanded="false" aria-controls="searchForm"><i class="fa fa-search" aria-hidden="true"></i></a>
</form>Search B
<form class="form-inline">
<div class="form-group form-group--navbar">
<label for="search" class="sr-only">Wie können wir helfen?</label>
<div class="form-group--icon">
<input type="text" class="form-control" id="search" />
<a data-toggle="collapse" href="#searchForm" aria-expanded="false" aria-controls="searchForm" class="fa-stack form-control--icon">
<i class="fa fa-times fa-stack-1x"></i>
</a>
</div>
</div>
<a class="nav-link nav-link--search-left" aria-controls="searchForm"><i class="fa fa-search" aria-hidden="true"></i></a>
</form>Select
<div class="form-group">
<label for="exampleSelect1">Password</label>
<select class="form-control" name="exampleSelect1" id="exampleSelect1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>Table
| Table Heading 1 | Table Heading 2 | Table Heading 3 |
|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
<table class="table">
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</tbody>
</table>Text Input
We'll never share your email with anyone else.
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>Textarea
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>Typeahead
dropdown
selected items
java
Produkt-Entwicklerin (Java)
Berufe der Informatik
<h3>dropdown</h3>
<ngb-typeahead-window class="dropdown-menu" role="listbox" style="display: block; position: static;" id="ngb-typeahead-0">
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-0">
<div
class="typeahead-multiselect__type-label pull-right typeahead-multiselect__type-label--occupation"
ng-reflect-klass="typeahead-multiselect__type-la"
ng-reflect-ng-class="typeahead-multiselect__type-la"> Occupation
</div>
<div>
<ngb-highlight
ng-reflect-result="Mitarbeiter Info-Desk"
ng-reflect-term="info">
Mitarbeiter<span class="ngb-highlight">Info</span>-Desk
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-1">
<div >
<ngb-highlight
ng-reflect-result="Info Broker" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>Broker
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-2">
<div >
<ngb-highlight
ng-reflect-result="Info-Broker" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>-Broker
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-3">
<div >
<ngb-highlight
ng-reflect-result="Info-Brokerin" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>-Brokerin
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-4">
<div >
<ngb-highlight
ng-reflect-result="Mitarbeiterin Info-Desk"
ng-reflect-term="info">Mitarbeiterin <span
class="ngb-highlight">Info</span>-Desk
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-5">
<div >
<ngb-highlight
ng-reflect-result="Info Brokerin" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>Brokerin
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-6">
<div >
<ngb-highlight
ng-reflect-result="Infografiker" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>grafiker
</ngb-highlight>
</div>
</button>
<button class="dropdown-item active" role="option" type="button" id="ngb-typeahead-0-7">
<div >
<ngb-highlight
ng-reflect-result="Infografikerin" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>grafikerin
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-8">
<div >
<ngb-highlight
ng-reflect-result="Infografist" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>grafist
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-9">
<div >
<ngb-highlight
ng-reflect-result="Infografistin" ng-reflect-term="info">
<span class="ngb-highlight">Info</span>grafistin
</ngb-highlight>
</div>
</button>
<button class="dropdown-item" role="option" type="button" id="ngb-typeahead-0-10">
<div
class="typeahead-multiselect__type-label pull-right typeahead-multiselect__type-label--classification"
ng-reflect-klass="typeahead-multiselect__type-la"
ng-reflect-ng-class="typeahead-multiselect__type-la"> Classification
</div>
<div class="fist-in-group-item"
>
<ngb-highlight
ng-reflect-result="Berufe der Informatik"
ng-reflect-term="info">Berufe der<span
class="ngb-highlight">Info</span>rmatik
</ngb-highlight>
</div>
</button>
</ngb-typeahead-window>
<p class="clearfix"></p>
<h3>selected items</h3>
<jr2-typeahead-multiselect class="ng-untouched ng-valid ng-dirty">
<div class="form-control form-control-lg typeahead-multiselect d-flex flex-row flex-wrap">
<span class="badge small typeahead-multiselect__tag typeahead-multiselect__tag--free-text">
java <i aria-hidden="true" class="fa fa-times remove-button"></i>
</span>
<span class="badge small typeahead-multiselect__tag typeahead-multiselect__tag--occupation">
Produkt-Entwicklerin (Java) <i aria-hidden="true" class="fa fa-times remove-button"></i>
</span>
<span class="badge small typeahead-multiselect__tag typeahead-multiselect__tag--classification">
Berufe der Informatik <i aria-hidden="true" class="fa fa-times remove-button"></i>
</span>
<form autocomplete="off" novalidate="" class="ng-valid ng-touched ng-dirty">
<input aria-multiline="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus="" class="input typeahead-multiselect__input ng-valid ng-touched ng-dirty" name="inputValue" role="combobox" placeholder="" aria-autocomplete="list" aria-expanded="false"
/>
</form>
</div>
</jr2-typeahead-multiselect>