A link with an (optional) image, a large heading, and some text.
<p class="
c-message
c-message--scope-global
">
There is a complete <code>c-card--image-___</code> feature behind this, but it is not yet documented nor available for other clients; it will be. (It came from TUP CMS.)
</p>
<section>
<h2>Has Image</h2>
<div class="o-grid o-grid o-grid--col-min-width">
<a class="c-card c-card--plain c-card--image-top" href="#">
<img alt="a paper with a gavel, a shielf with a checkmark" src="https://docs.tacc.utexas.edu/img/home/conduct.png">
<h3>One</h3>
<p>Veni, vidi, vici.
</p>
</a>
<a class="card--plain card--image-top" href="#">
<img alt="a lock with a gear and nodes" src="https://docs.tacc.utexas.edu/img/home/multi-factor.png">
<h3>Two</h3>
<p>Veni, vidi, vici.
</p>
</a>
<a class="c-card c-card--plain c-card--image-top" href="#">
<img alt="a photograph of rows of tables with trainees using laptops" src="https://docs.tacc.utexas.edu/img/home/file-share.png">
<h3>Three</h3>
<p>Veni, vidi, vici.
</p>
</a>
<a class="c-card c-card--plain c-card--image-top" href="#">
<img alt="an interface window with a graduation cap and a play button being pressed by a finger" src="https://docs.tacc.utexas.edu/img/home/remote.png">
<h3>Four</h3>
<p>Veni, vidi, vici.
</p>
</a>
</div>
</section>
<section>
<h2>No Image</h2>
<div class="o-grid o-grid o-grid--col-min-width">
<a class="c-card c-card--plain" href="#">
<h3>One</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>
</a>
<a class="c-card c-card--plain" href="#">
<h3>Two</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>
</a>
<a class="c-card c-card--plain" href="#">
<h3>Three</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>
</a>
<a class="c-card c-card--plain" href="#">
<h3>Four</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>
</a>
</div>
</section>
/* 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,
"shouldLoadDocs": true,
"supportStyles": [
"../../assets/objects/o-grid.css"
]
}