Section header

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 👇

<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

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