Pricing Table

The foundation framework provides pricing tables for marketing based sites. It is made from simple unordered list.

Classes of pricing Tables:

• li.title: It creates title with style.
• li.price: Here we can add price for product or plan.
• li.description: add description here, when we need to describe product or plan.
• li.bullet-item: Using this class, we can list items.
• li.cta-button: By this class, we add buttons to list items when we need.

The following example explains pricing table.

HTML Code

<ul class="pricing-table">
              <li class="title">City</li>
              <li class="price">$1999.99</li>
              <li class="description">Everything Covered</li>
              <li class="bullet-item">1 Guide</li>
              <li class="bullet-item">VIP Room</li>
              <li class="bullet-item">50% Discount Food</li>
              <li class="cta-button"><a href="#" class="button">Buy Now</a></li>
</ul>

Output

• City
• $1999.99
• Everything Covered
• 1 Guide
• VIP Room
• 50% Discount Food
• Buy Now

Progress Bar

Zurb Foundation Framework creates progress bar using progress and meter classes.

HTML Code

<div class="progress [radius round]">
  <span class="meter"></span>
</div>

Output

Accordion

Accordion element used to expand and collapse content. It is broken in to logical sections, like same as tabs. In zurb foundation 4.3.2, single JS file used for accordion and tabs. But different JS file used in version 5.1.1.

HTML Code

<dl class="accordion" data-accordion>
  <dd class="accordion-navigation">
    <a href="#panel1">Accordion 1</a>
    <div id="panel1" class="content active">
      <p>Content of Accordion Panel1</p>
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">
	<p>Content of Accordion Panel2</p>
    </div>
  </dd>
  <dd class="accordion-navigation">
    <a href="#panel3">Accordion 3</a>
    <div id="panel3" class="content">
      <p>Content of Accordion Panel3</p>
    </div>
  </dd>
</dl>

Output

Accordion 1

Content of Accordion Panel1

Accordion 2

Content of Accordion Panel2

Accordion 3

Content of Accordion Panel3

Tabs

Tabs organize multiple documents in a single section container. It is used for switching between documents in a container.

HTML Code

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Content of Panel1………</p>
  </div>
  <div class="content" id="panel2">
    <p> Content of Panel2………</p>
  </div>
  <div class="content" id="panel3">
    <p> Content of Panel3………</p>
  </div>
</div>

Output

• Tab 1
• Tab 2
• Tab 3

Equalizer

Equalizer used to create content with equal height on your web page.

HTML Code

<div class="row" data-equalizer>
  <div class="large-6 columns panel" data-equalizer-watch>
    <p>Foundation grid increased and decreased based on the browser width. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width. Foundation will adapt its grid to the current browser. Both grid systems have all of the advanced features such as nesting, offsets and pushing/pulling.</p> </div>
  <div class="large-6 columns panel" data-equalizer-watch>
    <p>Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port. The zurb foundation grid specify width each column with the small, medium and large.</p>
  </div>
</div>

Output

Next Lesson > Foundation Media