Open Food Network Style Guide

Components

Distributor

Enterprise 1

Herndon
%shop.darkswarm
  %navigation
    %distributor.details.row
      .small-12.medium-6.large-6.columns
        #distributor_title
          %h3
            Enterprise 1
          %location Herndon

Order cycle

Orders are closed

Please wait until the next cycle opens (or contact us directly to see if we can accept any late orders)

%ordercycle
  %h4.text-right
    %i.ofn-i_032-closed-sign
    Orders are closed
  %p.text-right
    Please wait until the next cycle opens (or contact us directly to see if we can accept any late orders)
  .text-right
    %small
      %em

Products

Line layout

Bass - FILLET Frozen
300g
£10.18
£0.00
.darkswarm
  %products
    %product#product-201797.animate-repeat.ng-scope{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in visibleProducts track by product.id", :style => ""}
      .product-thumb
        %a{"ng-click" => "triggerProductModal()"}
          %i.ofn-i_057-expand
          %img{"ng-click" => "triggerProductModal()", "ng-src" => "/assets/noimage/small.png", :src => "/assets/noimage/small.png"}/
      .row.summary
        .small-10.medium-10.large-11.columns.summary-header
          %h3
            %a{"ng-click" => "triggerProductModal()"}
              %span.ng-binding{"ng-bind" => "::product.name"} Bass
              %i.ofn-i_057-expand
          %small
            %em
              from
            %span
              %a{"ng-transclude" => ""}
                %i.ofn-i_036-producers.ng-scope
                %span.ng-binding.ng-scope{"ng-bind" => "::enterprise.name"} Sole of Discretion
        .small-2.medium-2.large-1.columns.text-center
          .taxon-flag
            %render-svg{:path => "/assets/default_taxon.png"}
              %svg-wrapper
      .row.variants
        .small-12.medium-4.large-4.columns.variant-name
          .table-cell
            .inline.ng-binding Bass - FILLET Frozen
        %ng-include.ng-scope{:src => "'partials/shop_variant_no_group_buy.html'"}
          .small-5.medium-3.large-3.columns.text-right.ng-scope{"ng-if" => "::!variant.product.group_buy"}
            %input#variants_207155.ng-pristine.ng-untouched.ng-valid.ng-empty.ng-valid-min{:integer => "", :min => "0", :name => "variants[207155]", "ng-disabled" => "!variant.on_demand && variant.count_on_hand == 0", "ng-model" => "variant.line_item.quantity", "ofn-disable-scroll" => "", "ofn-on-hand" => "1", :placeholder => "0", :type => "number"}/
        %ng-include.ng-scope{:src => "'partials/shop_variant_with_group_buy.html'"}
        .small-3.medium-1.large-1.columns.variant-unit
          .table-cell
            %em.ng-binding 300g
        .small-4.medium-2.large-2.columns.variant-price
          .table-cell.price.ng-binding
            %i.ofn-i_009-close
            £10.18
            %button.graph-button.ng-isolate-scope{"ng-class" => "{open: tt_isOpen}", "price-breakdown" => "_", "price-breakdown-animation" => "", "price-breakdown-append-to-body" => "true", "price-breakdown-placement" => "left", :variant => "variant"}
        .small-12.medium-2.large-2.columns.total-price.text-right
          .table-cell
            %strong.ng-binding{"ng-class" => "{filled: variant.line_item.total_price}"}
              £0.00

Taxons

.filter-shopfront.taxon-selectors
  %ul.taxon-selectors
    %li
      %a.button Meat
    %li
      %a.button Fish
    %li
      %a.button Bread