Cards

= ui.nfg :card, heading: 'stuff', title: 'title!', describe: 'donor-scroll' do
  Howdy

<div class="card" data-describe="donor-scroll">
  <div class="card-header">stuff</div>
  <div class="card-body">
    <h5 class="card-title">title!</h5>
    Howdy
  </div>
</div>

= ui.nfg :card, heading: 'Card heading', subtitle: 'Card subtitle', body: 'Card body', class: 'my-4'

<div class="card my-4">
  <div class="card-header">Card heading</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card subtitle</h6>
    Card body</div>
</div>

= ui.nfg :card, heading: 'Card heading', class: 'my-4' do
  %p.card-text Card body from a block

<div class="card my-4">
  <div class="card-header">Card heading</div>
  <div class="card-body">
    <p class='card-text'>Card body from a block</p>
  </div>
</div>

= ui.nfg :card, class: 'my-4' do
  Default, no frills card

<div class="card my-4">
  <div class="card-body">Default, no frills card
  </div>
</div>

= ui.nfg :card, render_in_body: false, class: 'my-4' do
  = ui.nfg :card_image_overlay, image: 'https://via.placeholder.com/600x400', title: 'Card Image Overlay Title' do
    %p.card-text Some additional information
  = ui.nfg :card_body do
    %p.card-text Some body content

<div class="card my-4"><img class="card-img" src="https://via.placeholder.com/600x400" />
  <div class="card-img-overlay">
    <h5 class="card-title">Card Image Overlay Title</h5>
    <p class='card-text'>Some additional information</p>
  </div>
  <div class="card-body">
    <p class='card-text'>Some body content</p>
  </div>
</div>

= ui.nfg :card, title: 'Tile without body', render_in_body: false do
  = ui.nfg :card_body, body: 'Manual card body'
  = ui.nfg :card_body do
    %p Some content for the second card body
  = ui.nfg :card_footer, body: 'the card footer'

<div class="card my-4"><img class="card-img" title="Card Image Overlay Title" src="https://via.placeholder.com/600x400" />
  <div class="card-body">
    <p class='card-text'>card image version without overlay</p>
  </div>
</div>

= ui.nfg :card, title: 'Tile without body', render_in_body: false do
  = ui.nfg :card_body, body: 'Manual card body'
  = ui.nfg :card_body do
    %p Some content for the second card body
  = ui.nfg :card_footer, body: 'the card footer'

<div class="card">
  <div class="card-body">Manual card body</div>
  <div class="card-body">
    <p>Some content for the second card body</p>
  </div>
  <div class="card-footer">the card footer</div>
</div>

- 4.times do 
  .col-12.col-lg-6.d-flex.mb-3
    = ui.nfg :card, render_in_body: false, class: 'card-gallery' do
      .card-gallery-img
        = ui.nfg :card_image_overlay, image: "https://via.placeholder.com/600x400?text=Auto+Generated+Image+No.+1"

        = link_to '#', class: 'card-gallery-img-overlay' do
          = ui.nfg :typeface, :white, title: "See Details", icon: 'info-circle', class: 'card-gallery-img-overlay-text'

    = ui.nfg :card_body do
      = ui.nfg :badge, :success, body: "Recommended", class: 'badge-highlight', tooltip: "Recommended Text"
      = ui.nfg :typeface, body: "Newsletter", class: 'mb-1'
      = ui.nfg :button, :submit, :secondary, body: 'Start Customizing', class: 'mt-2'

<div class='col-12 col-lg-6 d-flex mb-3'>
  <div class="card card-gallery">
    <div class='card-gallery-img'>
      <img class="card-img" src="https://via.placeholder.com/600x400?text=Auto+Generated+Image+No.+1" />
      <div class="card-img-overlay"></div>
      <a class="card-gallery-img-overlay" href="#">
        <h6 class="card-gallery-img-overlay-text text-white"><i aria-hidden="true" class="fa fa-info-circle mr-1"></i> See Details</h6>
      </a></div>
  </div>
  <div class="card-body"><span class="badge badge-highlight badge-success" data-toggle="tooltip" data-placement="top" data-html="true" title="Recommended Text">Recommended</span>
    <p class="mb-1">Newsletter</p>
    <button class="btn mt-2 btn-secondary" type="submit">Start Customizing</button></div>
</div>
<div class='col-12 col-lg-6 d-flex mb-3'>
  <div class="card card-gallery">
    <div class='card-gallery-img'>
      <img class="card-img" src="https://via.placeholder.com/600x400?text=Auto+Generated+Image+No.+1" />
      <div class="card-img-overlay"></div>
      <a class="card-gallery-img-overlay" href="#">
        <h6 class="card-gallery-img-overlay-text text-white"><i aria-hidden="true" class="fa fa-info-circle mr-1"></i> See Details</h6>
      </a></div>
  </div>
  <div class="card-body"><span class="badge badge-highlight badge-success" data-toggle="tooltip" data-placement="top" data-html="true" title="Recommended Text">Recommended</span>
    <p class="mb-1">Newsletter</p>
    <button class="btn mt-2 btn-secondary" type="submit">Start Customizing</button></div>
