Cevora

A simple component that makes use of the grid to position 2 blocks next to each other. These two blocks are either an image or a block of content supporting that image.

Modifiers

Default


			
				<article class="m-article ">
	<div class="m-article__grid l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="m-article__image l-grid__col l-grid__col--6@viewport-9">
			<div class="a-image ">
				<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="placeholder" title="placeholder" />
			</div>
		</div>
		<div class="m-article__content l-grid__col l-grid__col--6@viewport-9">
			<div class="m-article__content-container">
				<h4>Schrijf je makkelijk in</h4>
				<p>
					Sed posuere consectetur est at lobortis. Cras justo odio,
					dapibus ac facilisis in, egestas eget quam. Aenean eu leo
					quam. Pellentesque ornare sem lacinia quam venenatis
					vestibulum.
				</p>
			</div>
		</div>
	</div>
</article>

With decoration filled


			
				<article class="m-article m-article--decoration-filled m-article--decoration-left">
	<div class="m-article__grid l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="m-article__image l-grid__col l-grid__col--6@viewport-9">
			<div class="a-image ">
				<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="placeholder" title="placeholder" />
			</div>
		</div>
		<div class="m-article__content l-grid__col l-grid__col--6@viewport-9">
			<div class="m-article__content-container">
				<h4>Schrijf je makkelijk in</h4>
				<p>
					Sed posuere consectetur est at lobortis. Cras justo odio,
					dapibus ac facilisis in, egestas eget quam. Aenean eu leo
					quam. Pellentesque ornare sem lacinia quam venenatis
					vestibulum.
				</p>
			</div>
		</div>
	</div>
</article>

With decoration left


			
				<article class="m-article m-article--decoration-filled m-article--decoration-left">
	<div class="m-article__grid l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="m-article__image l-grid__col l-grid__col--6@viewport-9">
			<div class="a-image ">
				<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="placeholder" title="placeholder" />
			</div>
		</div>
		<div class="m-article__content l-grid__col l-grid__col--6@viewport-9">
			<div class="m-article__content-container">
				<h4>Schrijf je makkelijk in</h4>
				<p>
					Sed posuere consectetur est at lobortis. Cras justo odio,
					dapibus ac facilisis in, egestas eget quam. Aenean eu leo
					quam. Pellentesque ornare sem lacinia quam venenatis
					vestibulum.
				</p>
			</div>
		</div>
	</div>
</article>

With decoration outline


			
				<article class="m-article m-article--decoration-outline m-article--decoration-left">
	<div class="m-article__grid l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="m-article__image l-grid__col l-grid__col--6@viewport-9">
			<div class="a-image ">
				<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="placeholder" title="placeholder" />
			</div>
		</div>
		<div class="m-article__content l-grid__col l-grid__col--6@viewport-9">
			<div class="m-article__content-container">
				<h4>Schrijf je makkelijk in</h4>
				<p>
					Sed posuere consectetur est at lobortis. Cras justo odio,
					dapibus ac facilisis in, egestas eget quam. Aenean eu leo
					quam. Pellentesque ornare sem lacinia quam venenatis
					vestibulum.
				</p>
			</div>
		</div>
	</div>
</article>

With decoration right


			
				<article class="m-article m-article--decoration-filled m-article--decoration-right">
	<div class="m-article__grid l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="m-article__image l-grid__col l-grid__col--6@viewport-9">
			<div class="a-image ">
				<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="placeholder" title="placeholder" />
			</div>
		</div>
		<div class="m-article__content l-grid__col l-grid__col--6@viewport-9">
			<div class="m-article__content-container">
				<h4>Schrijf je makkelijk in</h4>
				<p>
					Sed posuere consectetur est at lobortis. Cras justo odio,
					dapibus ac facilisis in, egestas eget quam. Aenean eu leo
					quam. Pellentesque ornare sem lacinia quam venenatis
					vestibulum.
				</p>
			</div>
		</div>
	</div>
</article>

Documentation

Modifiers

m-article--decoration-filled

Add a decoration (arrows), that have a filled color, to the component.
m-article--decoration-outline

Add a decoration (arrows), that have an outline color, to the component.
m-article--decoration-left

Always combine with --decoration-filled or --decoration-outline. Place the position of the decoration on the left side of the component.
m-article--decoration-right

Always combine with --decoration-filled or --decoration-outline. Place the position of the decoration on the right side of the component.