Card Panels
Card Panels are the foundation of most of the more complex patterns they are essentially wrappers for one or more cards.
A basic panel will contain a multiple of four cards, these will be arranged in four columnns at will collapse to two and ultimately one at smaller breakpoints. card-panel-body acts as a container.
<div class="card-panel">
<div class="card-panel-body">
<div class="card">
<img class="card-img" src="../media/images/promo-1.jpg">
<h3 class="card-title">Academic excellence</h3>
<p class="card-meta">1st September 2015</p>
<p class="card-text">We rank amongst the best in the UK. Find out why we're more prestigious than many in the Russel Group.</p>
<a href="#" class="card-badge kf-comment">5</a>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-2.jpg">
<h3 class="card-title">Undergraduates</h3>
<p class="card-meta">28th March 2015</p>
<p class="card-text">We have a renowned personal teaching style supported by our accessible and passionate academics.</p>
<a href="#" class="card-badge kf-comment">7</a>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-3.jpg">
<h3 class="card-title">Postgraduates</h3>
<p class="card-meta">5th November 2015</p>
<p class="card-text">We'll equip you with essential skills to give you a competitive advantage when it comes to your career.</p>
<a href="#" class="card-badge kf-comment">1</a>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-4.jpg">
<h3 class="card-title">Visit Kent</h3>
<p class="card-meta">17th May 2015</p>
<p class="card-text">We're ranked one of the best universities for student satisfaction. Learn more why our students love Kent.</p>
<a href="#" class="card-badge kf-comment">23</a>
</div>
</div>
</div>
To create a card panel with no padding and no padding or margins on cards contained within use card-panel-flush rather than card-panel.
To add a header simply add a card-panel-header class to a block element at the top of your card-panel.
Panel headers support a variety of elements including:
- headings these should have the
card-panel-titleclass. - form elements these should be contained in a wrapper with
card-panel-filter. - navs
- Social Media links
<div class="card-panel-header">
<h2 class="card-panel-title">Card Panel Header</h2>
<div class="card-panel-filter">
<select class="form-control">
<option>All news</option>
<option>Student news</option>
<option>Staff news</option>
</select>
<input placeholder="Filter">
</div>
<nav class="content-social">
<a title="twitter" href="#" class="kf-twitter"></a>
<a title="facebook" href="#" class="kf-facebook"></a>
<a title="instagram" href="#" class="kf-instagram"></a>
<a title="pinterest" href="#" class="kf-pinterest"></a>
</nav>
</div>
To add a footer simply add a card-panel-footer class to a block element at the bottom of your card-panel.
To add a background colour to a Card Panel add the appropriate card-panel-{color} class. 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.
By adding any of the following classes to a card panel you can alter the appearance of all cards contained within rather than having to specify/repeat these options on each of the cards individually.
Add cards-backed with an optional cards-backed-{colour} with any of the colours from the $brand-colors to give each card a background colour and appropriate padding.
Add cards-centered to center all content within each card.
Add cards-flip to allow all cards to "flip" on hover. Note cards still need the necesary "front" and "back" children.
Add cards-header-split to enable a "split header" on all cards. Note cards still require a card-header and a background colour to have any obvious effect.
See Cards -> Split Header Cards
To achieve alternate layouts of cards within a card panel you can combine pairs of "card containers" these are simple wrappers around one or more card elements which alter the display of the cards contained within. All card containers will display in a two column grid that collapses inline at smaller breakpoints, further responsive behaviour will differ based on the container used.
Used to display a single card more prominently.
Wrap a single card element in a block element with the card-panel-single class.
<div class="card-panel card-panel-tertiary">
<div class="card-panel-header">
<h2 class="card-panel-title">Card Panel Single + List</h2>
</div>
<div class="card-panel-body">
<div class="card-panel-single">
<div class="card">
<img class="card-img" src="../media/images/sea-turtle.jpg">
<h3 class="card-title">Academic excellence</h3>
<p class="card-text">We rank amongst the best in the UK. Find out why we're more prestigious than many in the Russel Group.</p>
</div>
</div>
...
</div>
</div>
To display a number of cards in a list with thumbnails positioned to the left.
Wrap one or more card elements in a block element with the card-panel-list class.
<div class="card-panel card-panel-tertiary">
<div class="card-panel-header">
<h2 class="card-panel-title">Card Panel Single + List</h2>
</div>
<div class="card-panel-body">
...
<div class="card-panel-list">
<div class="card">
<img class="card-img" src="../media/images/promo-2.jpg">
<h3 class="card-title">Undergraduates</h3>
<p class="card-text">We have a renowned personal teaching style supported by our accessible and passionate academics.</p>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-3.jpg">
<h3 class="card-title">Postgraduates</h3>
<p class="card-text">We'll equip you with essential skills to give you a competitive advantage when it comes to your career.</p>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-4.jpg">
<h3 class="card-title">Visit Kent</h3>
<p class="card-text">We're ranked one of the best universities for student satisfaction. Learn more why our students love Kent.</p>
</div>
</div>
</div>
</div>
To display a number of cards in a two column grid.
Wrap one or more card elements in a block element with the card-panel-grid class.
<div class="card-panel card-panel-primary-tint">
<div class="card-panel-header">
<h2 class="card-panel-title">Card Panel Single + Grid</h2>
</div>
<div class="card-panel-body">
...
<div class="card-panel-grid">
<div class="card">
<img class="card-img" src="../media/images/promo-2.jpg">
<h3 class="card-title">Undergraduates</h3>
<p class="card-text">We have a renowned personal teaching style.</p>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-3.jpg">
<h3 class="card-title">Postgraduates</h3>
<p class="card-text">We'll equip you with essential skills.</p>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-4.jpg">
<h3 class="card-title">Visit Kent</h3>
<p class="card-text">Learn more why our students love Kent.</p>
</div>
<div class="card">
<img class="card-img" src="../media/images/promo-1.jpg">
<h3 class="card-title">More stuff</h3>
<p class="card-text">We rank amongst the best in the UK.</p>
</div>
</div>
</div>
</div>
Full Card containers are a special use case designed to make its card fill the full 50% width of its parent panel. Due to some margin removal it is not suitable for all card components.
To display just an image a simple div can be used with the image set as a background image using an inline style. This allows the use of some further modifier classes to tweak the display.
<div class="card-panel card-panel-contained card-panel-primary-tint">
<div class="card-panel-body">
...
<div class="card-panel-full">
<div class="video-launcher" data-src="../media/video/video-research-student.mp4" data-controls="false" style="background-image:url('../media/images/sea-turtle.jpg');">
</div>
</div>
</div>
</div>
By adding a fixed class to the card-panel-full element its height will be fixed to match its width and the image background adjusted to cover.
)
By adding a expanded class to the child div in the card-panel-full element it will be expanded to the edges of the card panel.
Both of these modifiers can be combined.
