Forms

Although syntactical some of the forms are not tables, Teleflora forms employ the visual structure commonly associated with tables.

Order
Date		 Order
Number		 Recipient Product Status
MM/DD/YYYY 00000000
View Details		 First Last order history sample image
Product Name
 Order Status
First Last order history sample image
Product Name
 Order Status
View Details
MM/DD/YYYY 00000000
View Details		 First Last order history sample image
Product Name
 Order Status
View Details 
  <!-- table starts -->
  <table class="table m-order-history-table">
    <!-- table header starts -->
    <thead class="table-head avenir-heavy">
      <tr class="table-row">
        <th class="table-header">Order<br/>Date</th>
        <th class="table-header-alt hide-after-tablet m-order-history-table-order-header">Order<br/>Number</th>
        <th class="table-header-alt">Recipient</th>
        <th class="table-header-alt">Product</th>
        <th class="table-header no-mobile">Status</th>
      </tr>
    </thead>
    <!-- table header ends -->
    <!-- table body starts -->
    <tbody class="table-body bembo">
      <tr class="table-row">
        <td class="table-data-alt">MM/DD/YYYY</td>
        <td class="table-data-alt m-order-history-table-order hide-after-tablet">00000000<br><a href="#" class="no-mobile">View Details</a></td>
        <td class="table-data-alt2 table-data-bottom-border">First Last</td>
        <td class="table-data-alt table-data-bottom-border m-order-history-table-product">
          <a href="<%= domain %><%= accounts_path %>/order-history/order-detail"><img src="http://placehold.it/40x44" class="m-order-history-table-product-image" alt="order history sample image" /></a>
          <div class="hide-after-tablet">Product Name</div>
        </td>
        <td class="table-data table-data-bottom-border last-td no-mobile">Order Status</td>
      </tr>
    </tbody>
    <!-- table body ends -->
  </table>
  <!-- table ends -->
(1 of 2) Individual item by Teleflora (type)
standard image

Individual item
(type)

  <!-- delivery info item starts -->
  <div class="m-delivery-info-item l-content l-content-clear-margin-bottom">

      <!-- shopping cart item header starts -->
      <div class="m-shopping-cart-item-header">
        <div class="m-shopping-cart-item-header-content ">
          <div class="container_4">
            <span class="m-shopping-cart-item-header-number">(<span id="itemNo-1" class="itemNo">1</span> of <span id="totalItems-1" class="totalItems">2</span>) <span class="itemTitleCopy no-mobile" id="itemTitleCopy-1">Individual item by Teleflora</span>
            <span class="no-mobile">(</span><span class="sizeDescriptionTitle no-mobile" id="sizeDescriptionTitle-1">type</span><span class="no-mobile">)</span>
           </span>
         </div>
       </div>
     </div>
     <!-- shopping cart item header ends -->

     <!-- cart item starts -->
     <div class="l-wrapper container_4">
       <!-- image and price container starts -->
       <div class="m-delivery-info-price-summary l-content l-content-clear-margin-bottom clearfix">

         <!-- image container starts -->
         <div class="m-delivery-info-item-image grid_1 d-grid_3 fluid">
             <img class="image-1" src="http://placehold.it/157x197" alt="standard image">
         </div>
         <!-- image container ends -->

         <!-- cart item info container starts -->
         <div class=" grid_3 d-grid_7">
           <!-- copy and price container starts -->
           <div class="m-florist-selection-bouquet-info-price-element grid_4">

               <!-- bouquet info starts -->
               <div class="m-florist-selection-bouquet-info-copy grid_3">
                 <!-- item info -->
                 <p class="itemCopy-1">Individual item<br>(type)</p>
                 <!-- item code label -->
                 <label class="itemCode-1">ITEM #A0A0A-A0</label>
               </div>
               <!-- bouquet info ends -->

               <!-- cart price starts -->
               <div class="grid_1 d-grid_1 pull-right">
                 <label class="itemPrice-1 m-delivery-info-price pull-right">$00.00</label>
               </div>
               <!-- cart  price ends -->
           </div>
           <!-- copy and price container ends -->
         </div>
         <!-- cart item info container ends -->

       </div>
       <!-- image and price container ends -->

     </div>
     <!-- cart item ends -->

 </div>
 <!-- delivery info item ends -->

Lists

This section displays the variety of list options for the Teleflora site.

Nam vulputate leo sed orci tristique, nec vehicula nisl viverra. Donec lacinia non leo eget ultricies. Nulla consequat, urna vel commodo faucibus, ligula libero feugiat lectus, vitae interdum justo nunc ac neque. Quisque eget aliquet orci.

  • Bullet 1

  • Bullet 2

  • Bullet 3

Fusce porta tortor elit, adipiscing tempor mauris vulputate ac. Morbi dictum odio commodo laoreet mattis. Pellentesque tristique id dolor elementum posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

  1. Bullet 1

  2. Bullet 2

  3. Bullet 3

Vivamus eget hendrerit nisl. Proin sit amet felis id mauris congue ultricies in ut sapien. Phasellus id tellus quis nulla bibendum dignissim. Maecenas iaculis aliquam velit id tempus. Aenean porttitor viverra placerat. Duis vel lobortis sem.

Standalone Link 1 Standalone Link 2 
  <!-- section container starts -->
  <div class="m-about-content-inner">
    <p>
      Fusce porta tortor elit, adipiscing tempor mauris vulputate ac. Morbi dictum odio commodo laoreet mattis. Pellentesque tristique id dolor elementum posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
    <!-- list starts -->
    <ol class="m-about-content-list">
      <li><p>Bullet 1</p></li>
      <li><p>Bullet 2</p></li>
      <li><p>Bullet 3</p></li>
    </ol>
    <!-- list ends -->
  </div>
  <!-- section container ends -->