Slats

Manual build

Actions dropdown on larger screen turns into just caret-down icon on smaller screens.

First Column
Second Column
Karl Fergood live here at this column

A caption about this contact

aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!

Edit Delete
Karl Fergood - Link
$5000

An amount caption

= ui.nfg :slats do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood live here at this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item do
        = ui.nfg :typeface, :truncate, body: 'aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood - Link', href: '#nogo'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'

<div class="slats">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Karl Fergood live here at this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <p class="text-truncate">aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item"><a href="#nogo">
          <h6>Karl Fergood - Link</h6>
        </a></div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
  </div>
</div>

Slats with tooltip

First Column
Second Column
Third Column
Fourth Column
Karl Fergood - Link
Second2 Column

aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!

$5000

An amount caption

Example for tooltip when no heading
Edit Delete 
= ui.nfg :slats do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column', tooltip: 'Tooltip example on slat_header'
        = ui.nfg :slat_item, slat_header: 'Second Column', tooltip: 'Tooltip example on slat_header'
        = ui.nfg :slat_item, slat_header: 'Third Column', tooltip: 'Tooltip example on slat_header'
        = ui.nfg :slat_item, slat_header: 'Fourth Column', tooltip: 'Tooltip example on slat_header'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood - Link', href: '#nogo', tooltip: 'Tooltip example on heading'
      = ui.nfg :slat_item, heading: 'Second2 Column', tooltip: 'Tooltip example on heading only (not body)' do
        = ui.nfg :typeface, :truncate, body: 'aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!', class: 'mb-0'
      = ui.nfg :slat_item, heading: 'Third Column', heading: '$5000', caption: 'An amount caption', tooltip: 'Tooltip on heading, not caption'
      = ui.nfg :slat_item, tooltip: 'Tooltip on rendered block body' do
        Example for tooltip when no heading
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'
<div class="slats">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header" title="Tooltip example on slat_header" data-toggle="tooltip" data-placement="top" data-html="true">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header" title="Tooltip example on slat_header" data-toggle="tooltip" data-placement="top" data-html="true">Second Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header" title="Tooltip example on slat_header" data-toggle="tooltip" data-placement="top" data-html="true">Third Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header" title="Tooltip example on slat_header" data-toggle="tooltip" data-placement="top" data-html="true">Fourth Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item"><a href="#nogo">
          <h6 data-toggle="tooltip" data-placement="top" data-html="true" title="Tooltip example on heading">Karl Fergood - Link</h6>
        </a></div>
      <div class="slat-item">
        <h6 data-toggle="tooltip" data-placement="top" data-html="true" title="Tooltip example on heading only (not body)">Second2 Column</h6>
        <p class="mb-0 text-truncate">aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!</p>
      </div>
      <div class="slat-item">
        <h6 data-toggle="tooltip" data-placement="top" data-html="true" title="Tooltip on heading, not caption">$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
      <div class="slat-item" title="Tooltip on rendered block body" data-toggle="tooltip" data-placement="top" data-html="true">Example for tooltip when no heading
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
</div>

slat_header not inside slat_header component

Slat header is only shown on smaller screens

First Column
Second Column
A slat header
Karl Fergood live here at this column

A caption about this contact

aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!

Edit Delete
Karl Fergood - Link
$5000

An amount caption

= ui.nfg :slats do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, slat_header: 'A slat header', heading: 'Karl Fergood live here at this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item do
        = ui.nfg :typeface, :truncate, body: 'aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood - Link', href: '#nogo'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'

<div class="slats">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6 class="display-4 slat-column-header">A slat header</h6>
        <h6>Karl Fergood live here at this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <p class="text-truncate">aReallyLongStringForTruncationExampleIsPlacedHereAndBecauseItsGreatToStressTestItsEvenLonger!</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item"><a href="#nogo">
          <h6>Karl Fergood - Link</h6>
        </a></div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
  </div>
</div>

Slats without action menus but with action column

First Column
Second Column
Slat information
$5000

An amount caption

Delete
Button version
$5000

An amount caption

Button
Slat information
$5000

An amount caption

