Tiles help frame a message or a set of instructions we want to communicate to our users. Unlike alerts, tiles are meant to be static, are not caused by a user's actions, and can not be dismissed.
.wb-tile
Padded container for information. It is usually used with one of the modifiers below to give it a proper color, though the base style provides a border to help divide it from other elements on the page.
I have a white background and a border and my links are usually muted.
<div class='wb-tile'>
<h1 class="wb-heading-4">Greetings!</h1>
<p class="wb-text">I have a white background and a border and my links
are usually <a href='#' class='wb-link--muted'>muted.</a>
</p>
</div>.wb-tile--info
Tile to show user useful information. Often used to highlight new features.
We made new stuff and you can see it here.
<div class="wb-tile wb-tile--info">
<h1 class="wb-heading-4">New information!</h1>
<p class="wb-text">We made new stuff and you can see it
<a href='#' class='wb-link--muted'>here.</a>
</p>
</div>.wb-tile--danger
Tile to highlight that something went wrong.
This thing could be super bad.
<div class="wb-tile wb-tile--danger">
<h1 class="wb-heading-4">Scary!</h1>
<p class="wb-text">This thing could be super bad.</p>
</div>.wb-tile--warning
Tile to alert the user of something they should know about.
This thing could be kinda bad. We dunno yet.
<div class="wb-tile wb-tile--warning">
<h1 class="wb-heading-4">A warning!</h1>
<p class="wb-text">This thing could be kinda bad. We dunno yet.</p>
</div>.wb-tile--success
Tile to inform the user that everything went well.
It's time to celebrate. Give us a good NPS score!
<div class="wb-tile wb-tile--success">
<h1 class="wb-heading-4">Good job!</h1>
<p class="wb-text">It's time to celebrate. Give us a good
<a href='#' class='wb-link--muted'>NPS score!</a>
</p>
</div>