WineDirect Fulfillment Documentation

Fulfillment Documentation

TOP

Style Guide

Quick Links:

Typography

Responsive Layouts

Content Elements

 

Typography ---

Section Header

<header class="section-header">
   <h1>Section Header</h1>
</header>

 

Heading #1

<h1>Heading #1</h1>

 

Heading #2

<h2>Heading #2</h2>

 

Heading #3

<h3>Heading #3</h3>
 
Link Header
<a class="topicHeader" href="#">Link Header</a> 

 

Responsive Layouts ---

Two Up Callout

<div class="container-fluid">
    <div class="row">
        <article class="col-sm-6 col-xs-12">
            //Put Content Here//
        </article>
        <article class="col-sm-6 col-xs-12">
            //Put Content Here//
        </article>
    </div>
</div>

 

Three Up Callout

<div class="container-fluid">
    <div class="row">
        <article class="col-sm-4 col-xs-12">
            //Put Content Here//
        </article>
        <article class="col-sm-4 col-xs-12">
            //Put Content Here//
        </article>
        <article class="col-sm-4 col-xs-12">
            //Put Content Here//
        </article>
    </div>
</div>

 

Content Elements ---

Callouts

Urgent Alert

<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign">&nbsp;</span>*ENTER YOUR ALERT HERE*</div>

Caution Alert

<div class="alert alert-warning" role="alert"><span class="glyphicon glyphicon-warning-sign">&nbsp;</span>*ENTER YOUR ALERT HERE*</div>

Successful Alert

<div class="alert alert-success" role="alert"><span class="glyphicon glyphicon-ok">&nbsp;</span>*ENTER YOUR ALERT HERE*</div>

Informational Alert

<div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign">&nbsp;</span>*ENTER YOUR ALERT HERE*</div>

FAQ Alert

 *Report customization is currently available on select sales reports (see Sales By Date) under the reports section on the admin panel. Reports are steadily being updated so please keep checking back for new reports with this feature.
<div class="well"><span class="glyphicon glyphicon-question-sign">&nbsp;</span>*ENTER YOUR ALERT HERE*</div>

 

Buttons

Small Button

Learn More
 
<a class="linkBtn" href="#"><span>Learn More</span></a>

 

Button that takes up width of it's parent

Learn More
 
<a class="linkBtn expand" href="#"><span>Learn More</span></a>

 

3 up Example:

 

<div class="container-fluid">
    <div class="row">
        <article class="col-sm-4 col-xs-12">
            <a class="linkBtn expand" href="#"><span>Learn More</span></a>
        </article>
        <article class="col-sm-4 col-xs-12">
            <a class="linkBtn expand" href="#"><span>Learn More</span></a>
        </article>
        <article class="col-sm-4 col-xs-12">
            <a class="linkBtn expand" href="#"><span>Learn More</span></a>
        </article>
    </div>
</div> 

 

Responsive Video:

 
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="****-VIDEO EMBED LINK GOES HERE-****"></iframe></div>

 

Tables

Table with headers

Title Order
This will display in the Admin Panel and is used for your own organizational purposes. It will not be visible on the website. The "Order" number will decide how it displays both in the Admin Panel and the website. If there are multiple pods to choose from in a single Pod location, the one in the first position, "Order: 1", will display on the website. If your pod location allows to display multiple pods, then you can control how they are sorted with the order field.
<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Order</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This will display in the Admin Panel and is used for your own&nbsp;organizational purposes. It&nbsp;will not be visible on the website.</td>
            <td>The "Order" number will decide how it displays both in the Admin Panel and the website. If there are multiple pods to choose from in a single Pod location, the one in the first position, "Order: 1", will display on the website. If your pod location allows to display multiple pods, then you can control how they are sorted with the order field.</td>
        </tr>
    </tbody>
</table>

 

Table without headers

Title This will display in the Admin Panel and is used for your own organizational purposes. It will not be visible on the website.
Order The "Order" number will decide how it displays both in the Admin Panel and the website. If there are multiple pods to choose from in a single Pod location, the one in the first position, "Order: 1", will display on the website. If your pod location allows to display multiple pods, then you can control how they are sorted with the order field.
Active You will want to check this box to control what is going to display on the website. Again if you have multiple pods created in a single pod location, this will control which one displays regardless of the "Order" number.
Content Next you have the freedom to add in information in the text box. This is well suited for a call to action and to catch your consumers eye.
<table class="table">
    <tbody>
        <tr>
            <th class="col-sm-2">Title</th>
            <td>This will display in the Admin Panel and is used for your own organizational purposes. It will not be visible on the website.</td>
        </tr>
        <tr>
            <th class="col-sm-2">Order</th>
            <td>The "Order" number will decide how it displays both in the Admin Panel and the website. If there are multiple pods to choose from in a single Pod location, the one in the first position, "Order: 1", will display on the website. If your pod location allows to display multiple pods, then you can control how they are sorted with the order field.</td>
        </tr>
        <tr>
            <th class="col-sm-2">Active</th>
            <td>You will want to check this box to control what is going to display on the website. Again if you have multiple pods created in a single pod location, this will control which one displays regardless of the "Order" number.</td>
        </tr>
        <tr>
            <th class="col-sm-2">Content</th>
            <td>Next you have the freedom to add in information in the text box. This is well suited for a call to action and to catch your consumers eye.</td>
        </tr>
    </tbody>
</table>