Skip to main content
King County logo

Page footers can be used to display important information specific to your department or agency such as an address or operating hours.

Footer maps no longer supported

Footers with maps are no longer supported. Please remove deprecated code from your pages and replace with one of the options below.

Sitecore Settings

Use Sitecore addons to apply footer to all children pages.

Add addon to parent page

Under settings, check 'Apply to children' to push addon to all children pages.

Also make sure 'BackgroundColor' is set to 'Transparent' for proper visual formatting.

Contact Us

Follow @KCAuditor

Phone 206-477-1033

TTY Relay: 711

Fax: 206-296-0159


The above example is a footer that uses an image as a background. Remember to test if image works in mobile devices. The footer is split into an 8-4 column grid. See HTML tab for additional notes.


<!-- .row . full-width-row are required for formating of row -->
<div class="row full-width-row">

  <!-- use col-sm-XX to set the column sizes of the image/overlay text and additional content -->
  <div class="col-sm-8">
    <div class="dept-footer-image">
      <div class="image-container">

        <!-- Set image source here. Resize browser to test if image will work in mobile devices. -->
        <div class="image-canvas"><img src="https://placeimg.com/580/250/tech/grayscale"></div>

        <!-- Text for map overlay begins here -->
        <div class="image-overlay">
          <h3>King County Auditor's Office</h3>
          <address>
            <p>County Auditor: Kymber Waltmunson<br>King County Courthouse<br>516 Third Avenue, Room W-1033<br>Seattle, WA 98104</p>
          </address><a href="#" class="btn btn-primary">
            <div class="fa fa-building-o"></div></a>&nbsp;

            <!-- This button is required. href link will be automatically set by JavaScript -->
            <a href="" id="map-link" class="btn btn-primary">Get directions</a>
        </div>
      </div>
    </div>
  </div>

  <!-- This can be a column for additional contact information -->
  <div class="col-sm-4">
    <h5>Contact Us</h5>

    <!-- Use .media class to get proper formating of icon and text -->
    <div class="media">
      <div class="media-left">
        <div class="fa fa-twitter fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p>Follow  <a href="#">@KCAuditor</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-envelope fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p><a href="#">Contact us</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-phone fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p>Phone  <a href="#">206-477-1033</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-tty fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p>TTY Relay: 711</p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-fax fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p>Fax: 206-296-0159</p>
      </div>
    </div>
  </div>
</div>

No JavaScript needed for this example.

Larry Gossett

Council District 2

Serving the communities of the Central Area, Capitol Hill, Beacon Hill, the Rainier Valley, Seward Park, Skyway, UW, Fremont, Ravenna, and Laurelhurst.

Subscribe to my newsletter

King County Courthouse

516 Third Avenue, Room 1200
Seattle, WA 98104

Phone 206-477-1033

TTY Relay: 711

Fax: 206-296-0159


The above example is a footer that uses a three column layout. It is a good use for departments that want to highlight a service or department head. See HTML tab for additional notes.


<!-- .row . full-width-row are required for formating of row -->
<div class="row full-width-row">

  <!-- use col-sm-XX to set the column sizes -->
  <!-- column 1 -->
  <div class="col-sm-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Larry Gossett</h3>
      </div>
      <!-- Place image here. Remember to test image in mobile devices -->
      <img src="~/media/help/page-content/images/council-gossett.ashx">
    </div>
  </div>

  <!-- column 2 -->
  <div class="col-sm-4">
    <h5>Council District 2</h5>
    <p>Serving the communities of the Central Area, Capitol Hill, Beacon Hill, the Rainier Valley, Seward Park, Skyway, UW, Fremont, Ravenna, and Laurelhurst.</p>
    <p>Subscribe to my newsletter</p>
    <p>
      <div class="input-group">
        <input type="text" placeholder="Your email address" class="form-control"><span class="input-group-btn">
          <button type="button" class="btn btn-primary">Go</button></span>
      </div>
    </p>
  </div>

  <!-- column 3 -->
  <div class="col-sm-4">
    <h5>King County Courthouse</h5>
    <p></p>516 Third Avenue, Room 1200<br>Seattle, WA 98104<br>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-envelope fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p><a href="#">Contact me</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-phone fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p>Phone  <a href="#">206-477-1033</a></p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-tty fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p>TTY Relay: 711</p>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <div class="fa fa-fax fa-color-default fa-2x"></div>
      </div>
      <div class="media-body">
        <p>Fax: 206-296-0159</p>
      </div>
    </div>
  </div>
</div>

No JavaScript needed for this example.

401 5th Ave., Suite 800, Seattle, WA 98104 Mobile app | Translated pages | About us | FAQs | Contact us

The above example is a minimal footer. It is a good use for departments that want to highlight links to services or simple text to list locations. See HTML tab for additional notes.


<!-- .row . full-width-row are required for formating of row -->
<div class="row full-width-row">
  <div class="call-out-text call-out-text-primary text-center"> 

    <!-- Your links beging here. Remember to use a pipe (|) to seperate text/links. -->
    401 5th Ave., Suite 800, Seattle, WA 98104  
    <a href="#">Mobile app</a> |  
    <a href="#">Translated pages</a>  | 
    <a href="#">About us</a> |  
    <a href="#">FAQs </a> | 
    <a href="#">Contact us</a>
  </div>
</div>

No JavaScript needed for this example.