Section

Ready Added in 2.0.0

Create horizontal layout sections with different background colors and styles.

Usage

Sections are used to separate the content of a page into differently styled blocks. To apply this component, just add the .gls-section class to a container element. You can place a container from the Container component to modify the width of the content inside sections and add horizontal padding. Note that the padding of a nested container will be reset.

<div class="gls-section">
    <div class="gls-container"></div>
</div>

By default, a section is blank. That is why it is important to add a modifier class for styling. In our example we are using the .gls-section-muted class. Normally, the section is the outermost element of a page, so this example doesn’t quite reflect the realistic usage of this component.

  • Section

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • <div class="gls-section gls-section-muted">
        <div class="gls-container">
    
            <h3>Section</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    

Style modifiers

To apply different background colors and paddings, add one of the following classes.

Class Description
.gls-section-default Adds the default background color of your site.
.gls-section-muted Adds a muted background color.
.gls-section-primary Adds a primary background color.
.gls-section-primary-light Adds a lighter primary background color.
.gls-section-secondary Adds a secondary background color.
.gls-section-secondary-light Adds a lighter secondary background color.
.gls-section-tertiary Adds a tertiary background color.
.gls-section-gradient Adds a gradient background color.
<div class="gls-section gls-section-primary"></div>
  • Section Default

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section Muted

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section Primary

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section Primary Light

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section Secondary

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section Secondary Light

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section Tertiary

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section Gradient

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Section with Images

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • <div class="gls-section gls-section-default">
        <div class="gls-container">
    
            <h3>Section Default</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section gls-section-muted">
        <div class="gls-container">
    
            <h3>Section Muted</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section gls-section-primary gls-light">
        <div class="gls-container">
    
            <h3>Section Primary</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section gls-section-primary-light">
        <div class="gls-container">
    
            <h3>Section Primary Light</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section gls-section-secondary gls-light">
        <div class="gls-container">
    
            <h3>Section Secondary</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section gls-section-secondary-light">
        <div class="gls-container">
    
            <h3>Section Secondary Light</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section gls-section-tertiary gls-light">
        <div class="gls-container">
    
            <h3>Section Tertiary</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section gls-section-gradient">
        <div class="gls-container">
    
            <h3>Section Gradient</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
    
        </div>
    </div>
    
    <div class="gls-section-default">
        <div class="gls-section gls-light gls-background-cover" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg)">
            <div class="gls-container">
    
                <h3>Section with Images</h3>
    
                <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>
    
            </div>
        </div>
    </div>
    

Preserve color

The .gls-section-primary and .gls-section-secondary classes are extending the inverse style from the Inverse component automatically. If you want to prevent this behavior, for example because you are using cards in these sections, add the .gls-preserve-color class.

<div class="gls-section gls-section-primary gls-preserve-color"></div>
  • Section Primary with cards

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • <div class="gls-section gls-section-primary gls-preserve-color">
        <div class="gls-container">
    
            <div class="gls-panel gls-light gls-margin-medium">
                <h3>Section Primary with cards</h3>
            </div>
    
            <div class="gls-grid-match gls-child-width-expand@m" gls-grid>
                <div>
                    <div class="gls-card gls-card-default gls-card-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>
                <div>
                    <div class="gls-card gls-card-default gls-card-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    

Size modifier

You can add different paddings to each section or remove it altogether.

Class Description
.gls-section-xsmall Add this class to decrease a section’s padding to a minimum.
.gls-section-small Add this class to decrease a section’s padding.
.gls-section-large Add this class to increase a section’s padding.
.gls-section-xlarge Add this class to further increase a section’s padding.
.gls-padding-remove-vertical Add this class from the Padding component to remove a section’s padding.
  • Section Large

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

  • <div class="gls-section gls-section-large gls-section-muted">
        <div class="gls-container">
    
            <h3>Section Large</h3>
    
            <div class="gls-grid-match gls-child-width-1-3@m" gls-grid>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                </div>
            </div>
        </div>
    </div>
    

Overlap modifier

Some Gloss themes use richer styles, including textured backgrounds and borders. In this case, you can add the .gls-section-overlap class, to apply a border image and a negative offset to the following section. Note that this only works in styles that implement the feature, if there are subsequent sections.

<div class="gls-section gls-section-overlap"></div>