TACC UI Pattern Library

C Card: Image Contact Group

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 
<section class="c-card-list">
    <h3 id="card-image---contact"><code></code> Contact Card with Image</h3>
    <article class="c-card c-card-- c-card--image-top ">

        <h4>
            Bender Rodríguez
        </h4>
        <p>Planet Express Worker</p>
        <p>(Anti-hero in Futurama)</p>
        <img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />

    </article>
    <a class="c-card c-card-- c-card--image-top " href="#">

        <h4>
            Bender Rodríguez
        </h4>
        <img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />

    </a>
    <article class="c-card c-card-- c-card--image-top ">

        <h4>
            <a href="#">Bender Rodríguez</a>
        </h4>
        <p>Planet Express Worker</p>
        <p>(Anti-hero in Futurama)</p>
        <a href="#">
            <img class="img-fluid" width="234px" height="293px" src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png" title="University of Texas at Austin" class="img-fluid" />
        </a>

    </article>
</section>
  • Content: 
    /* 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;
}
  • URL: /components/raw/c-card/c-card.demo.css
  • Filesystem Path: src/lib/_imports/components/c-card/c-card.demo.css
  • Size: 320 Bytes
  • Content: 
    /* 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;
}
  • URL: /components/raw/c-card/c-card.demo.images.css
  • Filesystem Path: src/lib/_imports/components/c-card/c-card.demo.images.css
  • Size: 1.3 KB 
{
  "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
}