Content-Block v5

Content blocks present different content in areas.

Summary

The content block v5 is an in version 3.0.0 filled in block and shall summarize various blocks in the future.

Markup

<div class="content-block v5">
    <div class="page-title v4">
        <h3 class="title">Block title</h3>
        <div class="center dot line v1"></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Examples

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Stacked

<div class="content-block v5 stack-up">
    <div class="page-title v4">
        <h3 class="title">Block title</h3>
        <div class="center dot line v1"></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="content-block v5 stacked">
    <div class="page-title v4">
        <h3 class="title">Block title</h3>
        <div class="center dot line v1"></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grouping

<div class="content-blocks v5">
    <div class="content-block v5">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="content-blocks v5">
    <div class="content-block v5">
        <div class="page-title v4">
            <h3 class="title">Block title</h3>
            <div class="center dot line v1"></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5 primary inverted">
        <div class="page-title v4">
            <h3 class="title">Block title</h3>
            <div class="center dot line v1"></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5">
        <div class="page-title v4 primary inverted">
            <h3 class="title">Block title</h3>
            <div class="center dot line v1"></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="content-blocks v5 horizontal">
    <div class="content-block v5">
        <div class="page-title v4">
            <h3 class="title">Block title</h3>
            <div class="center dot line v1"></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5 primary inverted">
        <div class="page-title v4">
            <h3 class="title">Block title</h3>
            <div class="center dot line v1"></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="content-block v5">
        <div class="page-title v4 primary inverted">
            <h3 class="title">Block title</h3>
            <div class="center dot line v1"></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nested

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Block title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.