#category-summary-content-block.style-guide__subsection

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

  %p Displays a heading followed by a #{link_to_style_guide('components', 'product_grid', true)}, unless the products are empty. Produced by the content editor in the admin.

  %p Category with products and no custom content
  .style-guide__example-block
    .category-summary-content-block
      = link_to '#', class: 'category-summary-content-block__content' do
        %span.category-summary-content-block__content-container
          %span.category-summary-content-block__heading Category Name
          %span.category-summary-content-block__call-to-action View all
      .category-summary-content-block__products  
        .grid.grid--flush
          - 4.times do
            .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
              .product-summary
                %p.product-summary__media
                  = link_to('#', class: 'product-summary__media-link') do
                    = image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-summary__media-image')
                .product-summary__info
                  %p.product-summary__name= link_to('Product Name', '#')
                  .product-prices.product-prices--summary
                    %p.product-prices__price
                      %span= number_to_currency(109.99)

  %p Category with customized heading, CTA, and background image.
  .style-guide__example-block
    .category-summary-content-block
      = link_to '#', class: 'category-summary-content-block__content', style: "background-image: url('/assets//workarea/storefront/style_guide_light_banner.png'); background-size: cover; background-position: center;" do
        %span.category-summary-content-block__content-container
          %span.category-summary-content-block__heading Custom heading
          %span.category-summary-content-block__call-to-action Custom call to action!
      .category-summary-content-block__products  
        .grid.grid--flush
          - 4.times do
            .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
              .product-summary
                %p.product-summary__media
                  = link_to('#', class: 'product-summary__media-link') do
                    = image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-summary__media-image')
                .product-summary__info
                  %p.product-summary__name= link_to('Product Name', '#')
                  .product-prices.product-prices--summary
                    %p.product-prices__price
                      %span= number_to_currency(109.99)

  %p Empty category:
  .style-guide__example-block
    .category-summary-content-block
      %h2 Category Name
      %p Category Name is empty.