Blocks

Content block

Basiaclly, if you need some vertical margin on component, wrap it inside .content-block element.

White block

Basic UI elemenet, we put almost everything in these (charts, forms, etc…), except other blocks and datagrids. Since they have white background, they’re css class is white-block.

Example block content 

<div class="white-block">
	<p>
		Example block content
	</p>
</div>

Headers

Blocks can have header, just put header tag on top and make sure it’s as :first-child and you’re good to go.

Block heading

Example block content 

<div class="white-block">
	<header>
		<h2>
			Block heading
		</h2>
	</header>
	<p>
		Example block content
	</p>
</div>

Block heading Optional subtitle

Example block content 

<div class="white-block">
	<header>
		<h2>
			Block heading
			<small>Optional subtitle</small>
		</h2>
	</header>
	<p>
		Example block content
	</p>
</div>

Header content

The can be a bit more in header, than just heading text. header is styled as space between flex, so if you put another element beside heading tag, it will be on the right, centered vertically. In some cases you might need to wrap it into .header-right element and icons should be wrapped inside .header-icons.

Block heading

Subtitle on right side

Example block content 

<div class="white-block">
	<header>
		<h2>
			Block heading
		</h2>
		<small>Subtitle on right side</small>
	</header>
	<p>
		Example block content
	</p>
</div>

Block heading

Example block content 

<div class="white-block">
	<header>
		<h2>
			Block heading
		</h2>
		<div class="header-icons">
			<svg class="icon icon-service-mergado" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#service-mergado"></use></svg>
			<svg class="icon icon-edit" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#edit"></use></svg>
		</div>
	</header>
	<p>
		Example block content
	</p>
</div>