Delete
= ui.nfg :slats, slat_actions: :lg do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Slat information'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions, menu: false, icon: 'trash', body: 'Delete', href: '#nogo'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Button version'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions, menu: false, icon: 'trash', body: 'Button', href: '#nogo', button: true
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Slat information'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions, :danger, menu: false, icon: 'trash', body: 'Delete', href: '#nogo', remote: true, method: :get
<div class="slats slat-actions-lg">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Slat information</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a href="#nogo" class="d-block"><i aria-hidden="true" class="fa fa-trash mr-1"></i> Delete</a></div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Button version</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a class="btn btn-outline-secondary" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i>Button</a></div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Slat information</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a href="#nogo" class="text-danger d-block" method="get" remote="true"><i aria-hidden="true" class="fa fa-trash text-danger mr-1"></i> Delete</a></div>
  </div>
</div>

Slats without action menus but with action column, icon only

First Column
Second Column
Button version of slat action
$5000

An amount caption

Slat information
$5000

An amount caption

Slat information
$5000

An amount caption

Button version of slat action
$5000

An amount caption

= ui.nfg :slats, slat_actions: :sm do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Button version of slat action'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions, button: true, menu: false, icon: 'trash', href: '#nogo'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Slat information'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions, menu: false, icon: 'trash', href: '#nogo'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Slat information'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions, menu: false, icon: 'trash', href: '#nogo', method: :get, disable_with: 'Disabler', confirm: 'Are you sure?'

  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Button version of slat action'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions, button: true, menu: false, icon: 'trash', href: '#nogo'
<div class="slats slat-actions-sm">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Button version of slat action</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a class="btn btn-outline-secondary" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i></a></div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Slat information</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a href="#nogo" class="d-block"><i aria-hidden="true" class="fa fa-trash"></i></a></div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Slat information</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a href="#nogo" class="d-block" method="get" data-disable-with="Disabler" data-confirm="Are you sure?"><i aria-hidden="true" class="fa fa-trash"></i></a></div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Button version of slat action</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a class="btn btn-outline-secondary" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i></a></div>
  </div>
</div>

Slats with slat-item md

First Column
Second Column
Karl Fergood lives here in this column

A caption about this contact

$5000

An amount caption

Edit Delete 
= ui.nfg :slats do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, :md, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, :md, heading: 'Karl Fergood lives here in this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'
<div class="slats">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item slat-item-md">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item slat-item-md">
        <h6>Karl Fergood lives here in this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
</div>

Slats with slat-item lg

First Column
Second Column
Karl Fergood lives here in this column

A caption about this contact

$5000

An amount caption

Edit Delete 
= ui.nfg :slats do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, :lg, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, :lg, heading: 'Karl Fergood lives here in this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'
<div class="slats">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item slat-item-lg">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item slat-item-lg">
        <h6>Karl Fergood lives here in this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
</div>

Slats with slat-item xl

First Column
Second Column
Karl Fergood lives here in this column

A caption about this contact

$5000

An amount caption

Edit Delete 
= ui.nfg :slats do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, :xl, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, :xl, heading: 'Karl Fergood lives here in this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'
<div class="slats">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item slat-item-xl">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item slat-item-xl">
        <h6>Karl Fergood lives here in this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
</div>

Slats with small slat actions

Icon ONLY present on all screen sizes.

First Column
Second Column
No menu and single icon action button
$5000
No menu and single icon action with no button and :danger theme
$5000
= ui.nfg :typeface, :muted, body: 'Icon ONLY present on all screen sizes.'
= ui.nfg :slats, slat_actions: :sm do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'No menu and single icon action button'
      = ui.nfg :slat_item, heading: '$5000'
    = ui.nfg :slat_actions, button: true, menu: false, icon: 'pencil', href: '#nogo'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'No menu and single icon action with no button and :danger theme'
      = ui.nfg :slat_item, heading: '$5000'
    = ui.nfg :slat_actions, :danger, button: false, menu: false, icon: 'trash', href: '#nogo'

<p class="text-muted">Icon ONLY present on all screen sizes.</p>
<div class="slats slat-actions-sm">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>No menu and single icon action button</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a class="btn btn-outline-secondary" href="#nogo"><i aria-hidden="true" class="fa fa-pencil mr-1"></i></a></div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>No menu and single icon action with no button and :danger theme</h6>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
      </div>
    </div>
    <div class="slat-actions" href="#nogo"><a href="#nogo" class="text-danger d-block"><i aria-hidden="true" class="fa fa-trash text-danger"></i></a></div>
  </div>
</div>

Slats with large slat actions

Button present on all screen sizes.

