Tile

Examples


<button class="tile tile--blue">
  <div class="tile__header">
    <div class="tile__iconbox">
      <svg role="img" class="icon icon--small icon--white">
        <use xlink:href="#ruxit"></use>
      </svg>
    </div>

    <h1 class="tile__heading">L-W8-64-APMDay3</h1>
    <h2 class="tile__subheading">Linux (x84, 64-bit)</h2>
  </div>
  <p class="tile__content">Network traffic</p>
</button>

    

<button class="tile tile--royalblue">
  <div class="tile__header">
    <div class="tile__iconbox">
      <svg role="img" class="icon icon--small icon--white">
        <use xlink:href="#ruxit"></use>
      </svg>
    </div>

    <h1 class="tile__heading">L-W8-64-APMDay3</h1>
    <h2 class="tile__subheading">Linux (x84, 64-bit)</h2>
  </div>
  <p class="tile__content">Network traffic</p>
</button>

    

<button class="tile tile--purple">
  <div class="tile__header">
    <div class="tile__iconbox">
      <svg role="img" class="icon icon--small icon--white">
        <use xlink:href="#ruxit"></use>
      </svg>
    </div>

    <h1 class="tile__heading">L-W8-64-APMDay3</h1>
    <h2 class="tile__subheading">Linux (x84, 64-bit)</h2>
  </div>
  <p class="tile__content">Network traffic</p>
</button>

    

<button class="tile tile--error">
  <div class="tile__header">
    <div class="tile__iconbox">
      <svg role="img" class="icon icon--small icon--white">
        <use xlink:href="#ruxit"></use>
      </svg>
    </div>

    <h1 class="tile__heading">L-W8-64-APMDay3</h1>
    <h2 class="tile__subheading">Linux (x84, 64-bit)</h2>
  </div>
  <p class="tile__content">Network traffic</p>
</button>

    

<button class="tile tile--gray">
  <div class="tile__header">
    <div class="tile__iconbox">
      <svg role="img" class="icon icon--small icon--white">
        <use xlink:href="#ruxit"></use>
      </svg>
    </div>

    <h1 class="tile__heading">L-W8-64-APMDay3</h1>
    <h2 class="tile__subheading">Linux (x84, 64-bit)</h2>
  </div>
  <p class="tile__content">Network traffic</p>
</button>

    

<button disabled class="tile">
  <div class="tile__header">
    <div class="tile__iconbox">
      <svg role="img" class="icon icon--small icon--white">
        <use xlink:href="#ruxit"></use>
      </svg>
    </div>

    <h1 class="tile__heading">L-W8-64-APMDay3</h1>
    <h2 class="tile__subheading">Linux (x84, 64-bit)</h2>
  </div>
  <p class="tile__content">Network traffic</p>
</button>

    

Using Icons with Tiles

To use tiles and icons together, you need the icon module as well as the icon definition file.