Sections

Basic structure

All sections have a similar outer structure in terms of HTML, and it looks like this 👇

<!-- The section -->
<section class="section">
​
<!-- A container (optional) -->
<!-- Use .container-sm or .container-xs to make it smaller, see helper classes -->
<div class="container">
<!-- Inner section wrapper -->
<div class="section-inner">
<!-- Section content -->
</div>
</div>
</section>

That basic structure can be used when you need a generic section with custom content.

In React and Vue, you can create a generic section component in the /src/components/sections/ folder (it's named GenericSection.js / GenericSection.vue), and it can be imported/used in this way👇

React
Vue
React
<GenericSection>
// Section content
</GenericSection>
Vue
<c-generic-section>
// Section content
</c-generic-section>

Normally, and as we will see in the next chapter, all ready-made sections respect the same structure, and they include two extra classes for specificity reasons. For example, the hero section works like this 👇

<section class="hero section"><!-- We've added a .hero class -->
<div class="container">
<div class="hero-inner section-inner"><!-- We've added a .hero-inner class -->
<!-- Hero section content -->
</div>
</div>
</section>

So, in the case you want to add your own custom section, we highly recommend to follow this approach.

Top and bottom borders

You can show a line divider at the top or to the bottom of a section using the .has-top-divider / .has-bottom-divider helper classes.

<!-- Section with a top divider matching the container width -->
<section class="section">
<div class="container">
<div class="section-inner has-top-divider">
<!-- Section content -->
</div>
</div>
</section>
React
Vue
React
<GenericSection topDivider>
// Section content
</GenericSection>
Vue
<c-generic-section top-divider>
// Section content
</c-generic-section>

For a full-width divider, add the .has-bottom-divider class to the .site-header element 👇

<!-- Section with full-width dividers -->
<section class="section has-top-divider has-bottom-divider">
<div class="container">
<div class="section-inner">
<!-- Section content -->
</div>
</div>
</section>

Use the following props in React and Vue 👇

React
Vue
React
<GenericSection topOuterDivider bottomOuterDivider>
// Section content
</GenericSection>
Vue
<c-generic-section top-outer-divider bottom-outer-divider>
// Section content
</c-generic-section>

Invert colors

You can quickly invert background and text colors of a section with the helper .has-bg-color and .invert-color classes. Here is an example where we invert white and dark backgrounds:

<section class="section has-bg-color invert-color">
<div class="container">
<div class="section-inner">
<!-- Section content -->
</div>
</div>
</section>

Use the following props for React or Vue 👇

React
Vue
React
<GenericSection hasBgColor invertColor>
// Section content
</GenericSection>
Vue
<c-generic-section has-bg-color invert-color>
// Section content
</c-generic-section>

Section header

If you want to show a title or a short paragraph at the top of your section, please refer to the section header chapter clicking on the link below.

TL;DR

Here is the full list of props shared by all sections. These props are stored in a separate file (src/utils/SectionProps.js) that needs to be imported into a section component. Have a look at the generic section component (GenericSection.js / GenericSection.vue) if you feel disoriented 👇

React
Vue
React
import { SectionProps } from '../../utils/SectionProps';
​
const propTypes = {
...SectionProps.types
}
​
const defaultProps = {
...SectionProps.defaults
}
Vue
<script>
import { SectionProps } from '@/utils/SectionProps.js'
​
export default {
mixins: [SectionProps]
}
</script>

React props

Prop

Type

Default

Accepted values

topOuterDivider

boolean

false

-

topDivider

boolean

false

-

bottomDivider

boolean

false

-

bottomInnerDivider

boolean

false

-

hasBgColor

boolean

false

-

invertColor

boolean

false

-

Vue props

Prop

Type

Default

Accepted values

top-outer-divider

boolean

false

-

top-divider

boolean

false

-

bottom-divider

boolean

false

-

bottom-inner-divider

boolean

false

-

has-bg-color

boolean

false

-

invert-color

boolean

false

-

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/sections/_section.scss

👆🚫 Don't edit this file!

📋 Settings file

src/assets/scss/settings/base/_widths-and-spacing.scss

👆Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/sections/_section.scss

👆Use this to add custom CSS

Learn more about the Sass logic behind each template.