Ascension 1.0 - Template Documentation

Cards

Cards are very basic components that are usually applied to a block element, like a div. They have round corners by default and a white background, no borders. They are best used for pricing tables and testimonials.

Please note that the elements presented in this page are using the default color scheme and font pair.

Usage

To create a card, simply add the class of card to a block element (preferably a div).

Code Preview 
						                            
						                                <div class="card">
						                                    <p>This is the card content.</p>
						                                </div> <!-- end .card -->

This is the card content.

By default, the card has a solid background with no borders. You can add borders and more by using the helper classes shown below.

Helper classes

Here's a list of the available helper classes that can be applied to cards.

Class Description Code Preview
with-border Adds a 1px solid border to the card. 
						                            
						                                <div class="card with-border">
						                                    <p>This is the card content.</p>
						                                </div> <!-- end .card -->

This is the card content.
highlight This should be used when you have more than 1 card and you want the highlighted card to sit on top of the others (in a pricing table for example). The card is also pushed up by using a negative margin. 
						                            
						                                <div class="card highlight">
						                                    <p>This is the card content.</p>
						                                </div> <!-- end .card -->

This is the card content.