Article

Ready Added in 2.0.0

Create articles within your page.

Usage

The article component consists of the article itself, a title and metadata.

Class Description
.gls-article Add this class to define the Article component. Typically you would use an <article> element for this.
.gls-article-title Add this class to a heading to create an article title. Typically you would use a <h1> element for this.
.gls-article-meta Add this class to a paragraph which contains metadata about your article.
<article class="gls-article">
    <h1 class="gls-article-title"></h1>
    <p class="gls-article-meta"></p>
</article>

Use the .gls-text-lead class from the Text component to create a leading paragraph.

  • Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • <article class="gls-article">
    
        <h1 class="gls-article-title"><a class="gls-link-reset" href="">Heading</a></h1>
    
        <p class="gls-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
    
        <p class="gls-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
        <div class="gls-grid-small gls-child-width-auto" gls-grid>
            <div>
                <a class="gls-button gls-button-text" href="#">Read more</a>
            </div>
            <div>
                <a class="gls-button gls-button-text" href="#">5 Comments</a>
            </div>
        </div>
    
    </article>