Block React Component

Block React component represents Content Block element designed (mostly) to add extra formatting and required spacing for text content.

Usage example

<!-- Block -->
<ContentBlock>...</ContentBlock>
 
<!-- With additional "inner" element for extra highlighting -->
<ContentBlock inner>...</ContentBlock>
 
<!-- With block title -->
<ContentBlockTitle>Block Title</ContentBlockTitle>
<ContentBlock>...</ContentBlock>
 
<!-- Inset -->
<ContentBlock inset>...</ContentBlock>

Renders to:

<!-- Block -->
<div class="content-block">...</div>
 
<!-- With additional "inner" element for extra highlighting -->
<div class="content-block">
  <div class="content-block-inner">...</div>
</div>
 
<!-- With block title -->
<div class="content-block-title">Block Title</div>
<div class="content-block">...</div>
 
<!-- Inset -->
<div class="content-block inset">...</div>

Properties

Prop Type Default Description
inset boolean Makes block inset
tabletInset boolean Makes block inset on tablets, but not on phones
inner boolean Adds additional "inner" element for content extra highlighting
tabs boolean Adds additional "tabs" class to make the block tabs wrapper
tab boolean Adds additional "tab" class when block should be used as a Tab
active boolean Adds additional "active" class when block used as a Tab and makes it active tab
noHairlines boolean Removes outer hairlines.