✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Sections

Cruip CSS

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>

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>

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>


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

Prop Type Default Accepted values
topOuterDivider boolean false
topDivider boolean false
bottomOuterDivider boolean false
bottomDivider 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-outer-divider boolean false
bottom-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.
Last updated on May 25, 2021