Tiles present collections of related content in a consistent format, using hierarchy to enhance readability
by prioritizing a consistent type or set of content.
Basic Tiles
lorem ipsum dolor sit amet
consectetur adipiscing elit, consectetur adipiscing elit, consectetur adipiscing elit
<div class="tile-wrap">
<div class="tile">
<div class="tile-side margin-right"> ... </div>
<div class="tile-action"> ... </div>
<div class="tile-inner"> ... </div>
</div>
...
</div>
Collapsible Tiles
lorem ipsum dolor sit amet
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
consectetur adipiscing elit
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
<div class="tile-wrap">
<div class="tile tile-collapse">
<div data-target="..." data-toggle="tile">
<div class="tile-inner"> ... </div>
</div>
<div class="tile-active-show collapse" id="...">
<div class="tile-sub"> ... </div>
<div class="tile-footer"> ... </div>
</div>
</div>
</div>
data-parent="" extends the default collapse behaviour to create an accordion.
lorem ipsum dolor sit amet
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
consectetur adipiscing elit
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
expands the tile even wider when space is available. .tile-collapse-full
lorem ipsum dolor sit amet
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
consectetur adipiscing elit
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
Additional information
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam.
Coloured Tiles
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam. This is a link among some other text.
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam. This is a link among some other text.
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam. This is a link among some other text.
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam. This is a link among some other text.
Aliquam in pharetra leo. In congue, massa sed elementum dictum, justo quam efficitur risus, in posuere mi orci ultrices diam. This is a link among some other text.