Cards

No notes defined.

<div class=" cards">
    <div class="cards__card 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>

    <div class="cards__card 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>

    <div class="cards__card 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>

    <div class="cards__card 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>

    <div class="cards__card 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>
</div>
  • Content:
    @use "/resources/styles/common" as *;
    @use "/resources/styles/config";
    
    .cards {
        $b: &;
    
        display: grid;
        gap: config.$padding;
    
        @include at(md) {
            grid-template-columns: 1fr 1fr;
        }
    
        @include at(lg) {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    
  • URL: /components/raw/cards/_index.scss
  • Filesystem Path: resources/styles/organisms/cards/_index.scss
  • Size: 282 Bytes