Card grid

Card grids help to layout multiple cards in rows and columns.

This basic grid system provides a fast and simple way to lay out cards. It has the following features and characteristics:

  • Available horizontal space is distributed equally between columns.
  • Supporting the layout pattern columns will wrap into multiple rows, if they have very wide content.
  • The basic wrapping also supports up to 6 columns per row with different breakpoints until stacking them in one single column on smaller screen sizes.
  • Within a row all cards will have equal height - adapting to the card with the most content.
  • Vertically the grid will simply take as much space as needed.

To see a detailed explanation of all existing classes, please refer to the usage table below.

Simple card grid

<div class="cards cards--simpleGrid">
    <div class="cards__row">
        <div class="cards__col">

            <div class="card">
                <div class="card__header">

                    <div class="menu is-right-aligned">
                        <button class="button button--ghost has-icon-only">
                        </button>
                        <div class="menu__items">
                            <a class="menu__item" href="#">
                                Lorem ipsum
                            </a>
                            <a class="menu__item" href="#">
                                Lorem ipsum dolor sit amet
                            </a>
                            <a class="menu__item" href="#">
                                Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
                            </a>
                        </div>
                    </div>

                    <h3 class="card__title">
                        Card
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                    </p>
                </div>
                <div class="card__content">
                    <p>Lorem ipsum dolor content of cards.</p>
                    <p>Lorem ipsum dolor content of cards.</p>
                    <p>content Lorem ipsum dolor content of cards.</p>
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
                <div class="card__footer">
                    <a class="button button--secondary" href="#">Action 1</a>
                    <a class="button button--secondary" href="#">Action 2</a>
                    <a href="#" class="button button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="button button--ghost has-icon-only">
                        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                    </a>
                </div>
            </div>

        </div>
        <div class="cards__col">
            <div class="card">
                <div class="card__header">

                    <div class="menu is-right-aligned is-expanded">
                        <button class="button button--ghost has-icon-only">
                        </button>
                        <div class="menu__items">
                            <a class="menu__item" href="#">
                                Lorem ipsum
                            </a>
                            <a class="menu__item" href="#">
                                Lorem ipsum dolor sit amet
                            </a>
                            <a class="menu__item" href="#">
                                Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
                            </a>
                        </div>
                    </div>

                    <h3 class="card__title">
                        Card header with a very long title
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
                <div class="card__footer">
                    <a class="button button--secondary" href="#">Action 1</a>
                    <a class="button button--secondary" href="#">Action 2</a>
                    <a href="#" class="button button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="button button--ghost has-icon-only">
                        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="cards__row">
        <div class="cards__col">
            <div class="card">
                <div class="card__header">

                    <h3 class="card__title">
                        Card title
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
                <div class="card__footer">
                    <a class="button button--secondary" href="#">Action 1</a>
                    <a class="button button--secondary" href="#">Action 2</a>
                    <a href="#" class="button button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="button button--ghost has-icon-only">
                        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="cards__col">

            <div class="card card--centered">
                <div class="card__header">
                    <h3 class="card__title">
                        <a href="#">(Centered) Card title</a>
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        <a href="#" class="link--noIcon">Card title, icon suppressed</a>
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="cards__row">
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">
            <div class="card  card--centered">
                <div class="card__header">

                    <h3 class="card__title">
                        Card title
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
                <div class="card__footer">
                    <a class="button button--secondary" href="#">Action 1</a>
                    <a class="button button--secondary" href="#">Action 2</a>
                    <a href="#" class="button button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </a>
                    <a href="#" class="button button--ghost has-icon-only">
                        <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        <a href="#">Card title</a>
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="cards__row">
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        <a href="#">Card title</a>
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="cards__row">
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        <a href="#">Card title</a>
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
    </div>
    <div class="cards__row">
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        <a href="#">Card title</a>
                    </h3>
                    <p class="card__subline">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>

        <div class="cards__col">

            <div class="card">
                <div class="card__header">
                    <h3 class="card__title">
                        Card title, not clickable
                    </h3>
                    <p class="card__subline">
                        A short subline.
                    </p>
                </div>
                <div class="card__content">
                    <p>of cards Lorem ipsum dolor content of cards.</p>
                </div>
            </div>

        </div>
    </div>
</div>

Simple card grid in App layout

