Foundation CSS Media Components

Image Thumbnails

Default Thumbnail

Circular Thumbnail

Bordered Thumbnail

Responsive Thumbnail

Thumbnail Grid

Foundation Thumbnails:

<!-- Basic Thumbnail -->
<img class="thumbnail" src="image.jpg" alt="Thumbnail">

<!-- Linked Thumbnail -->
<a href="#">
  <img class="thumbnail" src="image.jpg" alt="Thumbnail">
</a>

<!-- Thumbnail with Caption -->
<div class="thumbnail">
  <img src="image.jpg" alt="Thumbnail">
  <div class="caption">
    <h5>Thumbnail Label</h5>
    <p>Description text here.</p>
    <a href="#" class="button tiny">Action</a>
  </div>
</div>

<!-- Thumbnail Grid -->
<div class="grid-x grid-margin-x small-up-2 medium-up-4">
  <div class="cell">
    <img class="thumbnail" src="image1.jpg" alt="Image 1">
  </div>
  <div class="cell">
    <img class="thumbnail" src="image2.jpg" alt="Image 2">
  </div>
  <div class="cell">
    <img class="thumbnail" src="image3.jpg" alt="Image 3">
  </div>
  <div class="cell">
    <img class="thumbnail" src="image4.jpg" alt="Image 4">
  </div>
</div>

Basic Accordion

Foundation Accordion:

<!-- Basic Accordion -->
<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 1 content goes here.</p>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 2 content goes here.</p>
    </div>
  </li>
</ul>

<!-- Multi-expand Accordion -->
<ul class="accordion" data-accordion data-multi-expand="true">
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Item 1</a>
    <div class="accordion-content" data-tab-content>
      <p>Content 1</p>
    </div>
  </li>
</ul>

<!-- Nested Accordion -->
<ul class="accordion" data-accordion>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Parent Item</a>
    <div class="accordion-content" data-tab-content>
      <ul class="accordion" data-accordion>
        <li class="accordion-item" data-accordion-item>
          <a href="#" class="accordion-title">Nested Item</a>
          <div class="accordion-content" data-tab-content>
            <p>Nested content</p>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Basic Tabs

• Home
• Profile
• Contact

Vertical Tabs

Foundation Tabs:

<!-- Basic Tabs -->
<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active">
    <a href="#panel1" aria-selected="true">Tab 1</a>
  </li>
  <li class="tabs-title">
    <a href="#panel2">Tab 2</a>
  </li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>Tab 1 content</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>Tab 2 content</p>
  </div>
</div>

<!-- Vertical Tabs -->
<div class="grid-x grid-margin-x">
  <div class="cell medium-3">
    <ul class="vertical tabs" data-tabs id="vertical-tabs">
      <li class="tabs-title is-active">
        <a href="#panel1v">Tab 1</a>
      </li>
      <li class="tabs-title">
        <a href="#panel2v">Tab 2</a>
      </li>
    </ul>
  </div>
  <div class="cell medium-9">
    <div class="tabs-content vertical" data-tabs-content="vertical-tabs">
      <div class="tabs-panel is-active" id="panel1v">
        <p>Content 1</p>
      </div>
      <div class="tabs-panel" id="panel2v">
        <p>Content 2</p>
      </div>
    </div>
  </div>
</div>

Media Object Examples

Media heading

This is some content from a media component. You can replace this with any content and adjust it as needed.

Circular Media

This is a media object with a circular image. It's great for user profiles and avatars.

Nested Media

This is a nested media object within another media object.

Right Aligned Media

This media object has the image on the right side instead of the left.

Foundation Media Object:

<!-- Basic Media Object -->
<div class="media-object">
  <div class="media-object-section">
    <div class="thumbnail">
      <img src="avatar.jpg" alt="Avatar">
    </div>
  </div>
  <div class="media-object-section">
    <h4>Media Title</h4>
    <p>Media content goes here.</p>
  </div>
</div>

<!-- Media Object with Main Section -->
<div class="media-object">
  <div class="media-object-section main-section">
    <h4>Main Section</h4>
    <p>This is the main content section.</p>
  </div>
  <div class="media-object-section">
    <div class="thumbnail">
      <img src="image.jpg" alt="Image">
    </div>
  </div>
</div>

<!-- Stacked Media Objects -->
<div class="media-object stack-for-small">
  <div class="media-object-section">
    <img src="image.jpg" alt="Image">
  </div>
  <div class="media-object-section">
    <h4>Stacked on Small</h4>
    <p>Stacks on small screens.</p>
  </div>
</div>

Image Carousel

First slide label

Some representative placeholder content for the first slide.

Foundation Orbit (Carousel):

<!-- Basic Orbit Carousel -->
<div class="orbit" role="region" aria-label="Gallery" data-orbit>
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous">
        <span class="show-for-sr">Previous Slide</span>◀
      </button>
      <button class="orbit-next">
        <span class="show-for-sr">Next Slide</span>▶
      </button>
    </div>
    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="slide1.jpg" alt="Slide 1">
          <figcaption class="orbit-caption">
            <h3>Slide 1 Title</h3>
            <p>Slide 1 description.</p>
          </figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <img class="orbit-image" src="slide2.jpg" alt="Slide 2">
      </li>
    </ul>
  </div>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0">
      <span class="show-for-sr">First slide</span>
    </button>
    <button data-slide="1">
      <span class="show-for-sr">Second slide</span>
    </button>
  </nav>
