• Navbars
• Notices
• Markers

• Progress Bars
• Breadcrumbs
• Pagination

• Thumbnails
• Cards
• Image Styles

There are three types of navbars: the default navbar, a secondary navbar, and a floating navbar. The default navbar and secondary navbar are both full-width and attached to the top of the page, with the secondary navbar meant to be placed below the default navbar. The floating navbar is not attached to the top of the page, can have content above it, and is only the width of the grid.

Navbars are placed inside of their own special container element, outside of the container for the rest of the page. To designate a container for use with navbars, apply the class navbarContainer to the container element for both the default navbar. For secondary navbars, add the class secondaryNavbarContainer instead. Floating navbars use the class floatingNavbarContainer. For all types of navbar containers, you must use the navbar container element, the regular container, and then rows and columns.

When using both the default and secondary navbars, each should have a separate container. Columns and rows will work within navbars, but in general, no navbar container should have more than one row.

Fixed & Pinned Navbars

The default behavior for all navbars is to have a static position, meaning that when the page is scrolled, the navbar will eventually disappear. However, any navbar can be made persistent so that it will not disappear when scrolled. For the default and secondary navbars, just add the class fixed to the navbar container.

Floating navbars act a little differently, so instead of add the class fixed, add the class pin to the container instead. Making floating navbars persistent requires using the Pinned Elements plugin, so make sure that the plugin is included on the page. When scrolled, a floating navbar will automatically expand to the full-width of the page. A pinned floating navbar is used on the ecommerce example page.

Mobile Considerations

Including both a default and secondary navbar on a mobile screen will be overkill in most cases, so it's recommended to hide the secondary navigation for mobile-sized screens using the hideMobile utility class. If the secondary menu items are still necessary, considering hiding the secondary menu bar, but adding the items as a submenu beneath the active menu item in the default menu by applying the class showMobile to the submenu. A demonstration of this can be found in the article example page.

On mobile-sized screens, the floating navbar will appear full-width and will essentially act the same as the default navbar.

Navbar Demos

Variations of the navbar in action can be found in the examples section.

Default Navbar

<div class="navbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12"></div>
		</div>
	</div>	
</div>

Secondary Navbar

<div class="navbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12"></div>
		</div>
	</div>	
</div>
<div class="secondaryNavbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12"></div>
		</div>
	</div>	
</div>

Floating Navbar

<div class="floatingNavbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12"></div>
		</div>
	</div>	
</div>

Mobile Secondary Navbar

<div class="navbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12">
				<ul class="mobileMenu">
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a class="active" href="#">3</a>
						<ul class="showMobile">
							<li><a href="#">3.1</a></li>
							<li><a href="#">3.2</a></li>
							<li><a class="active" href="#">3.3</a></li>
						</ul>						
					</li>
				</ul>					
			</div>
		</div>
	</div>	
</div>
<div class="secondaryNavbarContainer hideMobile">
	<div class="container">
		<div class="row">
			<div class="col12"></div>
		</div>
	</div>	
</div>

Note The correct semantic container for a notice is a div element. Multi-line notice bars should use an additional p tag for the text for proper spacing.

Notices are for when your application or website has new information to share with the user. You can use the notices either as a single-line notification bar or as a larger block notification. There are five kinds of notices:

1. Generic - A generic notice container.
2. Info - For when new information is available that is helpful, but isn't necessarily urgent.
3. Success - For when the user successfully completes an action.
4. Warning - For when the user needs to be informed about an action that could have adverse or unexpected consequences.
5. Error - For when the user has encountered or commited an error.

Progress bars can be created by adding the class progressBar to a <span> or <div>element. Then, in a child element, add the bar's width via the style attribute, as shown below.

<span class="progressBar">
	<span style="width: 33%;"></span>
</span>

Return to top

<ul class="breadcrumb">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li>Current Item</li>
</ul>

Return to top

Breadcrumb Example

• Link 1
• Link 2
• Link 3
• Current Item

Cards are formatted and styled information blocks that can be used for bios, status updates, comments, any kind of feed, a summary, or almost anything else. They can exist with any of the following elements: an image, a title, content, and a list of links.