</div>
<div class='col-12 col-lg-6 d-flex mb-3'>
  <div class="card card-gallery">
    <div class='card-gallery-img'>
      <img class="card-img" src="https://via.placeholder.com/600x400?text=Auto+Generated+Image+No.+1" />
      <div class="card-img-overlay"></div>
      <a class="card-gallery-img-overlay" href="#">
        <h6 class="card-gallery-img-overlay-text text-white"><i aria-hidden="true" class="fa fa-info-circle mr-1"></i> See Details</h6>
      </a></div>
  </div>
  <div class="card-body"><span class="badge badge-highlight badge-success" data-toggle="tooltip" data-placement="top" data-html="true" title="Recommended Text">Recommended</span>
    <p class="mb-1">Newsletter</p>
    <button class="btn mt-2 btn-secondary" type="submit">Start Customizing</button></div>
</div>
<div class='col-12 col-lg-6 d-flex mb-3'>
  <div class="card card-gallery">
    <div class='card-gallery-img'>
      <img class="card-img" src="https://via.placeholder.com/600x400?text=Auto+Generated+Image+No.+1" />
      <div class="card-img-overlay"></div>
      <a class="card-gallery-img-overlay" href="#">
        <h6 class="card-gallery-img-overlay-text text-white"><i aria-hidden="true" class="fa fa-info-circle mr-1"></i> See Details</h6>
      </a></div>
  </div>
  <div class="card-body"><span class="badge badge-highlight badge-success" data-toggle="tooltip" data-placement="top" data-html="true" title="Recommended Text">Recommended</span>
    <p class="mb-1">Newsletter</p>
    <button class="btn mt-2 btn-secondary" type="submit">Start Customizing</button></div>
</div>

= ui.nfg :card, :primary, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', footer: 'Card Footer' do
  %p.card-text Card with primary theme

<div class="card my-4 bg-primary text-white">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    <p class='card-text'>Card with primary theme</p>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

= ui.nfg :card, :secondary, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with secondary theme'

<div class="card my-4 bg-secondary text-white">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with secondary theme</div>
</div>

= ui.nfg :card, :success, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with success theme'

<div class="card my-4 bg-success text-white">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with success theme</div>
</div>

= ui.nfg :card, :danger, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with danger theme'

<div class="card my-4 bg-danger text-white">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with danger theme</div>
</div>

= ui.nfg :card, :warning, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with warning theme'

<div class="card my-4 bg-warning text-white">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with warning theme</div>
</div>

= ui.nfg :card, :info, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with info theme'

<div class="card my-4 bg-info text-white">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with info theme</div>
</div>

= ui.nfg :card, :light, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with light theme'

<div class="card my-4 bg-light">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with light theme</div>
</div>

= ui.nfg :card, :dark, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with dark theme'

<div class="card my-4 bg-dark text-white">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with dark theme</div>
</div>

= ui.nfg :card, :primary, :outlined, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', footer: 'Card Footer' do
  %p.card-text Card with primary theme

<div class="card my-4 border-primary text-primary">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    <p class='card-text'>Card with primary theme</p>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

= ui.nfg :card, :outlined, :secondary, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with secondary theme'

<div class="card my-4 border-secondary text-secondary">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with secondary theme</div>
</div>

= ui.nfg :card, :success, :outlined, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with success theme'

<div class="card my-4 border-success text-success">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with success theme</div>
</div>

= ui.nfg :card, :outlined, :danger, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with danger theme'

<div class="card my-4 border-danger text-danger">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with danger theme</div>
</div>

= ui.nfg :card, :outlined, :warning, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with warning theme'

<div class="card my-4 border-warning text-warning">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with warning theme</div>
</div>

= ui.nfg :card, :outlined, :info, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with info theme'

<div class="card my-4 border-info text-info">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with info theme</div>
</div>

= ui.nfg :card, :outlined, :light, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: "Card with light theme. Since this is an outline card, the light theme won't have any affect, otherwise it would be white text on a white background."

<div class="card my-4 border-light">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with light theme. Since this is an outline card, the light theme won&#39;t have any affect, otherwise it would be white text on a white background.</div>
</div>

= ui.nfg :card, :outlined, :dark, heading: 'Card Headline', subtitle: 'Card Subtitle', class: 'my-4', body: 'Card with dark theme'

<div class="card my-4 border-dark text-dark">
  <div class="card-header">Card Headline</div>
  <div class="card-body">
    <h6 class="card-subtitle">Card Subtitle</h6>
    Card with dark theme</div>
</div>