CARDS

Content containers with multiple options and designs!

Basics

The first step of using jtbCards is creating the content area of it. Seperate from the type of the card, this area is the core of everything!

To create the card content you need to start with .jtbCard class. Then you need to add .jtbCardContent into it.

This is the container area!
			Copy
			<div class='jtbCard'>
	<div class='jtbCardContent'>
		This is the container area!
	</div>
</div>
		

Once you create the card itself, you can add its contents.

One of them is .jtbCardHeader

This is the header area
			Copy
			<div class='jtbCard'>
	<div class='jtbCardContent'>
		<div class='jtbCardHeader'>This is the header area</div>
	</div>
</div>
		

Another element of the content area is .jtbCardBody.

This is the header area
This is the body area of the container, you can blah blah blah...
			Copy
			<div class='jtbCard'>
	<div class='jtbCardContent'>
		<div class='jtbCardHeader'>This is the header area</div>
		<div class='jtbCardBody'>This is the body area of the container, you can blah blah blah...</div>
	</div>
</div>
		

Another element of the content area is .jtbCardFooter.

This is the header area
This is the body area of the container, you can blah blah blah...
This is the footer area
			Copy
			<div class='jtbCard'>
	<div class='jtbCardContent'>
		<div class='jtbCardHeader'>This is the header area</div>
		<div class='jtbCardBody'>This is the body area of the container, you can blah blah blah...</div>
		<div class='jtbCardFooter'>This is the footer area</div>
	</div>
</div>
		

Card with vertical image

It is possible to create the .jtbCard with featured image. It can be product, landscape or anything you want. To add your image into your card; you need to add .jtbCardImg to your .jtbCard.

Important! To make your jtbCard's work properly, don't disallow the jtbCard plugin, then use proper attributes in your .jtbCardImg.

  • src enter the image source to this attribute,
  • imgRatio enter the desired width:heigt ratio of the image to this attribute.

This is the header area
This is the body area of the container, you can blah blah blah...
This is the footer area
			Copy
			<div class='jtbCard'>
	<div class='jtbCardImg' src='...' imgRatio='16:7'></div>
	<div class='jtbCardContent'>
		<div class='jtbCardHeader'>This is the header area</div>
		<div class='jtbCardBody'>This is the body area of the container, you can blah blah blah...</div>
		<div class='jtbCardFooter'>This is the footer area</div>
	</div>
</div>
		

It is also possible to create an horizontal version of the card with adding .jtbCardHorizontal into your .jtbCard.

This is the header area
This is the body area of the container, you can blah blah blah...
This is the footer area
			Copy
			<div class='jtbCard jtbCardHorizontal'>
	<div class='jtbCardImg' src='...' imgRatio='1:1'></div>
	<div class='jtbCardContent'>
		<div class='jtbCardHeader'>This is the header area</div>
		<div class='jtbCardBody'>This is the body area of the container, you can blah blah blah...</div>
		<div class='jtbCardFooter'>This is the footer area</div>
	</div>
</div>
		

Javascript behaviour

Initializing

Javascript behaivours of jtbCards has been written in card.js plugin of jtb_md.js. To avoid any problematic behaviour on cards; do not remove this plugin manually.

Need to know

The functions related jtbCards are strictly connected to the src and imgRatio attributes of the .jtbCardImg. To make the design more robust; we strongly recommend to use these attributes if you are using the jtbCard with iamge.