Section component for wrapping sections. Give a section id by giving it an id property.
<div class="section" id="section-1">
Section content goes here
</div>
{
"language": "en-US",
"content": "Section content goes here",
"id": "section-1"
}
Section component can have top gutter by setting topGutter property.
<div class="section section--top-gutter-2" id="section-1">
Section content goes here
</div>
{
"language": "en-US",
"content": "Section content goes here",
"id": "section-1",
"topGutter": 2
}
Section component can have bottom gutter by setting bottomGutter property.
<div class="section section--bottom-gutter-2" id="section-1">
Section content goes here
</div>
{
"language": "en-US",
"content": "Section content goes here",
"id": "section-1",
"bottomGutter": 2
}
Section component can have top border by setting topBorder to true.
<div class="section section--top-gutter-2" id="section-1">
<div class="section__hr-container">
<hr class="section__hr section__hr--top">
</div>
Section content goes here
</div>
{
"language": "en-US",
"content": "Section content goes here",
"id": "section-1",
"topGutter": 2,
"topBorder": true
}
Section component can have bottom border by setting bottomBorder to true.
<div class="section section--bottom-gutter-2" id="section-1">
Section content goes here
<div class="section__hr-container">
<hr class="section__hr section__hr--bottom">
</div>
</div>
{
"language": "en-US",
"content": "Section content goes here",
"id": "section-1",
"bottomGutter": 2,
"bottomBorder": true
}
Section component can be full width by setting seamless to true.
<div class="section section--top-gutter-2 section--bottom-gutter-2 section--seamless" id="section-1">
<div class="section__hr-container">
<hr class="section__hr section__hr--top">
</div>
Section content goes here
<div class="section__hr-container">
<hr class="section__hr section__hr--bottom">
</div>
</div>
{
"language": "en-US",
"content": "Section content goes here",
"id": "section-1",
"topGutter": 2,
"topBorder": true,
"bottomGutter": 2,
"bottomBorder": true,
"seamless": true
}
Section component can have grey background by setting background to grey.
<div class="section section--top-gutter-2 section--bottom-gutter-2 section--background-grey" id="section-1">
Section content goes here
</div>
{
"language": "en-US",
"content": "Section content goes here",
"id": "section-1",
"topGutter": 2,
"bottomGutter": 2,
"background": "grey"
}