LinGeo Template

Return to:
G & L WebDesign

Cards

Cards are super flexible content containers which can have a header/title, image, content, footers, lists, links and more.

Card Content

Cards support a huge array of content and define their own helper classes for content.

.card-body

This class allows you to add padding to either the whole card or blocks of content within a card. This is really useful if some content needs to stretch to the edges (like images) and some not (like text).

.card-header + .card-footer

These classes apply padding, a background color and border radias properties to the card header or footer, useful for capping the top & bottom of a card. .card-header can also be applied directly to an h badge element to apply a similar effect.

.card-title

This simply applies a bottom margin to an item which should be considered the title of the card.

.card-text

This applies no effect on default cards and is only used when using the .card-inverse class (below).

.card-header-tabs + .card-header-pills

These classes should be applied to navigation elements shown in the card header.

Tabs

With supporting text below as a natural lead-in to additional content.

Link To

Pills

With supporting text below as a natural lead-in to additional content.

Link To

List groups .list-group-flush

This class allows you to include list groups within cards and have them stretch to the edge of the card.

List group in card

  • List group item
  • List group item
  • List group item

Other card content.

Link To

Card Images

Images can be added to cards either at the top, middle, bottom or even as a background image.
card-img-top, card-img-bottom, card-img, card-img-overlay

Card image cap

Card image top

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To

Card image bottom

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To
Card image cap

Card image middle

Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Link To
Card image cap

Card image background

Some example text to build on the card title and make up the bulk of the card's content.

Link To

Card Ribbons

You can apply a ribbon to the corners on cards which can be useful to highlight a specific card.

HTML: .card-ribbon-VERTICAL-ALIGN can be top or bottom, card-ribbon-HORIZONTAL-ALIGN can be left or right.

NOTE: Ribbons do not work with "Cards Columns" below.

Popular

Ribbon

With supporting text below as a natural lead-in to additional content.

Best Value

Ribbon

With supporting text below as a natural lead-in to additional content.

Popular

Ribbon

With supporting text below as a natural lead-in to additional content.

Best Value

Ribbon

With supporting text below as a natural lead-in to additional content.

Card Styles

Background Colors

Apply solid background colors to cards, using the contextual colors or the Theme Colors.
card bg-primary for example.

Header

.card-default-drk

Gemino huic mos quis. Facilisis gravis lobortis luptatum occuro vero.

Someone famous in Source Title

Outline Colors

Apply an outline color, using the contextual colors or the Theme Colors.
card border-danger for example.

Header

.card-outline-secondary

Ille persto quidem usitas uxor. Cui interdico lucidus luctus mauris natu neo probo quis.

Card Grids

Cards can be laid out using the grid system built into Bootstrap.

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card

With supporting text below as a natural lead-in to additional content.

Link To

Card Groups

Groups will force all cards to be displayed on the same row as well as be the same width and height.

Simply wrap your card elements within a .card-group wrapper like this: <div class="card-group">...cards.....</div>

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card Decks

Card decks work much like groups expect the cards are not attached to each other.

Card decks require 2 wrapper elements like this: <div class="card-deck-wrapper"><div class="card-deck">...cards.....</div></div>

Card image cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Cards Columns

Cards can be set to display in Masonry-like columns just by adding a wrapper with the class .card-columns.

Card image cap

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Hover Overlay - Opacity
Image opacity changes and hidden content is revealed on hover.

The Rocks

View
The Rocks
View Code Overlays

	<div class="card product-card overlay-hover">
     	<div class="overlay-hover-content overlay-op-5">
          	<h2 class="text-white">The Rocks</h2>
              		<a href="#" class="btn btn-default-lgt text-uppercase font-weight-bold mb-2"><i class="fas fa-eye mr-2"></i> View</a>
     	</div>
<!-- Image -->
     	<div class="pos-relative">
          	<img class="card-img-top img-fluid" src="assets/imgs/site-imgs/img-23.jpg" alt="The Rocks">
     	</div>
	</div>

	
Style Switcher
12 Color Skins
Theme
See the instructions to easily create your own Skin and NavBar.