Cevora

This component can be considered a container that is always fixed positioned within the body of the project. By default it is positioned at the bottom and can contain any type of content. But we recommend to use only actions, buttons or links that should always be in the view of the user.

Javascript

Default


			
				<div class="o-fixed-block js-fixed-block ">
	<div class="o-fixed-block__content">
		<div class="l-grid l-grid--with-spacing l-grid--align-middle">
			<div class="l-grid__col l-grid__col--6@viewport-7 u-align-center@below-viewport-7 u-align-left@above-viewport-7">
				<a class="a-link a-link--decorated " href="">
					<span class="a-link__text">Verder winkelen</span>
				</a>
			</div>
			<div class="l-grid__col l-grid__col--6@viewport-7 u-align-right@above-viewport-7">
				<a class="a-button u-width-100@below-viewport-7" href="">
					<span class="a-button__text">Inschrijven</span>
				</a>
			</div>
		</div>
	</div>
</div>

Documentation

JavaScript

js-fixed-block

With CSS the block is positioned correctly onto the view. But because of its fixed position, JavaScript takes care of the lost space within the body. This is done by calculating the height of the component and placing that as padding-bottom onto the body.