Cevora

The banner component is used to grasp a users' focus and direct them to other relevant information. It can be used throughout a page based on how important that content is or how hard it needs to be in the spotlight.

By default the banner must have a fallback, when there is no url of the image passed or is empty. The arrows on the background and the grey-ish color are always present. The text color should also change from white to blue when no image is shown. This is all done by adding the modifier m-banner--decorated to the root of the component.

Modifiers

Decorated

The decorated banner consists out of the same elements as the default. But the Cevora branding has been added in the form of shapes (arrows) at the sides of the banner.

It is mainly used when an image is not appropriate or when the content inside is more important (e.g. additional cards).


			
				<section class="m-banner m-banner--decorated m-banner--decorated">
	<div class="l-container m-banner__container">
		<header class="m-banner__header">
			<small class="m-banner__subtitle">John Porter, CEO Telenet</small>
			<h2 class="m-banner__title">De opleidingen, georganiseerd in ons bedrijf, met inhoud op maat van onze werknemers zijn van onschatbare waarde.</h2>
		</header>
		<div class="m-banner__action">
			<a class="a-button " href="">
				<span class="a-button__text">Ontdek mycevora</span>
			</a>
		</div>
	</div>
</section>

Default

The default banner is defined as an eye-catcher supported by a background-image.

It is mainly used if you want to grab a users attention even more than with a decorated banner. This banner is not appropriate when the content inside is more important (e.g. additional cards).


			
				<section class="m-banner  " style="background-image: url('/assets/images/banner/placeholder.png');">
	<div class="l-container m-banner__container">
		<header class="m-banner__header">
			<small class="m-banner__subtitle">John Porter, CEO Telenet</small>
			<h2 class="m-banner__title">De opleidingen, georganiseerd in ons bedrijf, met inhoud op maat van onze werknemers zijn van onschatbare waarde.</h2>
		</header>
		<div class="m-banner__action">
			<a class="a-button " href="">
				<span class="a-button__text">Ontdek mycevora</span>
			</a>
		</div>
	</div>
</section>

With one card

A banner that is supported by content. In this case the content is filled up with cards. Any amount of cards can be added, up to 3 as a maximum.


			
				<section class="m-banner m-banner--decorated m-banner--decorated">
	<div class="l-container m-banner__container">
		<header class="m-banner__header">
			<small class="m-banner__subtitle">Niet gevonden wat U zocht?</small>
			<h2 class="m-banner__title">Bekijk deze aanvullende thema&#39;s</h2>
		</header>
		<div class="m-banner__content">
			<div class="o-card-group">
				<ul class="o-card-group__list l-grid l-grid--with-spacing l-grid--stretch">
					<li class="o-card-group__item l-grid__col l-grid__col--4@viewport-7">
						<div class="m-card ">
							<p class="m-card__description">
								Ik volg ergens anders een opleiding. Krijg ik een opleidingspremie?
							</p>
							<div class="m-card__action ">
								<a class="a-link a-link--decorated " href="">
									<span class="a-link__text">Bekijk opleidingspremies</span>
								</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</section>

With three cards

A banner that is supported by content. In this case the content is filled up with cards. Any amount of cards can be added, up to 3 as a maximum.


			
				<section class="m-banner m-banner--decorated m-banner--decorated">
	<div class="l-container m-banner__container">
		<header class="m-banner__header">
			<small class="m-banner__subtitle">Niet gevonden wat U zocht?</small>
			<h2 class="m-banner__title">Bekijk deze aanvullende thema&#39;s</h2>
		</header>
		<div class="m-banner__content">
			<div class="o-card-group">
				<ul class="o-card-group__list l-grid l-grid--with-spacing l-grid--stretch">
					<li class="o-card-group__item l-grid__col l-grid__col--4@viewport-7">
						<div class="m-card ">
							<p class="m-card__description">
								Ik volg ergens anders een opleiding. Krijg ik een opleidingspremie?
							</p>
							<div class="m-card__action ">
								<a class="a-link a-link--decorated " href="">
									<span class="a-link__text">Bekijk opleidingspremies</span>
								</a>
							</div>
						</div>
					</li>
					<li class="o-card-group__item l-grid__col l-grid__col--4@viewport-7">
						<div class="m-card ">
							<p class="m-card__description">
								Ik volg ergens anders een opleiding. Krijg ik een opleidingspremie?
							</p>
							<div class="m-card__action ">
								<a class="a-link a-link--decorated " href="">
									<span class="a-link__text">Bekijk opleidingspremies</span>
								</a>
							</div>
						</div>
					</li>
					<li class="o-card-group__item l-grid__col l-grid__col--4@viewport-7">
						<div class="m-card ">
							<p class="m-card__description">
								Ik volg ergens anders een opleiding. Krijg ik een opleidingspremie?
							</p>
							<div class="m-card__action ">
								<a class="a-link a-link--decorated " href="">
									<span class="a-link__text">Bekijk opleidingspremies</span>
								</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</section>

With two cards

A banner that is supported by content. In this case the content is filled up with cards. Any amount of cards can be added, up to 3 as a maximum.

Documentation

Modifiers

m-banner--decorated

Indicate that the banner no longers uses an image as a background, but instead applies a more Cevora-brand-like shape as a background.