First Column
Second Column
Default actions menu
$5000
Edit Delete
No menu and single action button
$5000
Edit
No menu and single action button with no button and :danger theme
$5000
Delete
= ui.nfg :typeface, :muted, body: 'Button present on all screen sizes.'
= ui.nfg :slats, slat_actions: :lg do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Default actions menu'
      = ui.nfg :slat_item, heading: '$5000'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'No menu and single action button'
      = ui.nfg :slat_item, heading: '$5000'
    = ui.nfg :slat_actions, button: true, menu: false, icon: 'pencil', body: 'Edit', href: '#nogo'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'No menu and single action button with no button and :danger theme'
      = ui.nfg :slat_item, heading: '$5000'
    = ui.nfg :slat_actions, :danger, button: false, menu: false, icon: 'trash', body: 'Delete', href: '#nogo'

<p class="text-muted">Button present on all screen sizes.</p>
<div class="slats slat-actions-lg">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6>Default actions menu</h6>
        </div>
        <div class="slat-item">
          <h6>$5000</h6>
        </div>
      </div>
      <div class="slat-actions" href="#">
        <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
          <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
        </div>
      </div>
    </div>
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6>No menu and single action button</h6>
        </div>
        <div class="slat-item">
          <h6>$5000</h6>
        </div>
      </div>
      <div class="slat-actions" href="#nogo"><a class="btn btn-outline-secondary" href="#nogo"><i aria-hidden="true" class="fa fa-pencil mr-1"></i>Edit</a></div>
    </div>
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6>No menu and single action button with no button and :danger theme</h6>
        </div>
        <div class="slat-item">
          <h6>$5000</h6>
        </div>
      </div>
      <div class="slat-actions" href="#nogo"><a href="#nogo" class="text-danger d-block"><i aria-hidden="true" class="fa fa-trash text-danger mr-1"></i> Delete</a></div>
    </div>
  </div>
</div>

Slats without slat actions

No slat actions allows for content (slat-body) to be full width of slat.

First Column
Second Column
Karl Fergood lives here in this column

A caption about this contact

$5000

An amount caption

= ui.nfg :typeface, :muted, body: 'No slat actions allows for content (slat-body) to be full width of slat.'
= ui.nfg :slats, slat_actions: :none do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood lives here in this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'

<p class="text-muted">No slat actions allows for content (slat-body) to be full width of slat.</p>
<div class="slats slat-actions-none">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Karl Fergood lives here in this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
  </div>
</div>

Slats with small spacing

Used when the slats need to be condensed.

First Column
Second Column
Karl Fergood lives here in this column

A caption about this contact

$5000

An amount caption

Edit Delete 
= ui.nfg :typeface, :muted, body: 'Used when the slats need to be condensed.'
= ui.nfg :slats, :sm do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood lives here in this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'

<p class="text-muted">Used when the slats need to be condensed.</p>
<div class="slats slats-sm">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Karl Fergood lives here in this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
</div>

Slats with large spacing

Used when the slats need to be expanded.

First Column
Second Column
Karl Fergood lives here in this column

A caption about this contact

$5000

An amount caption

Edit Delete 
= ui.nfg :typeface, :muted, body: 'Used when the slats need to be expanded.'
= ui.nfg :slats, :lg do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood lives here in this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'

<p class="text-muted">Used when the slats need to be expanded.</p>
<div class="slats slats-lg">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Karl Fergood lives here in this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
</div>

Slats with nowrap

Used when slat items should not wrap on smaller screens.

First Column
Second Column
Karl Fergood lives here in this column

A caption about this contact

$5000

An amount caption

Edit Delete 
= ui.nfg :typeface, :muted, body: 'Used when slat items should not wrap on smaller screens.'
= ui.nfg :slats, :nowrap do
  = ui.nfg :slat_header do
    = ui.nfg :slat do
      = ui.nfg :slat_body do
        = ui.nfg :slat_item, slat_header: 'First Column'
        = ui.nfg :slat_item, slat_header: 'Second Column'
  = ui.nfg :slat do
    = ui.nfg :slat_body do
      = ui.nfg :slat_item, heading: 'Karl Fergood lives here in this column', caption: 'A caption about this contact'
      = ui.nfg :slat_item, heading: '$5000', caption: 'An amount caption'
    = ui.nfg :slat_actions do
      = ui.nfg :slat_action, href: '#', body: 'Edit', icon: 'pencil'
      = ui.nfg :slat_action, :danger, href: '#', body: 'Delete', icon: 'trash-o', method: :delete, confirm: 'Are you sure you want to delete?'


