#box.style-guide__subsection

  %h3= link_to_style_guide('components', 'box')

  %p A generic box component. Allows for header and body content, via <code>box__head</code> and <code>box__body</code> elements, respectively. <code>box_body</code> may also contain an optional <code>box__actions</code> element which will align a link to the right of the box.

  .style-guide__example-block
    .box
      .box__head
        %span.box__heading Header Text
      .box__body
        .box__section
          %p Render-farm geodesic bicycle chrome monofilament construct nano-augmented reality. Man Chiba pistol range-rover franchise systemic apophenia realism knife sentient Kowloon Shibuya computer garage singularity. Faded military-grade sentient systemic wonton soup fluidity vehicle long-chain hydrocarbons. Long-chain hydrocarbons decay gang hacker Tokyo silent smart-shrine vehicle market nodal point man apophenia corrupted human.
          .box__actions
            = link_to 'Box Action', '#', class: 'text-button'
        .box__section
          %p Render-farm geodesic bicycle chrome monofilament construct nano-augmented reality. Man Chiba pistol range-rover franchise systemic apophenia realism knife sentient Kowloon Shibuya computer garage singularity. Faded military-grade sentient systemic wonton soup fluidity vehicle long-chain hydrocarbons. Long-chain hydrocarbons decay gang hacker Tokyo silent smart-shrine vehicle market nodal point man apophenia corrupted human.
          .box__actions
            = link_to 'Box Action', '#', class: 'text-button'

  .style-guide__unit-test

    %h4 Unit Test

    - 6.times do |i|
      %p <code>.box__heading</code> should work with <code>h#{i + 1}</code> elements.
      .style-guide__example-block
        .box
          .box__head
            = content_tag("h#{i + 1}", 'Heading Test', class: 'box__heading')
          .box__body
            %p Chrome rifle cyber-narrative saturation point pen-space Shibuya RAF spook dome digital grenade physical hacker sensory. Futurity monofilament alcohol Kowloon savant film table franchise crypto-boat-space refrigerator chrome semiotics. Corrupted nodal point narrative bicycle cartel hacker towards warehouse. Face forwards network j-pop human towards boat chrome.
            .box__actions
              = link_to 'Box Action', '#', class: 'text-button'

#box--rounded.style-guide__subsection

  %h3= link_to_style_guide('components', 'box__rounded')

  %p should round the edges of the box component.

  .style-guide__example-block
    .box.box--rounded
      .box__head
        %span.box__heading Header Text
      .box__body
        %p Render-farm geodesic bicycle chrome monofilament construct nano-augmented reality. Man Chiba pistol range-rover franchise systemic apophenia realism knife sentient Kowloon Shibuya computer garage singularity. Faded military-grade sentient systemic wonton soup fluidity vehicle long-chain hydrocarbons. Long-chain hydrocarbons decay gang hacker Tokyo silent smart-shrine vehicle market nodal point man apophenia corrupted human.
        .box__actions
          = link_to 'Box Action', '#', class: 'text-button'

#box--padded.style-guide__subsection

  %h3= link_to_style_guide('components', 'box__padded')

  %p should add padding to the box.

  .style-guide__example-block
    .box.box--padded
      .box__head
        %span.box__heading Header Text
      .box__body
        %p Render-farm geodesic bicycle chrome monofilament construct nano-augmented reality. Man Chiba pistol range-rover franchise systemic apophenia realism knife sentient Kowloon Shibuya computer garage singularity. Faded military-grade sentient systemic wonton soup fluidity vehicle long-chain hydrocarbons. Long-chain hydrocarbons decay gang hacker Tokyo silent smart-shrine vehicle market nodal point man apophenia corrupted human.
        .box__actions
          = link_to 'Box Action', '#', class: 'text-button'