biofriction-wp-theme/node_modules/foundation-sites/docs/pages/card.md

230 lines
7.4 KiB
Markdown
Raw Permalink Normal View History

2021-10-26 14:18:09 +02:00
---
title: Card
description: Cards are a popular and flexible UI component.
video: 'OMwg8UsrLrM'
sass: scss/components/_card.scss
tags:
- card
flex: true
---
## Basics
A card is just an element with a `.card` class applied. You can put any kind of content inside.
Make sure you wrap your content in a `.card-section` element in order to achieve the traditional card look.
A card container has no padding, allowing you to place full-bleed images inside. Use the `.card-divider` and `.card-section` classes to sub-divide a card.
<p>
<a class="" data-open-video="0:32"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/oWMEpo?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="card" style="width: 300px;">
<div class="card-divider">
This is a header
</div>
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
```
<div class="alert callout">
<p><strong>Browser Bug (IE 11 - Flexbug): </strong>On IE 11, when using the card with image, you may see a lot of whitespace under each image that happens to match the original image size. The bug can be reproduced <a href="https://codepen.io/IamManchanda/pen/MmNqEX?editors=1100">here</a> on an IE11 browser. Use <code>.card-image</code> class to wrap your image to resolve this.</p>
</div>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/aWrWQq?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<div class="card-image">
<img src="assets/img/generic/rectangle-1.jpg">
</div>
```
---
### Card Divider
You can also include a `.card-divider` element as a title, footer or to break up content.
<p>
<a class="" data-open-video="1:30"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/PmyPbL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="card" style="width: 300px;">
<div class="card-divider">
<h4>I'm featured</h4>
</div>
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<p>This card makes use of the card-divider element.</p>
</div>
</div>
```
---
### Images
Images play nicely with cards. Simply include one outside of the `.card-section` element to span nicely to the edges. Or move the image inside the `.card-section` to have padding around the image.
<p>
<a class="" data-open-video="2:12"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/QvBQvR?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<!-- image has no padding -->
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<p>This is a simple card with an image.</p>
</div>
</div>
<!-- image has padding -->
<div class="card">
<div class="card-section">
<img src="assets/img/generic/rectangle-1.jpg">
</div>
<div class="card-section">
<p>This is a simple card with an image inside a `.card-section`.</p>
</div>
</div>
```
<div class="grid-x grid-margin-x small-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<p>This is a simple card with an image.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<div class="card-section">
<img src="assets/img/generic/rectangle-1.jpg">
</div>
<div class="card-section">
<p>This is a simple card with an image inside a `.card-section`.</p>
</div>
</div>
</div>
</div>
```html
<div class="card">
<div class="card-section">
<p>Images work just fine below the content too!</p>
</div>
<img src="assets/img/generic/rectangle-1.jpg">
</div>
```
<div class="grid-x grid-margin-x small-up-3">
<div class="cell">
<div class="card">
<div class="card-section">
<p>Images work just fine below the content too!</p>
</div>
<img src="assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
---
## Sizing
You can either set the width of cards with custom css or add them into the Foundation grid.
<p>
<a class="" data-open-video="0:34"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/PmabmL?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html_example
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an Flex Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
```