Each variation will be presented in the following section.
component)This blueprint is based on the blueprint of Veams.
Veams#5.0.0veams install bp absolute/filepath/to/search-section
search-section.hbs| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.searchSectionClasses | String | '' |
Modifier classes for component |
| settings.searchSectionContextClass | String | 'default' |
Context class of component for the landingpage |
| settings.searchSectionContextClass | String | 'rte' |
Context class of component for the detailpage |
| Parameter | Type | Description |
|---|---|---|
| content.headline | String | Headline for the Searchfield |
| content.introText | String | Text under the Headline and before the search input field |
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $search-section-my-custom-var | 0px |
Please add a description! |
There are modifier classes you can add to c-search-section:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
<div class="c-search-section{{#if settings.searchSectionContextClass}}--{{settings.searchSectionContextClass}}{{else}}--default{{/if}}{{#if settings.searchSectionClasses}} {{settings.searchSectionClasses}}{{/if}}"
data-css="c-search-section">
{{#if content.headline}}<h2 class="search-section__headline">{{content.headline}}</h2>{{/if}}
{{#if content.introText}}<div class="search-section__intro-text">{{content.introText}}</div>{{/if}}
<div class="search-section__search-enter">
{{#with @root.search-enter.variations.searchfield}}
{{> search-enter }}
{{/with}}
</div>
</div>
{
"variations": {
"default": {
"docs": {
"variationName": "Default Such-Absatz Deutsch (Übersichtsseite)"
},
"settings": {
"searchSectionContextClass": "default",
"searcSectionClasses": "",
"searchSectionJsOptions": {}
},
"content": {
"headline":"Headline für externe Suche (Optional)",
"introText":"Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)"
}
},
"rte": {
"docs": {
"variationName": "Default Such-Absatz Deutsch (Detailseite)"
},
"settings": {
"searchSectionContextClass": "rte",
"searcSectionClasses": "",
"searchSectionJsOptions": {}
},
"content": {
"headline":"Headline für externe Suche (Optional)",
"introText":"Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)"
}
}
}
}
/* ===================================================
component: search-section
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-search-section"] {
.search-section__headline {
@include headline-h2-styles();
}
.search-section__intro-text{
padding-bottom: 25px;
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-search-section--default {
margin-bottom: 60px;
@include bp($bp-mobile-p) {
margin-bottom: 80px;
}
@include bp($bp-tablet-p) {
margin-bottom: 100px;
margin-top: 0;
}
@include bp(1920px) {
margin-bottom: 120px;
}
}
.c-search-section--rte {
@include rte-dimensions();
margin-bottom: 60px;
.search-section__headline, .search-section__intro-text, .search-section__search-enter{
width: 100%;
flex: 0 0 100%;
margin-left: 0px;
}
}
<div class="c-search-section--default" data-css="c-search-section">
<h2 class="search-section__headline">Headline für externe Suche (Optional)</h2>
<div class="search-section__intro-text">Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)</div>
<div class="search-section__search-enter">
<div class="c-search-enter--searchfield" data-css="c-search-enter">
<form class="search-enter__form" action="#">
<div class="search-enter__input-group-wrapper">
<input name="q" data-js-item="search-enter-field" type="text" autocomplete="off" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben" class="search-enter__input-text" />
<div class="search-enter__button-area">
<button type="submit" title="Suchen" aria-label="Suchen" class="search-enter__button">
</button>
</div>
</div>
<div class="search-enter__dsgvo-area">
<span class="search-enter__dsgvo-text">Datenschutzhinweis mit Link</span>
</div>
</form>
</div>
</div>
</div><div class="c-search-section--rte" data-css="c-search-section">
<h2 class="search-section__headline">Headline für externe Suche (Optional)</h2>
<div class="search-section__intro-text">Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)</div>
<div class="search-section__search-enter">
<div class="c-search-enter--searchfield" data-css="c-search-enter">
<form class="search-enter__form" action="#">
<div class="search-enter__input-group-wrapper">
<input name="q" data-js-item="search-enter-field" type="text" autocomplete="off" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben" class="search-enter__input-text" />
<div class="search-enter__button-area">
<button type="submit" title="Suchen" aria-label="Suchen" class="search-enter__button">
</button>
</div>
</div>
<div class="search-enter__dsgvo-area">
<span class="search-enter__dsgvo-text">Datenschutzhinweis mit Link</span>
</div>
</form>
</div>
</div>
</div>