Container with content and action(s) about a single subject.
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card |
.card |
add padding to content |
.c-card--plain |
.card--plain |
add background* |
.c-card--plain-hr-top |
.card--plain-hr-top |
prepend an <hr> |
.c-card--plain-hr-bottom |
.card--plain-hr-bottom |
append an <hr> |
.c-card--standard |
.card--standard |
add background + border* |
* Colors depend on card context/parent.
To support images at different positions:
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card--image-... |
.card--image-... |
position a single image |
.c-card--image-top |
.card--image-top |
position image to top |
.c-card--image-bottom |
.card--image-bottom |
position image to bottom |
.c-card--image-left |
.card--image-left |
position image to left |
.c-card--image-right |
.card--image-right |
position image to right |
Backup classes if c-card--standard automatic styles fail:
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-card--standard-1 |
.card--standard-1 |
teal border, gray background |
.c-card--standard-2 |
.card--standard-2 |
teal border, white background |
.c-card--standard-3 |
.card--standard-3 |
brown border, white background |
<article class="c-card c-card-- c-card--image- ">
<h3 id="card-image-">
Card - Image
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.
</p>
<img src="https://cep.tacc.utexas.edu/media/filer_public/b3/22/b3228470-1a75-4142-a21e-f358b4190505/spectrum-square-600px.png" />
</article>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* To make a card with a grid inside span all columns */
.o-section > .c-card:has(.o-grid) {
grid-column: 1/-1
}
/* To prevent cards from stretching to match grid's equal row height */
.o-grid--col-min-width {
grid-auto-rows: unset;
}
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
/* Rid margin-bottom on last section */
.o-section>:last-child {
margin-bottom: var(--global-space--bootstrap-gap);
}
/* To make a title inside a section… */
.o-section > h2 {
/* …have "better" gap above and below */
margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
}
/* create a two column grid (cleaner look) */
.c-card-list {
grid-template-columns: 1fr 1fr;
}
/* To make a title inside a card list… */
.c-card-list > h3 {
/* …span all columns */
grid-column: 1/-1;
/* …have "better" gap above and below */
margin-top: 40px;
margin-bottom: calc(-1* var(--global-space--bootstrap-gap) / 2);
}
/* So hover outline shrink-wraps to card */
.c-card-list > .c-card {
height: min-content;
}
/* To show a card must not be used (even if it works) */
.c-card.demo-disabled * {
opacity: 0.5;
}
.c-card.demo-disabled { position: relative; }
.c-card.demo-disabled::after {
content: "Card like this must not be linked. Design does not approve of such a configuration.";
padding: 1rem;
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: black;
color: white;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"shouldLoadCMS": true,
"📝 shouldLoadCMS": "this pattern is not intended nor expected for use beyond CMS",
"shouldLoadBootstrap": true
}