Sections

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 👇

<GenericSection>
    <!-- Section content -->
</GenericSection>

<c-generic-section>
    <!-- Section content -->
</c-generic-section>

<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>

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>

In React and Vue 👇

<GenericSection topDivider>
    <!-- Section content -->
</GenericSection>

<c-generic-section top-divider>
    <!-- Section content -->
</c-generic-section>

For full-width dividers, add the .has-top-divider or .has-bottom-divider classes to the outer <section> 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 👇

<GenericSection topOuterDivider bottomOuterDivider>
    <!-- Section content -->
</GenericSection>

<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 👇

<GenericSection hasBgColor invertColor>
    <!-- Section content -->
</GenericSection>

<c-generic-section has-bg-color invert-color>
    <!-- Section content -->
</c-generic-section>

Section header

If you want to show a title and / or a short paragraph at the top of your section, please refer to the section header chapter.

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 👇

import { SectionProps } from '../../utils/SectionProps';

const propTypes = {
  ...SectionProps.types
}

const defaultProps = {
  ...SectionProps.defaults
}

<script>
import { SectionProps } from '@/utils/SectionProps.js'

export default {
  mixins: [SectionProps]
}
</script>

React props

Vue props

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