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

Section header

Cruip CSS

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

Section header

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

<GenericSection>
    <SectionHeader data={headerData} />
    <!-- Section content -->
</GenericSection>

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

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

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

<GenericSection>
    <SectionHeader tag="h1" data={headerData} />
    <!-- Section content -->
</GenericSection>

<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.
Last updated on May 25, 2021