</div>

<!-- Orbit with Timer -->
<div class="orbit" data-orbit data-auto-play="false">
  <!-- Orbit content -->
</div>

<!-- Orbit with Specific Timing -->
<div class="orbit" data-orbit data-timer-delay="5000">
  <!-- Orbit content -->
</div>

Basic Progress Bars

Striped & Animated

Multiple Bars

Foundation Progress Bars:

<!-- Basic Progress Bar -->
<div class="progress" role="progressbar">
  <div class="progress-meter" style="width: 25%">
    <p class="progress-meter-text">25%</p>
  </div>
</div>

<!-- Progress Bar with Colors -->
<div class="primary progress">
  <div class="progress-meter" style="width: 50%"></div>
</div>

<div class="success progress">
  <div class="progress-meter" style="width: 75%"></div>
</div>

<div class="warning progress">
  <div class="progress-meter" style="width: 90%"></div>
</div>

<!-- Progress Bar with Text -->
<div class="progress" role="progressbar">
  <div class="progress-meter" style="width: 65%">
    <span class="progress-meter-text">65% Complete</span>
  </div>
</div>

<!-- Native Progress Element -->
<progress value="75" max="100">75%</progress>

<!-- Meter Element -->
<meter value="0.6">60%</meter>

Tooltip Examples

Foundation Tooltips:

<!-- Basic Tooltip -->
<button class="button" data-tooltip title="This is a tooltip">
  Hover me
</button>

<!-- Tooltip with Position -->
<button class="button" data-tooltip 
        data-position="top" 
        title="Top tooltip">
  Top
</button>

<button class="button" data-tooltip 
        data-position="bottom" 
        title="Bottom tooltip">
  Bottom
</button>

<button class="button" data-tooltip 
        data-position="left" 
        title="Left tooltip">
  Left
</button>

<button class="button" data-tooltip 
        data-position="right" 
        title="Right tooltip">
  Right
</button>

<!-- Tooltip with Hover Delay -->
<button class="button" data-tooltip 
        data-hover-delay="500" 
        title="Delayed tooltip">
  Hover with delay
</button>

<!-- Tooltip on Disabled Element -->
<div class="disabled" data-tooltip 
     title="This element is disabled">
  Disabled with tooltip
</div>

<!-- Click Trigger Tooltip -->
<button class="button" data-tooltip 
        data-click-open="true" 
        title="Click to open">
  Click me
</button>

Callout Examples

Foundation Callouts:

<!-- Basic Callout -->
<div class="callout">
  <h5>This is a callout</h5>
  <p>Callout content goes here.</p>
</div>

<!-- Colored Callouts -->
<div class="callout primary">
  <h5>Primary Callout</h5>
  <p>Important information.</p>
</div>

<div class="callout success">
  <h5>Success Callout</h5>
  <p>Positive confirmation.</p>
</div>

<div class="callout warning">
  <h5>Warning Callout</h5>
  <p>Cautionary information.</p>
</div>

<div class="callout alert">
  <h5>Alert Callout</h5>
  <p>Critical information.</p>
</div>

<!-- Callout with Close Button -->
<div class="callout" data-closable>
  <h5>Closable Callout</h5>
  <p>You can close this callout.</p>
  <button class="close-button" data-close>&times;</button>
</div>

<!-- Small Callout -->
<div class="callout small">
  <h5>Small Callout</h5>
  <p>Compact callout for less important info.</p>
</div>

<!-- Large Callout -->
<div class="callout large">
  <h5>Large Callout</h5>
  <p>Prominent callout for important info.</p>
</div>

Basic Pagination

Pagination Sizes

Foundation Pagination:

<!-- Basic Pagination -->
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination-previous disabled">
      <span class="show-for-sr">Previous page</span>
    </li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="ellipsis"></li>
    <li><a href="#">12</a></li>
    <li class="pagination-next">
      <a href="#">Next <span class="show-for-sr">page</span></a>
    </li>
  </ul>
</nav>

<!-- Pagination with Arrows -->
<ul class="pagination">
  <li class="pagination-previous">
    <a href="#">Previous</a>
  </li>
  <li class="current">1</li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="pagination-next">
    <a href="#">Next</a>
  </li>
</ul>

<!-- Centered Pagination -->
<ul class="pagination text-center">
  <li class="pagination-previous disabled">Previous</li>
  <li class="current">1</li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="pagination-next"><a href="#">Next</a></li>
</ul>

Breadcrumb Examples

Foundation Breadcrumbs:

<!-- Basic Breadcrumbs -->
<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li class="disabled">Disabled Link</li>
    <li>
      <span class="show-for-sr">Current: </span> Current Page
    </li>
  </ul>
</nav>

<!-- Breadcrumbs with Icons -->
<nav aria-label="You are here:" role="navigation">
  <ul class="breadcrumbs">
    <li>
      <a href="#">
        <i class="fi-home"></i> Home
      </a>
    </li>
    <li><a href="#">Documents</a></li>
    <li>Current Page</li>
  </ul>
</nav>