It's possible to use an individual card or a list of cards. Lists of cards can be nested to form comment threads or similar interfaces.

To create an individual card, create a container with a class of card. Each card can contain either one or two containers, which can be given the classes cardPic and cardContent. If you want to include a list of links at the bottom of the card, just add a class of cardLinks to the ul element.

A list of cards functions much the same way as individual cards, but each li acts as the card container, so you only need to add a cardList class to the ul element. If you have a child list, it should not be placed in either the cardPic or the cardContent containers. Instead, it should be placed after them, but within the li element.

Individual Card

Luna

Why will you never let me outside? You know how much I love it out there and I hardly ever run away.

• Profile
• Website
• Twitter

Show Code

<div class="card">
	<div class="cardPic">
		<img src="images/examples/user3.jpg" alt=""/>
	</div>		
	<div class="cardContent">
		<h1>Luna</h1>
		<p>Why will you never let me outside? You know how much I love it out there and I 
			hardly ever run away.</p>
		<ul class="cardLinks">
			<li><a href="#">Profile</a></li>
			<li><a href="#">Website</a></li>
			<li><a href="#">Twitter</a></li>
		</ul>
	</div>						
</div>

Nested Card List

• 

  Luna

  Sometimes I will get hyper and do a 360° spin kick off the wall. I'm a crazy ninja cat and I will find you. I can open doors.

  • Profile
  • Website
  • Twitter
• 

  Kole

  When we get up in the morning, Luna and I like to do our best impression of a herd of elephants. We're stealthy like that.

  • Profile
  • Website
  • Twitter
  • 

    Luna

    Who are you calling an elephant?

    • Profile
    • Website
    • Twitter
    • 

      Kole

      Well, you do keep stealing my food. Just sayin'...

      • Profile
      • Website
      • Twitter

Show Code

<ul class="cardList">
	<li>
		<div class="cardPic">
			<img src="images/examples/user3.jpg" alt=""/>
		</div>		
		<div class="cardContent">
			<h1>Luna</h1>
			<p>Sometimes I will get hyper and do a 360° spin kick off the wall. I'm a crazy 
				ninja cat and I <em>will</em> find you. I can open doors.</p>
			<ul class="cardLinks">
				<li><a href="#">Profile</a></li>
				<li><a href="#">Website</a></li>
				<li><a href="#">Twitter</a></li>
			</ul>
		</div>							
	</li>
	<li>
		<div class="cardPic">
			<img src="images/examples/user5.jpg" alt=""/>
		</div>		
		<div class="cardContent">
			<h1>Kole</h1>
			<p>When we get up in the morning, Luna and I like to do our best impression of a 
				herd of elephants. We're stealthy like that.</p>
			<ul class="cardLinks">
				<li><a href="#">Profile</a></li>
				<li><a href="#">Website</a></li>
				<li><a href="#">Twitter</a></li>
			</ul>
		</div>
		<ul>
			<li>
				<div class="cardPic">
					<img src="images/examples/user3.jpg" alt=""/>
				</div>		
				<div class="cardContent">
					<h1>Luna</h1>
					<p>Who are you calling an elephant?</p>
					<ul class="cardLinks">
						<li><a href="#">Profile</a></li>
						<li><a href="#">Website</a></li>
						<li><a href="#">Twitter</a></li>
					</ul>
				</div>
				<ul>
					<li>
						<div class="cardPic">
							<img src="images/examples/user5.jpg" alt=""/>
						</div>		
						<div class="cardContent">
							<h1>Kole</h1>
							<p>Well, you <em>do</em> keep stealing my food. Just sayin'...</p>
							<ul class="cardLinks">
								<li><a href="#">Profile</a></li>
								<li><a href="#">Website</a></li>
								<li><a href="#">Twitter</a></li>
							</ul>
						</div>									
					</li>
				</ul>																			
			</li>
		</ul>							
	</li>							
</ul>

Unless specifically overridden, all images by default will proportionally expand or contract to 100% of the width of their container. In addition to that default functionality, you can add styling to your images by adding one or more of the following classes:

Demo

You can hover over each image to see what classes have been applied.