In JTB_MD, Cards are dynamic content containers designed to enhance the presentation of information. These versatile components allow you to structure and style your content with flexibility, providing an engaging and organized user experience.

With customizable options and responsive designs, JTB_MD's Cards empower you to create visually appealing and well-organized content layouts for a variety of projects.

How to use

To create a card element in your project, start by adding a container with the .jtbCard class. This container forms the core structure of the card. After creating the main container, enhance your card by adding a content area with the .jtbCard-content class. This content area serves as the holder for all your card contents except the image of it.

Hello there!

                <!-- Basic usage -->
<div class='jtbCard'>
    <div class='jtbCard-content'>Hello there!</div>
</div>

By default, cards and content areas come as blank containers that has no meanings by theirselves. To create a fully functional card, after creating your main container with content area, utilize its main components: header, body and footer.

Header

The Header is the top area of cards which states the title and other important stuff for it.

To incorporate a header area into your card, add an element with the .jtbCard-header class within your content area.

Header

                    <!-- Card with header only -->
<span class='jtbCard'>
    <div class='jtbCard-content'>
        <div class='jtbCard-header'>Header</div>
    </div>
</span>

Body

The Body is the main content area of cards that holds the information you want to display to your users.

To incorporate a body into your card, add an element with the .jtbCard-body class within your content area.

Header

Card content
Card content
Card content

                    <!-- Card with header & body -->
<span class='jtbCard'>
    <div class='jtbCard-content'>
        <div class='jtbCard-header'>...</div>
        <div class='jtbCard-body'>
            Card content<br>
			Card content<br>
			Card content<br>
        </div>
    </div>
</span>

Footer

The Footer is the content area of cards that holds additional information you want to display to your users such as action buttons.

To incorporate a footer into your card, add an element with the .jtbCard-footer class within your content area.

Header

Card content
Card content
Card content

                    <!-- Card with header & body & footer -->
<span class='jtbCard'>
    <div class='jtbCard-content'>
        <div class='jtbCard-header'>...</div>
        <div class='jtbCard-body'>...</div>
        <div class='jtbCard-footer'>Footer</div>
    </div>
</span>

Image Usage

To create a card with an image in JTB_MD you can simply add three attributes to your .jtbCard element:

imgSrc the attribute that contains the source of your image.
imgRatio the attribute that contains the ratio of your image in width:height format,
imgPos the attribute that contains the position of your image. Possible values are: start, end.

Here is a good birb for you!
Wanna sum screm?

                    <!-- Card with image on start -->
<div class='jtbCard' imgSrc='...' imgRatio='12:9' imgPos='start'>
    <div class='jtbCard-content'>
        <div class='jtbCard-body'>...</div>
        <div class='jtbCard-footer'>...</div>
    </div>
</div>

<!-- Card with image on end -->
<div class='jtbCard' imgSrc='...' imgRatio='12:9' imgPos='end'>
    <div class='jtbCard-content'>
        <div class='jtbCard-body'>...</div>
        <div class='jtbCard-footer'>...</div>
    </div>
</div>>

You can also create horizontally oriented cards with image via adding .jtbCard-x class into your .jtbCard element.

This birb is looking for you!
He just wanna screm.

This birb does not care anything!
No screm this time.

                    <!-- Horizontal card with image on start -->
<div class='jtbCard jtbCard-x' imgSrc='...' imgRatio='12:9' imgPos='start'>
    <div class='jtbCard-content'>
        <div class='jtbCard-body'>...</div>
        <div class='jtbCard-footer'>...</div>
    </div>
</div>

<!-- Horizontal card with image on end -->
<div class='jtbCard jtbCard-x' imgSrc='...' imgRatio='12:9' imgPos='end'>
    <div class='jtbCard-content'>
        <div class='jtbCard-body'>...</div>
        <div class='jtbCard-footer'>...</div>
    </div>
</div>>

Styling

As you've learned how to create cards to display data, let's now explore how to enhance the visual appeal of your elements using pre-defined JTB_MD card classes.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within cards have been crafted to simplify your design workflow.

Removing Borders

If you want to remove all borders of your card, you can add .jtbCard-borderless class into your .jtbCard element.

Here are more birbs for you :)

                    <!-- Borderless card -->
<div class='jtbCard jtbCard-borderless'>
    ...
</div>

Rectangular

To create a rectangular card (with no border radius), apply the .jtbCard-rect class to your card element.

Here is a suspicious birb.

                    <!-- Rectangular card -->
<div class='jtbCard jtbCard-rect'>
    ...
</div>