Card

No notes defined.

<!-- Default -->
<div class=" card">
    <div class="card__container">
        <div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
        <div class="card__tag -overlay">White Paper</div>
        <div class="card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
                <rect x="1" y="1" width="4" height="4" rx="1" />
            </svg>
        </div>
        <h4 class="card__heading">One Great Heading</h4>
        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae. Elit vero est ipsa deleniti?</p>
        <div class="card__actions">
            <a href="" class="card__action button -primary">Learn More</a>
        </div>
    </div>
</div>

<!-- Actions Attached -->
<div class=" card">
    <div class="card__container">
        <div class="card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
                <rect x="1" y="1" width="4" height="4" rx="1" />
            </svg>
        </div>
        <h4 class="card__heading">One Great Heading</h4>
        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
        <div class="card__actions -attached">
            <a href="" class="card__action button -primary">Learn More</a>
        </div>
    </div>
</div>

<!-- Two Actions -->
<div class=" card">
    <div class="card__container">
        <div class="card__background" style="opacity: .3; background-image: url(https://placeimg.com/640/320/tech/grayscale)"></div>
        <div class="card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
                <rect x="1" y="1" width="4" height="4" rx="1" />
            </svg>
        </div>
        <h4 class="card__heading">One Great Heading</h4>
        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
        <div class="card__actions">
            <a href="" class="card__action button -secondary -ghost">Learn More</a>
            <a href="" class="card__action button -primary">Register</a>
        </div>
    </div>
</div>

<!-- Two Actions Attached -->
<div class=" card">
    <div class="card__container">
        <div class="card__icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 6 6" stroke-width=".25" stroke="currentColor" fill="none">
                <rect x="1" y="1" width="4" height="4" rx="1" />
            </svg>
        </div>
        <h4 class="card__heading">One Great Heading</h4>
        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
        <div class="card__actions -attached">
            <a href="" class="card__action button -secondary">Learn More</a>
            <a href="" class="card__action button -primary">Register</a>
        </div>
    </div>
</div>

<!-- Wide -->
<div class=" card -clickable -wide" @click="click($event, $refs.link)">
    <div class="card__container">
        <div class="card__background">
            <picture class="">
                <source type="image/webp" data-srcset="https://picsum.photos/640/640.webp 640w, https://picsum.photos/1024/1024.webp 1024w, https://picsum.photos/1440/1440.webp 1440w, https://picsum.photos/1920/1920.webp 1920w" data-sizes="auto" />

                <img src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;1920&quot; width=&quot;1920&quot;></svg>" alt="Placeholder Image" class="lazyload  card__backgroundImg" data-srcset="https://picsum.photos/640/640 640w, https://picsum.photos/1024/1024 1024w, https://picsum.photos/1440/1440 1440w, https://picsum.photos/1920/1920 1920w" data-sizes="auto" />
            </picture>
        </div>
        <h3 class="card__heading">One Great Heading</h3>
        <p class="card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos et voluptatum aliquam neque beatae.</p>
        <div class="card__actions -attached">
            <a ref="link" href="#foo" class="card__action button -primary">Learn More</a>
        </div>
    </div>
</div>

  • Content:
    @use "/resources/styles/config";
    @use "/resources/styles/common" as *;
    
    ///
    /// Simple card.
    ///
    @mixin card() {
        $b: &;
    
        background-color: config.$white;
        box-shadow: config.$med-shadow;
        margin-bottom: config.$v-space;
        z-index: 1;
    
        &__container {
            display: grid;
            grid-gap: 1rem;
            grid-template: "icon" "heading" "content" 1fr "actions" / auto;
            height: 100%;
        }
    
        &__icon,
        &__heading,
        &__content,
        &__actions {
            justify-self: center; // For IE11 (instead of justify-items)
            padding-left: config.$h-space;
            padding-right: config.$h-space;
            position: relative;
        }
    
        &__tag {
            align-self: start;
            color: config.$meta-text;
            font-size: .875rem;
            font-weight: bold;
            grid-area: icon;
            justify-self: start;
            padding: config.$thin-padding;
            text-transform: uppercase;
    
            &.-overlay {
                color: config.$black;
            }
        }
    
        &__icon {
            grid-area: icon;
            padding-top: config.$v-space;
            text-align: center; // For IE11
        }
    
        &__heading {
            grid-area: heading;
        }
    
        &__content {
            grid-area: content;
            width: 100%;
        }
    
    
        &__background {
            background: config.$gray-100 center/cover;
            grid-column: 1;
            grid-row: icon / heading;
            height: 100%;
            justify-self: stretch;
        }
    
        &__actions {
            grid-area: actions;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            justify-self: stretch;
            margin-top: auto;
            padding-bottom: config.$v-space;
    
            &.-attached {
                justify-content: stretch;
                padding-bottom: 0;
                padding-left: 0;
                padding-right: 0;
    
                .card__action {
                    flex-grow: 1;
                }
            }
        }
    
        &__action {
            flex-basis: max(9rem, 50%);
        }
    
        &.-clickable {
            cursor: pointer;
        }
    
        &.-wide {
            #{$b}__container {
                grid-gap: 1rem 0;
                grid-template: "background heading" "background content" 1fr "background actions" / 1fr 1fr;
            }
    
            #{$b}__background {
                grid-area: background;
            }
    
            #{$b}__backgroundImg {
                height: 100%;
                object-fit: cover;
            }
    
            #{$b}__heading {
                padding-top: config.$v-space;
            }
        }
    }
    
    .card {
        @include card;
    }
    
  • URL: /components/raw/card/_index.scss
  • Filesystem Path: resources/styles/molecules/card/_index.scss
  • Size: 2.5 KB