• Emergency

    Public Safety


    When an emergency happens, know that St. Tammany Parish is equipped to respond immediately. We have the manpower and the resources to utilize in times of crisis. Count on us.


    Read More>>
  • Careers

    Join our Krewe


    St. Tammany Parish Government is comprised of employees committed to making this community the best it can be. Find out about current openings and how to join our team.


    Read More >>
  • Permits

    Safety First


    When you decide to build, remodel, or tackle an extensive household project, obtain a permit first. Our permits process is streamlined and convenient. We call it a “one stop shop.”


    Read More>>
  • Recreation

    It's a lifestyle


    Blueways, byways, trail ways and the arts — St. Tammany is teeming with recreational escapes for every taste. From sailing Lake Pontchartrain, to biking the trace, to a live play production, it happens here. 


    Read More>>
Vinaora Nivo SliderVinaora Nivo SliderVinaora Nivo SliderVinaora Nivo SliderVinaora Nivo SliderVinaora Nivo SliderVinaora Nivo SliderVinaora Nivo Slider

Be the Brain Behind Change!

Outstanding ideas fuel the engines that power progress. We want your ideas on change for the better for St. Tammany Parish.Do you have a suggestion, an idea, something you want to see in our parish that is not here already? Find your place in the momentum because we want to hear from you. Be the Brain Behind The Change. Submit Your Idea Here

 
 

Elements

Prototyping and production requires more than just navigation or tabs or typography. We've created a number of additional elements to help rapidly prototype, and like everything else they are production-ready and easy to restyle or override.

Alerts

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like everything else in Foundation, easy to customize.

  • This is a standard alert (div.alert-box). ×
    This is a success alert (div.alert-box.success). ×
    This is an alert (div.alert-box.alert). ×
    This is a secondary alert (div.alert-box.secondary). ×
  • 
    <div class="alert-box">
      This is a standard alert (div.alert-box).
      <a href="" class="close">&times;</a>
    </div>
    
    <div class="alert-box success">
      This is a success alert (div.alert-box.success).
      <a href="" class="close">&times;</a>
    </div>
    
    <div class="alert-box alert">
      This is an alert (div.alert-box.alert).
      <a href="" class="close">&times;</a>
    </div>
    
    <div class="alert-box secondary">
      This is a secondary alert (div.alert-box.secondary).
      <a href="" class="close">&times;</a>
    </div>
    

Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a span element with a class of .label. The border styling mirrors that of the Foundation buttons.

  • Types
    Normal Label
    Secondary Label
    Success Label
    Alert Label
    Styles
    Regular Label
    Radius Label
    Round Label

    Example Label This label could read a date for an update or it could include an author name or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content.

  • 
    <!-- Types -->
    <span class="label">Normal Label</span>
    <span class="secondary label">Secondary Label</span>
    <span class="success label">Success Label</span>
    <span class="alert label">Alert Label</span>
    
    <!-- Styles -->
    <span class="label">Regular Label</span>
    <span class="radius label">Radius Label</span>
    <span class="round label">Round Label</span>
    

Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platform and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the has-tip class to any element.

By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

  • Example in text below

    The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element. On a small device, the tooltips are full width and bottom aligned.

  • 
    <span class="has-tip" data-width="210" title="Bottom and the default position.">"tip-bottom"</span>
    <span class="has-tip tip-top noradius" data-width="210" title="Top and not rounded!">"tip-top"</span>
    <span class="has-tip tip-left" data-width="90" title="left!">"tip-left"</span>
    <span class="has-tip tip-right" data-width="90" title="right!">"tip-right"</span>
    

Accordion

Accordions are similar to tabs as a way to selectively show a single panel of content at a time.

    • Accordion Panel 1

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • Accordion Panel 2

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • Accordion Panel 3

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • 
    <ul class="accordion">
      <li class="active">
        <div class="title">
          <h5>Accordion Panel 1</h5>
        </div>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </li>
      <li>
        <div class="title">
          <h5>Accordion Panel 2</h5>
        </div>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </li>
      <li>
        <div class="title">
          <h5>Accordion Panel 3</h5>
        </div>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </li>
    </ul>
    

Panels

