Sections

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

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.