Skip to content

Text section

Jump to bottom
Giorgio Bonvicini edited this page Oct 4, 2021 · 1 revision

This is the simplest section of all. Like all other sections it can optionally have a heading and a subheading, but other than that it's pure HTML text content.

Code

<!--Text section-->
<section class="page-section alternate-bg">
    <div class="heading-container text-center">
        <h2 class="section-heading text-uppercase">Section heading</h2>
        <h3 class="section-subheading text-muted">Section subheading</h3>
    </div>
    <div class="container">
        <!--Main content-->
        <h3>Title</h3>
        <p class="text-justify">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor quam dignissim erat <span class="text-capitalize">imperdiet</span> convallis eget id lectus. Donec vulputate enim vel nibh posuere, tempus congue mi mollis. Etiam faucibus quam nec ullamcorper auctor. <span class="text-uppercase">Vestibulum</span> tempus ipsum ut ante blandit pretium. Suspendisse blandit fringilla pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut euismod augue.
        </p>
        <hr/>
        <h3>Another title</h3>
        <ul>
            <li>
                <b>First of all</b>: I have to say <i>this</i>.
            </li>
            <li>
                <b>Secondly</b>: I have to say <i>that</i>.
            </li>
            <li>
                ...
            </li>
        </ul>
    </div>
</section>
  • .text-uppercase: capitalize the whole text
  • .text-smallcaps: disaply the text in smallcaps (i.e. lowercase letters are displayed as small uppercase, uppercase ones as big uppercase)
  • .text-highlight: color the text with the main color of the theme
  • .text-underline: underline the text
  • .text-small: reduce the font size to 85%

Other classes for text typography can be found here.

Output

/img/component-examples/s/text_section.png

Customization

Note the use of the class .text-justify to make the long text more readable and ordered. Some of the classes that can be used to slightly alter text appearence are:

Clone this wiki locally