College Design Language System

Content Card: Visit

Content Card Documentation

Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#highlight-card_content

Implementation Notes

This is a smaller level component and is not designed to be used stand alone. TODO: Create a separate preview template for this component to pop into a col-3 or col-4 width size.

To use a component of this type, please see the corresponding Content List components.

Media Requirements

  • Content Card Image: Our standard image size is 460px (width) by 210px (height), 72 ppi (pixels per inch) jpeg or png.
    • Image should be no larger than 300kb (kilobytes)
<div class="highlight-card white-bg">
    <div class="highlight-card-img">
        <a href="/visit/tours/">
            <img src="../../college-dls/college/images/content-highland-card.png" alt="Card Image" />
        </a>
    </div>
    <div class="highlight-card-content">
        <a class="highlight-card-link pb-3" href="https://google.com ">Lorem ipsum dolor sit amet, consectetur</a>
        <p>Led by student ambassadors, see what our campus looks like and what UTSA can do for you to enable you to reach your educational goals. Group tours are also available.</p>
        <a class="blue-btn" href="https://google.com">Visit Us Today <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
    </div>
</div>
  • Content: 
    /* components/02-components/01-card/03-content-card/content-card.scss */
/* BEGIN content-card.scss */
.highlight-card {
    --notchSize: 3.8rem;
    clip-path: polygon(100% 0,
            100% calc(100% - var(--notchSize)),
            calc(100% - var(--notchSize)) 100%,
            0 100%,
            0 0);
    -webkit-clip-path: polygon(100% 0,
            100% calc(100% - var(--notchSize)),
            calc(100% - var(--notchSize)) 100%,
            0 100%,
            0 0);
    height: 100%;

    .highlight-card-img img {
        width: 100%;
    }

    .highlight-card-content {
        padding: 25px 22px 56px 22px;
        border-top: 6px solid $orange;

        a.highlight-card-link {
            display: block;
            font-size: 1.6rem;
            line-height: 1.2;
            font-weight: 600;
            
            &:hover {
                color: $white;
                background-color: $blue;
            }
        }
    }

    &.blue-bg {
        .highlight-card-content>a.highlight-card-link {
            color: $white;
            &:hover {
                color: $orange-a11y;
                background-color: $grey;
            }
        }
    }

    &.white-bg {
        .highlight-card-content>a.highlight-card-link {
            color: $blue;
            &:hover {
                color: $white;
            }
        }
    }

    .highlight-card-content a.highlight-card-link {
        text-decoration: none;
    }
}

@include media-breakpoint-down(lg) {
    .highlight-card {
        .highlight-card-content {
            padding: 15px 15px 30px 15px;
        }
    }
}

/* END content-card.scss */
  • URL: /components/raw/content-card/content-card.scss
  • Filesystem Path: components/02-components/03-card/03-content-card/content-card.scss
  • Size: 1.6 KB 
<div class="highlight-card white-bg">
    <div class="highlight-card-img">
        <a href="/visit/tours/">
            <img src="{{ path content-card.image }}" alt="Card Image" />
        </a>
    </div>
    <div class="highlight-card-content">
        <a class="highlight-card-link pb-3" href="{{ content-card.link-url }} ">{{ content-card.heading }}</a>
        <p>{{ content-card.content }}</p>
        <a class="blue-btn" href="{{ content-card.link-url }}">{{ content-card.link-text }} <i class="fas fa-arrow-right"
                aria-hidden="true"></i></a>
    </div>
</div>