<p class="text-muted">Used when slat items should not wrap on smaller screens.</p>
<div class="slats slats-nowrap">
  <div class="slat-header d-none d-md-block">
    <div class="slat">
      <div class="slat-body">
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">First Column</h6>
        </div>
        <div class="slat-item">
          <h6 class="display-4 slat-column-header">Second Column</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="slat">
    <div class="slat-body">
      <div class="slat-item">
        <h6>Karl Fergood lives here in this column</h6>
        <p class="mb-0 font-size-sm">A caption about this contact</p>
      </div>
      <div class="slat-item">
        <h6>$5000</h6>
        <p class="mb-0 font-size-sm">An amount caption</p>
      </div>
    </div>
    <div class="slat-actions" href="#">
      <div class="dropdown"><button class="btn dropdown-toggle btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><span class="slat-actions-text">Actions</span><i aria-hidden="true" class="fa fa-caret-down ml-1"></i></button>
        <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i aria-hidden="true" class="fa fa-pencil fa-fw text-center mr-1"></i> Edit</a><a class="dropdown-item text-danger" data-confirm="Are you sure you want to delete?" data-method="delete" href="#"><i aria-hidden="true" class="fa fa-trash-o fa-fw text-center mr-1"></i> Delete</a></div>
      </div>
    </div>
  </div>
</div>

Slat Actions that build a slat action on their own

":warning trait (button)" 
= ui.nfg :slat_actions, :warning, menu: false, icon: 'trash', href: '#nogo', button: true
<div class="slat-actions" href="#nogo"><a class="btn btn-outline-warning" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i></a></div>
Delete
= ui.nfg :slat_actions, :warning, menu: false, icon: 'trash', href: '#nogo', button: true, body: 'Delete'
<div class="slat-actions" href="#nogo"><a class="btn btn-outline-warning" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i>Delete</a></div>

"Theme: :danger (button)" 
= ui.nfg :slat_actions, theme: :danger, menu: false, icon: 'trash', href: '#nogo', button: true
<div class="slat-actions" href="#nogo"><a class="btn btn-outline-danger" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i></a></div>
Delete
= ui.nfg :slat_actions, theme: :danger, menu: false, icon: 'trash', href: '#nogo', button: true, body: 'Delete'
<div class="slat-actions" href="#nogo"><a class="btn btn-outline-danger" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i>Delete</a></div>

"No theme (button)" 
= ui.nfg :slat_actions, menu: false, icon: 'trash', href: '#nogo', button: true
<div class="slat-actions" href="#nogo"><a class="btn btn-outline-secondary" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i></a></div>
Delete
= ui.nfg :slat_actions, menu: false, icon: 'trash', href: '#nogo', button: true, body: 'Delete'
<div class="slat-actions" href="#nogo"><a class="btn btn-outline-secondary" href="#nogo"><i aria-hidden="true" class="fa fa-trash mr-1"></i>Delete</a></div>

":warning trait (not button)" 
= ui.nfg :slat_actions, :warning, menu: false, icon: 'trash', href: '#nogo', button: false
<div class="slat-actions" href="#nogo"><a href="#nogo" class="text-warning d-block"><i aria-hidden="true" class="fa fa-trash text-warning"></i></a></div>
Delete
<div class="slat-actions" href="#nogo"><a href="#nogo" class="text-warning d-block"><i aria-hidden="true" class="fa fa-trash text-warning mr-1"></i> Delete</a></div>

"theme: :danger (not button)" 
= ui.nfg :slat_actions, theme: :danger, menu: false, icon: 'trash', href: '#nogo'
<div class="slat-actions" href="#nogo"><a href="#nogo" class="text-danger d-block"><i aria-hidden="true" class="fa fa-trash text-danger"></i></a></div>
Delete
= ui.nfg :slat_actions, theme: :danger, menu: false, icon: 'trash', href: '#nogo', body: 'Delete'
<div class="slat-actions" href="#nogo"><a href="#nogo" class="text-danger d-block"><i aria-hidden="true" class="fa fa-trash text-danger mr-1"></i> Delete</a></div>

"no theme" 
= ui.nfg :slat_actions, menu: false, icon: 'trash', href: '#nogo'
<div class="slat-actions" href="#nogo"><a href="#nogo" class="d-block"><i aria-hidden="true" class="fa fa-trash"></i></a></div>
Delete
= ui.nfg :slat_actions, menu: false, icon: 'trash', href: '#nogo', body: 'Delete'
<div class="slat-actions" href="#nogo"><a href="#nogo" class="d-block"><i aria-hidden="true" class="fa fa-trash mr-1"></i> Delete</a></div>