Grid Tab

A single content area with multiple panels, each associated with a header in a list.

Example # Basic

  • Heading

    Detail...

    grid tab 1

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

  • Heading

    Detail...

    grid tab 2

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing.

  • Heading

    Detail...

    grid tab 3

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

  • Heading

    Detail...

    grid tab 4

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

  • Heading

    Detail...

    grid tab 5

    Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

HTML
<ul class="bs-gridtab" data-behavior-is="gridtab-list">
    <li class="bs-gridtabitem" id="gridTab-1">
        <div class="bs-gridtabitem__link">
            <div class="bs-gridtabitem__link-inner">
                <div class="link-thumbnail">
                    <img src="https://placeimg.com/640/480/nature" alt="" />
                </div>
                <div class="link-label">
                    <h4>Heading</h4>
                    <p>Detail...</p>
                </div>
            </div>
        </div>
        <div class="bs-gridtabitem__content">
            <div class="bs-gridtabitem__content-inner">
                <h4>grid tab 1</h4>
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a,</p>
            </div>
        </div>
    </li>
    <li class="bs-gridtabitem" id="gridTab-2">
        <div class="bs-gridtabitem__link">
            <div class="bs-gridtabitem__link-inner">
                <div class="link-thumbnail">
                    <img src="https://placeimg.com/640/480/nature" alt="" />
                </div>
                <div class="link-label">
                    <h4>Heading</h4>
                    <p>Detail...</p>
                </div>
            </div>
        </div>
        <div class="bs-gridtabitem__content">
            <div class="bs-gridtabitem__content-inner">
                <h4>grid tab 2</h4>
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. </p>
            </div>
        </div>
    </li>
    <li class="bs-gridtabitem" id="gridTab-3">
        <div class="bs-gridtabitem__link">
            <div class="bs-gridtabitem__link-inner">
                <div class="link-thumbnail">
                    <img src="https://placeimg.com/640/480/nature" alt="" />
                </div>
                <div class="link-label">
                    <h4>Heading</h4>
                    <p>Detail...</p>
                </div>
            </div>
            <div class="bs-gridtabitem__content">
                <div class="bs-gridtabitem__content-inner">
                    <h4>grid tab 3</h4>
                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
                </div>
            </div>
         </div>
    </li>
    <li class="bs-gridtabitem" id="gridTab-4">
        <div class="bs-gridtabitem__link">
            <div class="bs-gridtabitem__link-inner">
                <div class="link-thumbnail">
                    <img src="https://placeimg.com/640/480/nature" alt="" />
                </div>
                <div class="link-label">
                    <h4>Heading</h4>
                    <p>Detail...</p>
                </div>
            </div>
        </div>
        <div class="bs-gridtabitem__content">
            <div class="bs-gridtabitem__content-inner">
                <h4>grid tab 4</h4>
                <p>Proin elit arcu, rutrum commodo, vehicula tempus.</p>
            </div>
        </div>
    </li>
</ul>