A panel is a simple, helpful css class that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. There are two styles built in, and they support a class of .radius to round them off.

  • This is a regular panel.

    It has an easy to override visual style, and is appropriately subdued.

    This is a callout panel.

    It's a little ostentatious, but useful for important content.

  • 
    <div class="row">
      <div class="six columns">
        <div class="panel">
          <h5>This is a regular panel.</h5>
          <p>It has an easy to override visual style, and is appropriately subdued.</p>
        </div>
      </div>
      <div class="six columns">
        <div class="panel callout radius">
          <h5>This is a callout panel.</h5>
          <p>Content...</p>
        </div>
      </div>
    </div>
    

Inline Lists

When you just need a horizontal list of links, like in a footer, and you want more control than just spaces between them you can use this simple construct.

  • 
    <ul class="inline-list">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
    

Tables

Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).

  • Table Header Table Header Table Header Table Header
    Content This is longer content Content Content
    Content This is longer content Content Content
    Content This is longer content Content Content
    Content This is longer content Content Content
  • 
    <table class="twelve">
      <thead>
        <tr>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
          <th>Table Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
        <tr>
          <td>Content</td>
          <td>This is longer content</td>
          <td>Content</td>
          <td>Content</td>
        </tr>
      </tbody>
    </table>
    

Progress Bars

Add simple progress bars to your page using our simple pattern. We've included built in ways to control the radius, height, padding and border in the Scss settings file. You can use .round or .radius to add some rounded borders. If you want to change the color, use the same classes as we use for the buttons: .primary, .secondary, .alert, .success. If you want to control the width of your progress bar, simply use the grid classes .one, .two, .three, etc. You can control the width of the fill meter by setting the width of the span element.

  • 
    <div class="progress six"><span class="meter"></span></div>
    <div class="radius progress success eight"><span class="meter"></span></div>
    <div class="nice round progress alert ten"><span class="meter"></span></div>
    <div class="nice secondary progress"><span class="meter"></span></div>
    


Image Thumbnails

If you are going to use an image as an anchor, we've got you covered. All you've gotta do is wrap an a.th around your image and viola!

  • 
    <a href="#" class="th"><img src="http://placehold.it/350x200"></a>
    

Pricing Tables

If you're making a rockin' marketing site for a subscription-based product you are likely in need of a pricing table. You can create one with Foundation by creating a class="pricing-table", using the grid to position and size. Inside you can include: class="title", class="price", class="desc", class="bullet-item", class="cta-button" to create the table, here's an example:

    • Standard
    • $99.99
    • Content...
    • 1 Database
    • 5GB Storage
    • 20 Users
    • Buy it Now »
    • Standard
    • $99.99
    • Content...
    • 1 Database
    • 5GB Storage
    • 20 Users
    • Buy it Now »
  • 
    <ul class="pricing-table">
      <li class="title">Standard</li>
      <li class="price">$99.99</li>
      <li class="description">Content...</li>
      <li class="bullet-item">1 Database</li>
      <li class="bullet-item">5GB Storage</li>
      <li class="bullet-item">20 Users</li>
      <li class="cta-button"><a class="button" href="#">Buy it Now &raquo;</a></li>
    </ul>
    

Video

If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

  • 4:3
    Widescreen
    Vimeo
    • 4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.
    • By adding a class of .widescreen we change the ratio to 16:9, ideal for more recent video and most popular YouTube or Vimeo embeds.
    • Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only - no extra padding for the controls.
  • 
    <div class="flex-video">
      <iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="flex-video widescreen">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
    </div>
    
    <div class="flex-video widescreen vimeo">
      <iframe src="http://player.vimeo.com/video/21762736?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
    

Javascripts Shmavascripts

