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-bottom is-right-aligned">
<button class="button button--ghost has-icon-only">
</button>
<div class="popover__container">
<a class="popover__item" href="#">
Lorem ipsum
</a>
<a class="popover__item" href="#">
Lorem ipsum dolor sit amet
</a>
<a class="popover__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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt locationMarker" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
<div class="cards__col">
<div class="card">
<div class="card__header">
<div class="menu is-bottom is-right-aligned is-shown">
<button class="button button--ghost has-icon-only">
</button>
<div class="popover__container">
<a class="popover__item" href="#">
Lorem ipsum
</a>
<a class="popover__item" href="#">
Lorem ipsum dolor sit amet
</a>
<a class="popover__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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt 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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt 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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt 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 has-appBarAdvanced has-appBarAdvanced-collapsed">
<div class="appWrapper__regions has-appHeader has-contextRegion has-leadingRegion appWrapper__regions--pushLayout">
<section class="appHeader">
<div class="appHeader__breadcrumb">
</div>
<div class="appHeader__content">
</div>
<div class="appHeader__viewToggler">
<button class="button button--ghost has-icon-only" id="toggleLeadingRegionDemo">
<i aria-hidden="true" class="iconUxt sidebar"></i>
</button>
<button class="button button--ghost has-icon-only" id="toggleContextRegionDemo">
<i aria-hidden="true" class="iconUxt sidebar is-flipped-horizontal"></i>
</button>
</div>
</section>
<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-bottom is-right-aligned">
<button class="button button--ghost has-icon-only">
</button>
<div class="popover__container">
<a class="popover__item" href="#">
Lorem ipsum
</a>
<a class="popover__item" href="#">
Lorem ipsum dolor sit amet
</a>
<a class="popover__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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt locationMarker" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
<div class="cards__col">
<div class="card">
<div class="card__header">
<div class="menu is-bottom is-right-aligned is-shown">
<button class="button button--ghost has-icon-only">
</button>
<div class="popover__container">
<a class="popover__item" href="#">
Lorem ipsum
</a>
<a class="popover__item" href="#">
Lorem ipsum dolor sit amet
</a>
<a class="popover__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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt 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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt 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="iconUxt edit" aria-hidden="true"></span>
</a>
<a href="#" class="button button--ghost has-icon-only">
<span class="iconUxt 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>
</div>
<nav class="appBarAdvanced">
<div class="appBarAdvanced__inner">
<div class="appBarAdvanced__header">
<!-- optional header -->
</div>
<ul class="appBarAdvanced__content">
<li class="level1 is-home">
<a href="#" class="item__link">
<div class="item__icon">
<i aria-hidden="true" class="iconUxt home"></i>
</div>
<span class="item__title">Home</span>
</a>
</li>
</ul>
<div class="appBarAdvanced__footer">
<a href="#" id="appBar--expander">
<!-- optional expand / collapse label -->
<span class="item__title">Collapse</span>
</a>
</div>
</div>
</nav>
</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 regionsWrapper = document.querySelector(".appWrapper__regions");
// functionality to hide context and/or leadimg region through button
var toggleLeading = document.querySelector("#toggleLeadingRegionDemo");
toggleLeading.addEventListener('click', function () {
regionsWrapper.classList.toggle('leadingRegion-is-expanded');
});
var toggleContext = document.querySelector("#toggleContextRegionDemo");
toggleContext.addEventListener('click', function () {
regionsWrapper.classList.toggle('contextRegion-is-expanded');
});
// toggle expand / collapse feature of sidebar
var toggle = document.querySelector("#appBar--expander");
var appWrapper = document.querySelector(".appWrapper");
toggle.addEventListener("click", function () {
appWrapper.classList.toggle("has-appBarAdvanced-collapsed");
});
}
</script>
Usage
| Element | Class | Description |
|---|---|---|
.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. |