<div class="appWrapper">

    <div class="appWrapper__regions has-appBar has-contextRegion has-leadingRegion contextRegion-is-expanded leadingRegion-is-expanded appWrapper__regions--pushLayout">

        <section class="leadingRegion">
        <!-- content for leading region goes here -->
        </section>

        <section class="mainRegion">

            <div class="cards cards--simpleGrid">
                <div class="cards__row">
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">

                                <div class="menu is-right-aligned">
                                    <button class="button button--ghost has-icon-only">
                                    </button>
                                    <div class="menu__items">
                                        <a class="menu__item" href="#">
                                            Lorem ipsum
                                        </a>
                                        <a class="menu__item" href="#">
                                            Lorem ipsum dolor sit amet
                                        </a>
                                        <a class="menu__item" href="#">
                                            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
                                        </a>
                                    </div>
                                </div>

                                <h3 class="card__title">
                                    Card
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>Lorem ipsum dolor content of cards.</p>
                                <p>Lorem ipsum dolor content of cards.</p>
                                <p>content Lorem ipsum dolor content of cards.</p>
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                            <div class="card__footer">
                                <a class="button button--secondary" href="#">Action 1</a>
                                <a class="button button--secondary" href="#">Action 2</a>
                                <a href="#" class="button button--secondary has-icon-only">
                                    <span class="iconMdsp edit" aria-hidden="true"></span>
                                </a>
                                <a href="#" class="button button--ghost has-icon-only">
                                    <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">
                        <div class="card">
                            <div class="card__header">

                                <div class="menu is-right-aligned is-expanded">
                                    <button class="button button--ghost has-icon-only">
                                    </button>
                                    <div class="menu__items">
                                        <a class="menu__item" href="#">
                                            Lorem ipsum
                                        </a>
                                        <a class="menu__item" href="#">
                                            Lorem ipsum dolor sit amet
                                        </a>
                                        <a class="menu__item" href="#">
                                            Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
                                        </a>
                                    </div>
                                </div>

                                <h3 class="card__title">
                                    Card header with a very long title
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                            <div class="card__footer">
                                <a class="button button--secondary" href="#">Action 1</a>
                                <a class="button button--secondary" href="#">Action 2</a>
                                <a href="#" class="button button--secondary has-icon-only">
                                    <span class="iconMdsp edit" aria-hidden="true"></span>
                                </a>
                                <a href="#" class="button button--ghost has-icon-only">
                                    <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="cards__row">
                    <div class="cards__col">
                        <div class="card">
                            <div class="card__header">

                                <h3 class="card__title">
                                    Card title
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                            <div class="card__footer">
                                <a class="button button--secondary" href="#">Action 1</a>
                                <a class="button button--secondary" href="#">Action 2</a>
                                <a href="#" class="button button--secondary has-icon-only">
                                    <span class="iconMdsp edit" aria-hidden="true"></span>
                                </a>
                                <a href="#" class="button button--ghost has-icon-only">
                                    <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="cards__col">

                        <div class="card card--centered">
                            <div class="card__header">
                                <h3 class="card__title">
                                    <a href="#">(Centered) Card title</a>
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    <a href="#" class="link--noIcon">Card title, icon suppressed</a>
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="cards__row">
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">
                        <div class="card  card--centered">
                            <div class="card__header">

                                <h3 class="card__title">
                                    Card title
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat blandit aliquam etiam erat. Pretium vulputate sapien nec sagittis. Ut faucibus pulvinar elementum integer.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                            <div class="card__footer">
                                <a class="button button--secondary" href="#">Action 1</a>
                                <a class="button button--secondary" href="#">Action 2</a>
                                <a href="#" class="button button--secondary has-icon-only">
                                    <span class="iconMdsp edit" aria-hidden="true"></span>
                                </a>
                                <a href="#" class="button button--ghost has-icon-only">
                                    <span class="iconMdsp locationMarker" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    <a href="#">Card title</a>
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="cards__row">
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    <a href="#">Card title</a>
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="cards__row">
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    <a href="#">Card title</a>
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="cards__row">
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    <a href="#">Card title</a>
                                </h3>
                                <p class="card__subline">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>
                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>

                    <div class="cards__col">

                        <div class="card">
                            <div class="card__header">
                                <h3 class="card__title">
                                    Card title, not clickable
                                </h3>
                                <p class="card__subline">
                                    A short subline.
                                </p>
                            </div>
                            <div class="card__content">
                                <p>of cards Lorem ipsum dolor content of cards.</p>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </section>

        <section class="contextRegion">
        <!-- content for context region goes here -->
        </section>

        <aside class="leadingRegionToggleArea">
            <a href="#"></a>
        </aside>

        <aside class="contextRegionToggleArea">
            <a href="#"></a>
        </aside>

    </div>

    <ul class="appWrapper__appBar">
        <!-- app bar items go here -->
    </ul>

    <div class="appWrapper__mobileToggle">
        <a href="#" class="leadingRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
        <a href="#" class="contextRegionToggle is-activated button button--secondary">
            <span class="iconMdsp sidebar" aria-hidden="true"></span>
        </a>
    </div>

</div>

<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
    _msb.init({
        title: "App Layout",
        showLegal: true,
        polyfills: {
            promise: true
        }
    });

    window.onload = function(e){
        var leading = document.querySelectorAll("a.leadingRegionToggle, .leadingRegionToggleArea > a");
        var context = document.querySelectorAll("a.contextRegionToggle, .contextRegionToggleArea > a");
        var regionsWrapper = document.querySelector(".appWrapper__regions");

        for (var i=0; i < leading.length; i++) {
            leading[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('leadingRegion-is-expanded');
                for (var j=0; j<leading.length; j++) {
                    leading[j].classList.toggle('is-activated');
                }
            });
        }

        for (var i=0; i < leading.length; i++) {
            context[i].addEventListener('click', function(e) {
                regionsWrapper.classList.toggle('contextRegion-is-expanded');
                for (var j=0; j<context.length; j++) {
                    context[j].classList.toggle('is-activated');
                }
            });
        }

        var switchLayoutType = document.querySelector("#toggleSlidingBehaviour");
        switchLayoutType.addEventListener('click', function() {
            regionsWrapper.classList.toggle('appWrapper__regions--pushLayout');
        });

        var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
        toggleLeading.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-leadingRegion');
        });

        var toggleContext = document.querySelector("#toggleContextRegionDemo");
        toggleContext.addEventListener('click', function() {
            regionsWrapper.classList.toggle('has-contextRegion');
        });
    }
</script>

Usage

ElementClassDescription
.cards .cards--simplegrid Enables the simple grid for the contained cards. Without this modifier class, no layout at all is applied, stacking cards one above the other in a single column.
.cards__row A row contains one or more columns which are distributed equally to consume the available space. Multiple rows are stacked vertically.
.cards__col Works as a container for a single column. All such cols within a row have equal height, based on the highest card in that row.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top