Section header

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.

General information

If you want to show a title and / or a short paragraph at the top of your section check below๐Ÿ‘‡

<section class="section">
<div class="container">
<div class="section-inner">
<div class="section-header">
<div class="container-xs">
<!-- Section title -->
<h2 class="mt-0 mb-16">Section title</h2>
<!-- Section paragraph -->
<p class="m-0">Section paragraph that can be longer.</p>
</div>
</div>
<!-- Section content -->
</div>
</div>
</section>

We have React and Vue components for the section headers too! It's under /src/components/sections/partials and they can be used in this way ๐Ÿ‘‡

React
Vue
React
<GenericSection>
<SectionHeader data={headerData} />
// Section content
</GenericSection>
Vue
<c-generic-section>
<c-section-header :data="headerData" />
// Section content
</c-generic-section>

As you can see, the component needs that you pass some data (i.e. the title and the title) ... here is an example ๐Ÿ‘‡

React
Vue
React
class App extends React.Component {
render() {
const headerData = {
title: 'Section title',
paragraph: 'Section paragraph that can be longer.'
};
return (
<GenericSection>
<SectionHeader data={headerData} />
// Section content
</GenericSection>
);
}
}
โ€‹
// ... ensure to export the default class
Vue
<script>
export default {
// ... more required stuff
data() {
return {
headerData: {
title: "Section title",
paragraph: "Section paragraph that can be longer."
}
};
}
};
</script>

You can omit or leave empty one of the object properties (i.e. title, paragraph) to prevent them from displaying.

Changing the title heading tag

You can change the default section title <h2> with a different heading via a tag prop:

Untitled
React
Vue
โ€‹
React
<GenericSection>
<SectionHeader tag="h1" data={headerData} />
// Section content
</GenericSection>
Vue
<c-generic-section>
<c-section-header tag="h1" :data="headerData" />
// Section content
</c-generic-section>

TL;DR

React props

Prop

Type

Default

Accepted values

data

object

-

Object should contain a title and a paragraph

tag

string

h2

h1, h2, h3

Vue props

Prop

Type

Default

Accepted values

data

object

-

Object should contain a title and a paragraph

tag

string

h2

h1, h2, h3

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.