<div id="job-breaker-15131-53912" class="job-breaker u-inverted">
<div class="job-breaker__headline">
<h2 class="headline headline--3"><span class="headline__text">Durchsuche unsere Job-Angebote</span></h2>
</div>
<form class="job-breaker__form" method="get">
<div class="job-breaker__field">
<div id="job-breaker-15131-53912-q" class="large-input large-input--frameless has-overlay-link">
<label for="job-breaker-15131-53912-q-input" class="large-input__label">Stichwort oder Unternehmen</label>
<input class="large-input__input" id="job-breaker-15131-53912-q-input" name="q" type="text">
</div>
</div>
<div class="job-breaker__field">
<div id="job-breaker-15131-53912-location" class="large-input large-input--frameless has-overlay-link">
<label for="job-breaker-15131-53912-location-input" class="large-input__label">Ort oder PLZ</label>
<input class="large-input__input" id="job-breaker-15131-53912-location-input" name="location" type="text">
</div>
</div>
<div class="job-breaker__button">
<button class="button u-underline" type="submit">Direkt zu den Jobs</button>
</div>
</form>
</div>
{% set level = level ?? 2 %}
{% set id = id ??? html_id('job-breaker') -%}
<div {{ html_attributes({
id: id,
class: 'job-breaker u-inverted',
}, attrs ?? {}) }}>
{% if headline|default %}
<div class="job-breaker__headline">
{% include '@headline' with headline | merge({
level: level,
size: 3,
}) only %}
</div>
{% endif %}
<form {{ html_attributes({
class: 'job-breaker__form',
action: action ??? '',
method: method ??? 'get',
}) }}>
{{ csrf|default ? csrfInput({ autocomplete: 'false' }) }}
{{ actionMethod|default ? actionInput(actionMethod) }}
{{ redirectUrl|default ? redirectInput(redirectUrl) }}
{% for name, value in hiddenInputs|default %}
{{ value ? hiddenInput(name, value) }}
{% endfor %}
{% for field in fields %}
<div class="job-breaker__field">
{% include '@large-input' with {
id: field.name | namespaceInputId(id),
name: field.name,
label: field.label,
type: 'text',
frameless: true,
} only %}
</div>
{% endfor %}
<div class="job-breaker__button">
{% include '@button' with submit | merge({
type: 'submit',
}) only %}
</div>
</form>
</div>
{
"headline": {
"text": "Durchsuche unsere Job-Angebote"
},
"fields": [
{
"label": "Stichwort oder Unternehmen",
"name": "q"
},
{
"label": "Ort oder PLZ",
"name": "location"
}
],
"submit": {
"text": "Direkt zu den Jobs"
}
}
:root {
--job-breaker-background-color: var(--color-midnight);
--job-breaker-color: var(--color-white);
--job-breaker-inner-max-width: 100rem;
--job-breaker-field-button-height: 7.8rem;
@include use-responsive-sizing(--job-breaker-padding-block, responsive-map(xs 3rem, xl 5rem));
@include use-responsive-sizing(--job-breaker-padding-inline, responsive-map(xs 2rem, xl 5rem));
}
.job-breaker {
background-color: var(--job-breaker-background-color);
color: var(--job-breaker-color);
padding-block: var(--job-breaker-padding-block);
padding-inline: var(--job-breaker-padding-inline);
text-align: center;
}
.job-breaker__headline {
margin-block-end: var(--job-breaker-padding-block);
}
.job-breaker__form {
display: flex;
flex-wrap: wrap;
margin-inline: auto;
max-inline-size: var(--job-breaker-inner-max-width);
text-align: start;
@include use-responsive-sizing(column-gap, $gaps);
@include use-responsive-sizing(row-gap, responsive-map(xs 1.5rem, xl 3rem));
}
.job-breaker__field {
--large-input-height: var(--job-breaker-field-button-height);
flex-basis: 25%;
flex-grow: 1;
min-inline-size: 30rem;
}
.job-breaker__button {
--button-width: 100%;
--button-height: var(--job-breaker-field-button-height);
flex-basis: 15%;
flex-grow: 1;
flex-shrink: 0;
min-inline-size: 24rem;
}
No notes defined.