Footer

Footers should be placed at the bottom of every page on the website or application. The links may be customized as required.

To configure the feedback button, contact measurements@calgary.ca to ask for the feedback code, scripts, and instructions.

Basic footer

Code


<footer class="cui coc-footer">
	<div class="footer-inner">
		<div class="footer-links-horz footer-section">
			<ul>
				<li><a href="{{ URL }}">{{ Link text }}</a></li>
				<li><a href="{{ URL }}">{{ Link text }}</a></li>
				<li><a href="{{ URL }}">{{ Link text }}</a></li>
				<li><a href="{{ URL }}">{{ Link text }}</a></li>
				<li><a href="{{ URL }}">{{ Link text }}</a></li>
			</ul>
		</div>

		<div class="footer-copyright">
			<p>&copy; <script>document.write(new Date().getFullYear())</script>. All rights reserved.</p>
		</div>
	</div>
</footer>

Footer with links

Code


<footer class="cui coc-footer">
	<div class="footer-inner">
		<div class="footer-links-vert footer-section row">
			<div class="col-12">
				<div class="row">
					<!--Use the column class to layout the lists-->
					<!--Recommended up to 5 column on the row-->
					<div class="{{ col-6 | col-md-3 | col-md-4 | col-md-5 }}">
						<h2 class="h3">{{ Heading }}</h2>
						<!--Add the class 'col-count-2' on the ul tag to make the links display as 2 columns-->
						<ul class="{{ col-count-2 }}">
							<li><a href="{{ URL }}">{{ Link text }}</a></li>
							<li><a href="{{ URL }}">{{ Link text }}</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-links-horz footer-section">
			<ul>
				<li><a href="{{ URL }}">{{ Link text }}</a></li>
				<li><a href="{{ URL }}">{{ Link text }}</a></li>
			</ul>
		</div>
		<div class="footer-copyright">
			<p>&copy; <script>document.write(new Date().getFullYear())</script>. All rights reserved.</p>
		</div>
	</div>
</footer>