Cards
#Cards
Cards are an extension of the Bootstrap4 concept of cards. Docs here. The majority of Bootstraps's features of Cards are available though not all combinations are necessarily supported or tested. There are a number of notable additions which are key to creating theme components, these are documented below.
If you want your whole card to be linked then use an <a> as the base tag with a card-linked' class. Then add a faux-link-overlay` link, see Accessible block links.
Cards have a transparent background by default you can apply the card-backed class to a card to give it a white background. This will add necessary padding to the card with the exception of the first/top card-img within the card which will remain flush.
You can instead add card-backed-{colour} class to apply the appropriate background colour. All colours in the $brand-colors array are supported. Applying a background colour from the $brand-colors-dark array will resulting in text colours being inverted for contrast as if you had also added the card-inverse class.
Note: whilst the default boostrap card-{colour} classes still exist they do not have the padding and automatic inverting of text etc. that you will get using our card-backed-{colour} classes.
Adding the card-centered class to a card will center all text content within. This is equivalent to adding the text-xs-center class.
To split a card into two equal halves horizontally, that will not collapse at smaller breakpoints you can use. card-split and card-half classes as below:
<div class="card">
<div class="card-split">
<div class="card-half">
Left half
</div>
<div class="card-half">
Right half
</div>
</div>
</div>
To create a card that "flips" on hover use the following structure:
<div class="card card-flip">
<div class="front">
Front side
</div>
<div class="back">
Back Side
</div>
</div>
Note the front side dictates the size of the card.
To create a card with content that appears to extend above its background, a "split header" you can add the card-header-split class to the card. Note this will only have an obvious effect on backed cards.
<div class="card card-backed card-backed-tertiary card-header-split card-centered">
<div class="card-header">
<img class="card-img img-circle" src="../media/images/profile-1.jpg">
</div>
<h3 class="card-title">Dr Ursular Fish</h3>
<p class="card-subtitle">Lecturer in Marine Biology</p>
</div>
Overlay cards are the basis of the majority of Feature Panels. They are designed for use as full-width cards and so should not be placed within a Card Panel or otherwise "contained". Overlay cards should have the below structure as a minimum, with a sufficiently large image, and will usually also have a Card Title Wrap element.
<div class="card card-overlay">
<div class="card-body">
<div class="card-media-wrap">
<img class="card-img" src="/media/images/students.jpg">
</div>
</div>
</div>
List cards can be used to display search results and any other data that is best shown in a list view. It is also used extensively by the inline quickspot outputs.
The following card's should be used within a card panel with the cards-list class or have the card-list-item class added to them.
<div class="card card-linked chevron-link">
<a href="#" class="card-title-link ">
<h3 style="display:inline;">Course name - <span>Award</span></h3>
</a>
<a href="#" class="faux-link-overlay" aria-hidden="true">Course name</a>
<span class="kf-clock tag text-accent"> Full-time only</span>
<span class="kf-pin tag text-accent"> Canterbury</span>
</div>
The selected class can be added to the card to toggle the selected state.
Header Overlay Cards or Hero Cards are a variant of an Overlay Card for use immediately following the departmental/section navigation. Denoted by the addition of a header-card-overlay class. Card Title Wrap elements are styled differently, and the whole card if offset upward underneath the departmental/section navigation.
Editorial Cards are a variant of an Overlay Card used where a little more test is required.
Denoted by the addition of a editorial class. Card Title Wrap elements are styled differently, and will fill a whole half of the card. The background colour of the Card Title Wrap can be changed using an appropriate additional editorial-{color} class all $brand-colors are supported.
Basic paragraphs and other markup are supported within the Card Title Wrap and should appear correctly without any additional classes.
Adding the card-meta class to to an element will apply some text styles making text smaller and grey, appropriate for supplementary/meta information such as a publishing/event date or category or such.
<p class="card-meta">28th March 2015</p>
Card badges are designed to show small notification like data such as comment/share counts by pairing an icon with a little textual data. Add the card-badge class along with a KentFont icon class.
<a href="#" class="card-badge kf-comment">7</a>
To add an author link with an accompanying avatar you can use the card-author class, on a element containing an <img> tag.
<a class="card-author" href="#">
<img src="../media/images/profile-academic.jpg">
Dr Bob Smithington
</a>
To display numerical stats and other figures in an infographic like manner you can add a card-title-figure class to a card-title this will adjust font size appropriately with support for <sub> and <sup> tags. Combine with backed cards in different colours in a card panel to achieve an Infographic Feature Layout.
To add border above and below an item in a card you can add the card-bordered-item class.
<a class="card-bordered-item card-author" href="#">
<img src="../media/images/profile-academic.jpg">
Dr Bob Smithington
</a>
Bootstrap provides a card-img-overlay class for overlaying content on top of an image. We have extended this with some additional modifier classes.
Adding card-overlay-inline-{breakpoint} where breakpoint is a defined breakpoint in the $breakpoints array will result in a overlay that responds at this breakpoint and below by moving to an inline block below the image, a dark grey background and padding are also added. To prevent this padding add card-overlay-inline-nopad.
a standard card-img-overlay
when combined with card-overlay-inline-{breakpoint} below this breakpoint becomes:
To align content to the bottom of the image use card-img-overlay-bottom instead of card-img-overlay. Optionally you can add a background gradient to this type of overlay by using card-img-overlay-bottom-shaded or a tint over the entire overlay using card-img-overlay-tinted.
card-img-overlay-bottom:
card-img-overlay-bottom-shaded:
card-img-overlay-centered can be used to vertically center content in an overlay, note this requires all children to be in an additional div wrapping element to ensure they are displayed correctly.
card-img-overlay-centered combined with card-img-overlay-tinted:
Images or Video within a card should be wrapped with a card-media-wrap class.
This will enforce letterboxing at larger screen sizes.
Embeds and Iframes within a card should be wrapped with a card-embed-wrap class.
This element is unique to Overlay Cards or their Header/Hero Variants.
Use the following markup to add title blocks to these elements.
To move the title to the right add the pull-right class to the card-title-wrap element. pull-bottom can also be used to position the block at the bottom.
<div class="card-title-wrap">
<h2 class="card-title">Local thinking, global impact</h2>
<p class="card-text">Through our European centres and partnerships with universities around the world, we are engaged in collaborative research - empowering the community, changing the world.</p>
</div>
To link a card-title-wrap the faux overlay pattern is used. This just requires the addition of card-title-wrap-link class and the faux-link-overlay as below. This will add a chevron and hover transition to the element.
<div class="card-title-wrap card-title-wrap-link">
<a class="card-title-link" href="#">
<h2 class="card-title">Local thinking, global impact</h2>
</a>
<a class="faux-link-overlay" href="#" aria-hidden="true">Local thinking, global impact</a>
<p class="card-text">Through our European centres and partnerships with universities around the world, we are engaged in collaborative research - empowering the community, changing the world.</p>
</div>
In headers the card-title-wrap will automatically be restyled to use a shaded bottom. This can be prevented by adding a force-block class which will cause it to fall back to its default block display.
This element is unique to Overlay Cards or their Header/Hero Variants.
For content pages where you wish to have the page title overlap a header feature you can use a card-title-overlap rather than a card-title-wrap with a overlay card.
When used on a page using the content grid add an additional overlap-content-container class in order to match the container widths correctly.
This will appear as below:
<div class="card card-overlay header-card-overlay">
<div class="card-body">
<div class="card-media-wrap">
<img class="card-img" src="/media/images/paintbrush-16x9.jpg">
</div>
<div class="card-title-overlap overlap-content-container">
<nav class="breadcrumb ">
<a href="https://beta-test.kent.ac.uk/courses" rel="index">University of Kent</a>
<a href="/courses" rel="up">Courses</a>
<a href="/courses/undergraduate" rel="up">Undergraduate 2017</a>
<span>Accounting and Finance</span>
</nav> <h1>
Accounting and Finance - BA (Hons) </h1>
<p class="card-subtitle">UCAS code N400</p>
</div>
</div>
</div>