We've been working really hard on updating our Javascript library to be more robust and powerful so that you can build better things.
Learn about our Javascripts »
  • Notice to Bidders - Lowe Davis Road Improvement
    NOTICE TO BIDDERS Sealed bids will be received by the Department of Procurement, until 2:00 p.m., Wednesday, May 21, 2014 and then opened and read publicly at that time by the Procurement Staff for the following project:   Bid # 300-00-14-20-2 – Lowe Davis Road Improvements Each Bid must be…
    in Public Notices
  • Notice to Bidders - Carr Drive Road Improvements
    Sealed bids will be received by the Department of Procurement, until 2:00 p.m., Wednesday, May 21, 2014 and then opened and read publicly at that time by the Procurement Staff for the following project:   Bid # 300-00-14-19-2 – Carr Drive Road Improvements Each Bid must be submitted in a…
    in Public Notices
  • Notice to Bidders - French Branch Subdivision Drainage Improvements
    NOTICE TO BIDDERS Sealed bids will be received by the Department of Procurement, until 2:00 p.m., May 20, 2014 and then opened and read publicly at that time by the Procurement Staff for the following project:   Bid # 316-00-14-17-2- French Branch Subdivision Drainage Improvements Each Bid must be submitted…
    in Public Notices
  • Notice to Bidders - Hidden Pines Drainage & Road Improvements
    NOTICE TO BIDDERS Sealed bids will be received by the Department of Procurement, until 2:00 p.m., Tuesday, May 20, 2014 and then opened and read publicly at that time by the Procurement Staff for the following project:   Bid # 316-00-14-18-2-Hidden Pines Drainage & Road Improvements Each Bid must be…
    in Public Notices
  • Public Meeting Notice - Agenda Review, Council Finance, Regular Council
    in Public Notices
  • Planning Meeting - May 13, 2014
    The St. Tammany Parish Planning Commission will hold its regular monthly meeting on Tuesday, May 13, 2014 in the St. Tammany Parish Koop Drive - LA Highway 59 Administrative Complex, Parish Council Chambers, 21490 Koop Drive, Mandeville, LA at 6:00 PM to hear comments for and against the following subdivisions…
    in Public Notices
  • Board of Adjustment Meeting - May 6, 2014
    The St. Tammany Parish Board of Adjustment shall hear testimony for and/or against the following variance/appeal cases brought before it for the Tuesday, May 6, 2014 Board of Adjustment meeting at 3:00PM, located at the St. Tammany Parish Government Complex, 21490 Koop Drive, Parish Council Chambers, Mandeville, Louisiana: BOA CASE…
    in Public Notices
  • Zoning Meeting - May 6, 2014
    The St. Tammany Parish Zoning Commission will hold their regular monthly meeting on Tuesday, May 6, 2014 in the St. Tammany Parish Administrative Complex, 21490 Koop Drive, Mandeville, LA at 6:00 PM.  A public hearing will be conducted at this meeting to hear comments for or against amendments to the…
    in Public Notices
  • Board of Adjustment Meeting - April 1, 2014
    The St. Tammany Parish Board of Adjustment shall hear testimony for and/or against the following variance/appeal cases brought before it for the Tuesday, April 1, 2014 Board of Adjustment meeting at 3:00PM, located at the St. Tammany Parish Government Complex, 21490 Koop Drive, Parish Council Chambers, Mandeville, Louisiana: BOA CASE…
    in Public Notices
  • 4th Ward Constable Election Set for November
    At the December meeting of the St. Tammany Parish Council, the Council appointed Katherine Hand as interim Constable for the 4th Ward of St. Tammany Parish. Additionally, they passed a resolution calling for a special election on April 5th, pursuant to the provisions of Louisiana R.S. 13:2583. Since that time…
    in Public Notices
  • Notice to Bidders - Reno Hills Subdivison, Sewer Collection System Improvements
    (02-03-2014) NOTICE TO BIDDERS Bid No.            420-26-14-01-02                 Parish of           ST. TAMMANY            (herein referred to as the "Owner") Sealed bids will be received by the Owner for the construction of the SEWER COLLECTION SYSTEM IMPROVEMENTS FOR RENO HILLS SUBDIVISION    project described as follows: The work…
    in Public Notices
  • Availability of Low Income Energy Assistance Program (LIHEAP)
    The LOW INCOME ENERGY ASSISTANCE PROGRAM (LIHEAP) funds are dedicated to assist eligible low income households with their energy payments through the Department of Health and Human Services, Community Action Agency.  All applications are taken on a first come, first served basis.  Appointments will be scheduled beginning January 27, 2014. …
    in Public Notices