Tiles

Full

The tile encompasses defined visual areas on a page where the information inside them have corresponding content.

Full Tile

Subtitle

Button
My first tile section
My second tile section 
= ui.nfg :tile, title: 'Full Tile', subtitle: 'Subtitle', icon: 'rocket', button: 'Button', href: '#' do
  = ui.nfg :tile_section do
    My first tile section
  = ui.nfg :tile_section do
    My second tile section
<div class="tile" href="#">
  <div class="tile-header" href="#">
    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col-12 col-md">
            <h5 class="h4"><i aria-hidden="true" class="fa fa-rocket mr-1"></i> Full Tile</h5>
            <p class="mt-1 mb-0 text-muted">Subtitle</p>
          </div>
          <div class="col-12 col-md-auto mt-md-0 mt-2"><a class="btn btn-secondary" href="#">Button</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="tile-body">
    <div class="tile-section">My first tile section
    </div>
    <div class="tile-section">My second tile section
    </div>
  </div>
</div>
Tile Body

The tile body encompasses the tile's main content.

Tile Body
= ui.nfg :tile_body, heading: 'Tile Body Heading'
<div class="tile-body">
  <h5>Tile Body</h5>
</div>
Tile Section

Within the tile body, we use tile sections to separate out different groupings. There's a visual border between sections.

This is a tile section. 
= ui.nfg :tile_section do
  This is a tile section.
<div class="tile-section">This is a tile section.
</div>
Collapsible Tile

Use the collapsible trait to allow the user to expand or collapse a tile's body content.

Collapsible Tile
This is my collapsible tile. 
= ui.nfg :tile, title: 'Collapsible Tile', collapsible: true, id: 'collapsible_example' do
  This is my collapsible tile.
<div class="tile" id="collapsible_example">
  <div class="tile-header">
    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col-12 col-md">
            <h5 class="h4">Collapsible Tile</h5>
          </div>
        </div>
      </div>
      <div class="col-auto pl-0"><a class="btn btn-link" data-collapse-icon="caret-up" data-collapsed-icon="caret-down" data-toggle="collapse" href="#collapse_collapsible_example" aria-expanded="false" aria-controls="collapse_collapsible_example" role="button"><i data-toggle="tooltip" data-placement="top" data-html="true" aria-hidden="true" title="Show / hide additional information" class="fa fa-caret-up fa-fw"></i></a></div>
    </div>
  </div>
  <div class="collapse show" id="collapse_collapsible_example">
    <div class="tile-body">This is my collapsible tile.
    </div>
  </div>
</div>
Miscellaneous

There are occasions when a "speed" build will not work. Using the render_in_body trait will allow for a custom tile build.

Custom Tile Build
This is the header!
This is the body! 
= ui.nfg :tile, render_in_body: false do
  = ui.nfg :tile_header, title: 'Custom Tile Build' do
    This is the header!
  = ui.nfg :tile_body do
    This is the body!
<div class="tile">
  <div class="tile-header">
    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col-12 col-md">
            <h5 class="h4">Custom Tile Build</h5>
          </div>
        </div>
      </div>
    </div>
    This is the header!
  </div>
  <div class="tile-body">This is the body!
  </div>
</div>
Traits

The tile component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the tile.

id: 'my_id'
= ui.nfg :tile, id: 'my_id'
class:

Adds a class to the tile.

class: 'my-class'
= ui.nfg :tile, class: 'my-class'
describe:

For addding a data-describe to any tile.

describe: 'test-data-describe'
= ui.nfg :tile, describe: 'test-data-describe'
title:

Title for tile displayed in tile header.

title: 'Title'
= ui.nfg :tile, title: 'Title'
subtitle:

Subtitle to tile displayed in tile header.

subtitle: 'Subtitle'
= ui.nfg :tile, subtitle: 'Subtitle'
icon:

Icon displayed in tile header.

icon: 'rocket'
= ui.nfg :tile, icon: 'rocket'
button:

Text for button displayed in tile header.

button: 'Click Here'
= ui.nfg :tile, button: 'Click Here'
href:

Used for adding a link to the button displayed in tile header.

href: 'http://www.networkforgood.com'
= ui.nfg :tile, href: 'http://www.networkforgood.com'
collapsible:

Adds the ability to expand/collapse the tile body by adding a button in the tile header.

collapsible: true
= ui.nfg :tile, collapsible: true
collapsed:

Sets the tile to be or not be collapsed on page load.

collapsed: true
collapsed: false
= ui.nfg :tile, collapsed: true
render_in_body:

Used when a custom tile build is needed.

render_in_body: false
= ui.nfg :tile, render_in_body: false
render_if:

Condition to determine if the tile shows or not.

render_if: (1==1)
= ui.nfg :tile, title: 'Rendered', render_if: (1==1)
render_unless:

Condition to determine if the tile shows or not.

render_unless: (1==1)
= ui.nfg :tile, title: 'Not Rendered', render_unless: (1==1)