SEARCH-SECTION (component )

src/app/shared/components/search-section/templates

Demo Section

Each variation will be presented in the following section.

Default Such-Absatz Deutsch (Übersichtsseite)

Headline für externe Suche (Optional)

Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)
Datenschutzhinweis mit Link

Default Such-Absatz Deutsch mit Hintergrundfrabe (Übersichtsseite)

Headline für externe Suche (Optional)

Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)
Datenschutzhinweis mit Link

RTE Such-Absatz Deutsch (Detailseite)

Headline für externe Suche (Optional)

Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)
Datenschutzhinweis mit Link

RTE Such-Absatz Deutsch mit Hintergrundfarbe (Detailseite)

Headline für externe Suche (Optional)

Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)
Datenschutzhinweis mit Link

Readme

searchSection (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/search-section

Fields

search-section.hbs

Settings

Parameter Type Default Description
settings.searchSectionClasses String '' Modifier classes for component: ‘is-bgcolor’: For a view with a bgcolor;
settings.searchSectionContextClass String 'default' Context class of component for the landingpage
settings.searchSectionContextClass String 'rte' Context class of component for the detailpage
settings.searchSectionBgColor String 'yes' When set the View with a Backgroundcolor is used
settings.searchSectionPlaceholder String 'yes' When set the Parameter for a landingpage wiew will be integrated

Content

Parameter Type Description
content.headline String Headline for the Searchfield
content.introText String Text under the Headline and before the search input field

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$search-section-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-search-section:

Modifier Description
is-modifier Please add a description!

Templates

search-section.hbs

<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 settings.searchSectionPlaceholder}}
	   <div class="grid__container">
		<div class="grid__row">
	{{/if}}
	<div class="search-section__container">
		{{#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">
			{{#if settings.searchSectionBgColor}}
				{{#with @root.search-enter.variations.searchfieldwbgcolor}}
					{{> search-enter }}
				{{/with}}
			{{else}}
				{{#with @root.search-enter.variations.searchfield}}
					{{> search-enter }}
				{{/with}}
			{{/if}}
		</div>
	</div>
	 {{#if settings.searchSectionPlaceholder}}
	   </div>
		</div>
	{{/if}}
</div>

Data File

search-section.hjson

{
    "variations": {
        "default": {
            "docs": {
                "variationName": "Default Such-Absatz Deutsch (Übersichtsseite)"
            },
            "settings": {
                "searchSectionContextClass": "default",
                "searchSectionClasses": "",
                "searchSectionJsOptions": {},
				"searchSectionPlaceholder": "yes"
            },
            "content": {
				"headline":"Headline für externe Suche (Optional)",
				"introText":"Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)"
            }
		},
		 "defaultwbgcolor": {
            "docs": {
                "variationName": "Default Such-Absatz Deutsch mit Hintergrundfrabe (Übersichtsseite)"
            },
            "settings": {
                "searchSectionContextClass": "default",
                "searchSectionClasses": "is-bgcolor",
                "searchSectionJsOptions": {},
				"searchSectionPlaceholder": "yes",
				"searchSectionBgColor": "yes"
            },
            "content": {
				"headline":"Headline für externe Suche (Optional)",
				"introText":"Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)"
            }
		},
		 "rte": {
            "docs": {
                "variationName": "RTE Such-Absatz Deutsch (Detailseite)"
            },
            "settings": {
                "searchSectionContextClass": "rte",
                "searchSectionClasses": "",
                "searchSectionJsOptions": {}
            },
            "content": {
				"headline":"Headline für externe Suche (Optional)",
				"introText":"Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)"
            }
		},
		"rtewbgcolor": {
            "docs": {
                "variationName": "RTE Such-Absatz Deutsch mit Hintergrundfarbe (Detailseite)"
            },
            "settings": {
                "searchSectionContextClass": "rte",
                "searchSectionClasses": "is-bgcolor",
                "searchSectionJsOptions": {},
				"searchSectionBgColor": "yes"
            },
            "content": {
				"headline":"Headline für externe Suche (Optional)",
				"introText":"Hier steht dann noch Näheres zu der entsprechenden Suche (Optional)"
            }
		}
    }
}

Styles

search-section.scss

/* ===================================================
component: search-section
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-search-section"] {

	.search-section__headline {
		@include headline-h2-styles();
	}

	.search-section__intro-text{
		padding-bottom: 25px;
	}

	&.is-bgcolor {
		background-color: $color-light;

		.search-section__container {
			padding: 30px 0;

			@include bp($bp-tablet-p) {
			padding: 55px 0;
			}

			@include bp($bp-desktop-m) {
			padding: 60px 0;
			}
		}
	}

}

/* ---------------------------------------------------
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 {

	margin-bottom: 60px;

	.search-section__container {
		@include rte-dimensions();
	}

	.search-section__headline, .search-section__intro-text, .search-section__search-enter{
		width: 100%;
		flex: 0 0 100%;
		margin-left: 0px;

	}

}

HTML Output

Default Such-Absatz Deutsch (Übersichtsseite)

<div class="c-search-section--default" data-css="c-search-section">
	<div class="grid__container">
		<div class="grid__row">
			<div class="search-section__container">
				<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>
	</div>
</div>

Default Such-Absatz Deutsch mit Hintergrundfrabe (Übersichtsseite)

<div class="c-search-section--default is-bgcolor" data-css="c-search-section">
	<div class="grid__container">
		<div class="grid__row">
			<div class="search-section__container">
				<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 is-bgcolor" 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>
	</div>
</div>

RTE Such-Absatz Deutsch (Detailseite)

<div class="c-search-section--rte" data-css="c-search-section">
	<div class="search-section__container">
		<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>

RTE Such-Absatz Deutsch mit Hintergrundfarbe (Detailseite)

<div class="c-search-section--rte is-bgcolor" data-css="c-search-section">
	<div class="search-section__container">
		<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 is-bgcolor" 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>

Wonach suchst du?

Datenschutzhinweis mit Link