TACC UI Pattern Library

C Card: Frontera About Page

A container (that may be a link) with an image and a large heading beneath it.

ⓧ Deprecated

This was created for an incomplete About page on Frontera (dev) website. It is not intended to be used further. It is replaced by other card types or patterns.

<section class="o-section">

    <!-- FAQ: Not using frontera because class is frontera-about-page -->
    <div class="o-grid o-grid--col-min-width">
        <a href="#" class="c-card c-card--frontera-about-page">
            <figure>
                <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="" />
                <figcaption>Image w/ Caption &amp; Link</figcaption>
            </figure>
        </a>

        <a href="#" class="c-card c-card--frontera-about-page">
            <figure>
                <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="" />
                <figcaption>Link ▸ Image w/ Caption</figcaption>
            </figure>
        </a>

        <a href="#" class="c-card c-card--frontera-about-page">
            <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="" />
            <h3>Link ▸ Image + Text</h3>
        </a>

        <div class="c-card c-card--frontera-about-page">
            <figure>
                <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="" />
                <figcaption>Style ▸ Image w/ Caption</figcaption>
            </figure>
        </div>

        <div class="c-card c-card--frontera-about-page">
            <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" alt="" />
            <h3>Style ▸ Image + Text</h3>
        </div>
    </div>

</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
}