| Vapor CSS

Home

Style sheet: /scss/components/home-card.scss

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card flush

Un-Even Home card without footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

Home card with padding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel. Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.

<div class="home-cards">
    <div class="home-card home-card-half-size">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem,
                non efficitur ante leo ac ante. Proin non nisl porttitor, egestas augue non,
                fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis
                sapien. Nam cursus quis mauris sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
        <div class="home-card-footer">
            <a href="#" class="home-card-footer-link">View More</a>
        </div>
    </div>

    <div class="home-card home-card-half-size">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
        <div class="home-card-footer">
            <button class="home-card-footer-action">Dismiss</button>
        </div>
    </div>

    <div class="home-card home-card-two-third">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
        <div class="home-card-footer">
            <a href="#" class="home-card-footer-link">View More</a>
        </div>
    </div>
    
    <div class="home-card home-card-one-third">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
        <div class="home-card-footer">
            <button class="home-card-footer-action">Dismiss</button>
        </div>
    </div>

    <div class="home-card home-card-one-quarter">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
    </div>

    <div class="home-card home-card-three-quarter">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
    </div>

    <div class="home-card home-card-one-sixth">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
    </div>

    <div class="home-card home-card-five-sixth">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
    </div>

    <div class="home-card home-card-full-width">
        <div class="home-card-header">
            <h2>Home card flush</h2>
        </div>
        <div class="home-card-body">
            <div style="background-color: #eff3f7; height: 200px; width: 100%"></div>
        </div>
    </div>

    <div class="home-card home-card-half-size">
        <div class="home-card-header">
            <h2>Un-Even Home card without footer</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p class="pb2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
    </div>
    
    <div class="home-card home-card-half-size">
        <div class="home-card-header">
            <h2>Home card with padding</h2>
        </div>
        <div class="home-card-body home-card-padded">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius ante orci, malesuada laoreet tortor pharetra vel.
                Duis gravida, nulla quis tincidunt blandit, justo lectus tincidunt lorem, non efficitur ante leo ac ante. Proin
                non nisl porttitor, egestas augue non, fermentum justo. Praesent faucibus quis mi eu maximus. Suspendisse sagittis
                ultrices risus vel aliquam. Mauris vel risus non nulla luctus rhoncus ac iaculis sapien. Nam cursus quis mauris
                sit amet iaculis. Suspendisse sed nibh tortor.
            </p>
        </div>
        <div class="home-card-footer">
            <button class="home-card-footer-action">Dismiss</button>
        </div>
    </div>
</div>

Default logo card with text

Lorem ipsum

Logo card with badges and ribbon

Badge 1 Badge 2 Badge 3
Ribbon

Disabled logo card

Badge 1 Badge 2 Badge 3
Ribbon
<div class="logo-card">
    <div class="logo-card-logo">
        <i class="icon mod-4x"><svg viewbox="0 0 64 64"><rect fill="#1f263f" width="64" height="64" rx="4" ry="4"/><path fill="#fff" d="M34.37 34.1a1 1 0 0 0-1.37-.37l-3.46 2-2-3.46 3.46-2a1 1 0 0 0 .37-1.37 1 1 0 0 0-1.37-.36l-3.46 2-.5-.87a1 1 0 0 0-1.37-.37 13.53 13.53 0 0 0-4.6 3.94 5.13 5.13 0 0 0-.61 4.87l-10 6a1 1 0 0 0-.34 1.38A1 1 0 0 0 10 46a1.07 1.07 0 0 0 .52-.14l9.94-6a5 5 0 0 0 4.06 1.9 12.76 12.76 0 0 0 6.15-2 1 1 0 0 0 .33-1.43l-.5-.87 3.46-2a1 1 0 0 0 .41-1.36zM21.61 38a3.18 3.18 0 0 1 .13-3.66 10.28 10.28 0 0 1 3.08-2.78l4 6.88c-3.57 1.83-5.98 1.69-7.21-.44zM53.87 19.51a1 1 0 0 0-1.36-.38l-8.95 5.05C42 22.23 39 21 33.33 24.3a1 1 0 0 0-.33 1.37l5 8.66a1 1 0 0 0 1.37.37 13.53 13.53 0 0 0 4.6-3.94 5.16 5.16 0 0 0 .62-4.84l8.94-5.05a1 1 0 0 0 .34-1.36zM42.26 29.66a10.28 10.28 0 0 1-3.08 2.78l-4-6.88c3.54-1.84 5.95-1.69 7.18.44a3.18 3.18 0 0 1-.1 3.66z"/><path fill="#fff" d="M32 51.5a19.32 19.32 0 0 1-13.8-5.73 1 1 0 1 1 1.41-1.41A17.5 17.5 0 0 0 48.9 27.45a1 1 0 0 1 .71-1.23 1 1 0 0 1 1.22.71A19.23 19.23 0 0 1 51.5 32 19.53 19.53 0 0 1 32 51.5zM14.13 37.82a1 1 0 0 1-1-.74A19.73 19.73 0 0 1 12.5 32a19.5 19.5 0 0 1 33.29-13.79 1 1 0 1 1-1.42 1.42A17.5 17.5 0 0 0 15.1 36.56a1 1 0 0 1-.71 1.23 1.09 1.09 0 0 1-.26.03z"/></svg></i>
    </div>
    <div class="logo-card-content">
        <h2 class="logo-card-title">Default logo card with text</h2>
        <div>Lorem ipsum</div>
    </div>
</div>

<div class="logo-card ribbon-container">
    <div class="logo-card-logo">
        <i class="icon mod-4x"><svg viewbox="0 0 64 64"><rect fill="#1f263f" width="64" height="64" rx="4" ry="4"/><path fill="#fff" d="M34.37 34.1a1 1 0 0 0-1.37-.37l-3.46 2-2-3.46 3.46-2a1 1 0 0 0 .37-1.37 1 1 0 0 0-1.37-.36l-3.46 2-.5-.87a1 1 0 0 0-1.37-.37 13.53 13.53 0 0 0-4.6 3.94 5.13 5.13 0 0 0-.61 4.87l-10 6a1 1 0 0 0-.34 1.38A1 1 0 0 0 10 46a1.07 1.07 0 0 0 .52-.14l9.94-6a5 5 0 0 0 4.06 1.9 12.76 12.76 0 0 0 6.15-2 1 1 0 0 0 .33-1.43l-.5-.87 3.46-2a1 1 0 0 0 .41-1.36zM21.61 38a3.18 3.18 0 0 1 .13-3.66 10.28 10.28 0 0 1 3.08-2.78l4 6.88c-3.57 1.83-5.98 1.69-7.21-.44zM53.87 19.51a1 1 0 0 0-1.36-.38l-8.95 5.05C42 22.23 39 21 33.33 24.3a1 1 0 0 0-.33 1.37l5 8.66a1 1 0 0 0 1.37.37 13.53 13.53 0 0 0 4.6-3.94 5.16 5.16 0 0 0 .62-4.84l8.94-5.05a1 1 0 0 0 .34-1.36zM42.26 29.66a10.28 10.28 0 0 1-3.08 2.78l-4-6.88c3.54-1.84 5.95-1.69 7.18.44a3.18 3.18 0 0 1-.1 3.66z"/><path fill="#fff" d="M32 51.5a19.32 19.32 0 0 1-13.8-5.73 1 1 0 1 1 1.41-1.41A17.5 17.5 0 0 0 48.9 27.45a1 1 0 0 1 .71-1.23 1 1 0 0 1 1.22.71A19.23 19.23 0 0 1 51.5 32 19.53 19.53 0 0 1 32 51.5zM14.13 37.82a1 1 0 0 1-1-.74A19.73 19.73 0 0 1 12.5 32a19.5 19.5 0 0 1 33.29-13.79 1 1 0 1 1-1.42 1.42A17.5 17.5 0 0 0 15.1 36.56a1 1 0 0 1-.71 1.23 1.09 1.09 0 0 1-.26.03z"/></svg></i>
    </div>
    <div class="logo-card-content">
        <h2 class="logo-card-title">Logo card with badges and ribbon</h2>
        <div>
            <span class="badge bg-blue">Badge 1</span>
            <span class="badge bg-medium-blue">Badge 2</span>
            <span class="badge bg-darker-blue">Badge 3</span>
        </div>
    </div>
    <div class="corner-ribbon top right bg-orange">Ribbon</div>
</div>

<div class="logo-card ribbon-container disabled">
    <div class="logo-card-logo">
        <i class="icon mod-4x"><svg viewbox="0 0 64 64"><rect fill="#1f263f" width="64" height="64" rx="4" ry="4"/><path fill="#fff" d="M34.37 34.1a1 1 0 0 0-1.37-.37l-3.46 2-2-3.46 3.46-2a1 1 0 0 0 .37-1.37 1 1 0 0 0-1.37-.36l-3.46 2-.5-.87a1 1 0 0 0-1.37-.37 13.53 13.53 0 0 0-4.6 3.94 5.13 5.13 0 0 0-.61 4.87l-10 6a1 1 0 0 0-.34 1.38A1 1 0 0 0 10 46a1.07 1.07 0 0 0 .52-.14l9.94-6a5 5 0 0 0 4.06 1.9 12.76 12.76 0 0 0 6.15-2 1 1 0 0 0 .33-1.43l-.5-.87 3.46-2a1 1 0 0 0 .41-1.36zM21.61 38a3.18 3.18 0 0 1 .13-3.66 10.28 10.28 0 0 1 3.08-2.78l4 6.88c-3.57 1.83-5.98 1.69-7.21-.44zM53.87 19.51a1 1 0 0 0-1.36-.38l-8.95 5.05C42 22.23 39 21 33.33 24.3a1 1 0 0 0-.33 1.37l5 8.66a1 1 0 0 0 1.37.37 13.53 13.53 0 0 0 4.6-3.94 5.16 5.16 0 0 0 .62-4.84l8.94-5.05a1 1 0 0 0 .34-1.36zM42.26 29.66a10.28 10.28 0 0 1-3.08 2.78l-4-6.88c3.54-1.84 5.95-1.69 7.18.44a3.18 3.18 0 0 1-.1 3.66z"/><path fill="#fff" d="M32 51.5a19.32 19.32 0 0 1-13.8-5.73 1 1 0 1 1 1.41-1.41A17.5 17.5 0 0 0 48.9 27.45a1 1 0 0 1 .71-1.23 1 1 0 0 1 1.22.71A19.23 19.23 0 0 1 51.5 32 19.53 19.53 0 0 1 32 51.5zM14.13 37.82a1 1 0 0 1-1-.74A19.73 19.73 0 0 1 12.5 32a19.5 19.5 0 0 1 33.29-13.79 1 1 0 1 1-1.42 1.42A17.5 17.5 0 0 0 15.1 36.56a1 1 0 0 1-.71 1.23 1.09 1.09 0 0 1-.26.03z"/></svg></i>
    </div>
    <div class="logo-card-content">
        <h2 class="logo-card-title">Disabled logo card</h2>
        <div>
            <span class="badge bg-blue">Badge 1</span>
            <span class="badge bg-medium-blue">Badge 2</span>
            <span class="badge bg-darker-blue">Badge 3</span>
        </div>
    </div>
    <div class="corner-ribbon top right bg-orange">Ribbon</div>
</div>

Limit

Visually show the usage of a limit

Style sheet: /scss/components/limit-box.scss

42
100
30
30
<form class="coveo-form">
    <div class="limit-box mb2">
        <div class="limit-box-main p2 pb1">
            <div class="flex space-between">
                <label class="form-control-label">Limit</label>
            </div>
            <div class="limit-box-numbers pt1 flex">
                <div class="limit-box-usage">
                    <label class="form-control-label">Usage</label>
                    <span class="limit-box-usage-value">42</span>
                </div>
                <div class="limit-box-limit form-group input-field validate">
                    <input id="FirstLimit" type="number" value="100" required />
                    <label for="FirstLimit">Limit</label>
                </div>
            </div>
        </div>
        <div class="limit-box-footer">
            <div class="limit-box-bar progress-42"></div>
        </div>
    </div>

    <div class="limit-box mb2">
        <div class="limit-box-main p2 pb1">
            <div class="flex space-between">
                <label class="form-control-label">Limit with History</label>
                <span class="icon mod-lg limit-history-button">
                    <svg class="fill-medium-blue" viewBox="0 0 16 16"><path d="M14.5 9.331l-.894-.894-1.267 1.269-4.159-4.16-2.888 2.887-1.768-1.768L1.5 8.69V1.994c0-.272.222-.494.494-.494h12.01c.272 0 .494.222.494.494v7.337m0 4.675a.495.495 0 0 1-.494.494H1.994a.495.495 0 0 1-.494-.494v-3.902l2.024-2.025 1.768 1.768L8.18 6.96l4.159 4.16 1.267-1.268.894.893v3.261m-.494-14.01H1.996A1.996 1.996 0 0 0 .002 1.99V14c0 1.099.893 1.994 1.994 1.994h12.01A1.995 1.995 0 0 0 16 14V1.99a1.995 1.995 0 0 0-1.994-1.993"></path></svg>
                </span>
            </div>
            <div class="limit-box-numbers pt1 flex">
                <div class="limit-box-usage">
                    <label class="form-control-label">Usage</label>
                    <span class="limit-box-usage-value">100</span>
                </div>
                <div class="limit-box-limit form-group input-field validate">
                    <input id="SecondLimit" type="number" value="110" required />
                    <label for="SecondLimit">Limit</label>
                </div>
            </div>
        </div>
        <div class="limit-box-footer">
            <div class="limit-box-bar progress-91"></div>
        </div>
    </div>

    <div class="limit-box mb2">
        <div class="limit-box-main p2 pb1">
            <div class="flex space-between">
                <label class="form-control-label">Limit</label>
            </div>
            <div class="limit-box-numbers pt1 flex">
                <div class="limit-box-usage">
                    <label class="form-control-label">Usage</label>
                    <span class="limit-box-usage-value">30</span>
                </div>
                <div class="limit-box-limit form-group input-field validate">
                    <input id="ThirdLimit" type="number" value="30" required />
                    <label for="ThirdLimit">Limit</label>
                </div>
            </div>
        </div>
        <div class="limit-box-footer">
            <div class="limit-box-bar progress-100"></div>
        </div>
    </div>

    <div class="limit-box mb2">
        <div class="limit-box-main p2 pb1">
            <div class="flex space-between">
                <label class="form-control-label">Limit we want to fill</label>
            </div>
            <div class="limit-box-numbers pt1 flex">
                <div class="limit-box-usage">
                    <label class="form-control-label">Usage</label>
                    <span class="limit-box-usage-value">30</span>
                </div>
                <div class="limit-box-limit form-group input-field validate">
                    <input id="FourthLimit" type="number" value="30" required />
                    <label for="FourthLimit">Limit</label>
                </div>
            </div>
        </div>
        <div class="limit-box-footer">
            <!-- .mod-red and .mod-orange are also available -->
            <div class="limit-box-bar progress-100 mod-green"></div>
        </div>
    </div>

    <div class="limit-box">
        <div class="limit-box-main p2 pb1">
            <div class="flex space-between">
                <label class="form-control-label">Limit</label>
            </div>
            <div class="limit-box-numbers pt1 flex">
                <div class="limit-box-limit form-group input-field validate">
                    <input id="FifthLimit" type="number" value="219000" required />
                    <label for="FifthLimit">Limit</label>
                </div>
            </div>
        </div>
    </div>
</form>

Material

A container to display content

Style sheet: /scss/components/material-card.scss

I am a material card and you can fill me with whatever you want.

I am just a container after all.

I am a material card with an hover effect.

Please hover me.

I am a material card with hover and click effects.

Please hover and click me.
This is an example with a loading animation inside the material card.
<div class="material-card mb2">
    <div class="p2">
        <h2 class="mb2">I am a material card and you can fill me with whatever you want.</h2>
        <div>I am just a container after all.</div>
    </div>
</div>

<div class="material-card with-hover mb2">
    <div class="p2">
        <h2 class="mb2">I am a material card with an hover effect.</h2>
        <div>Please hover me.</div>
    </div>
</div>

<div class="material-card with-hover with-active mb2">
    <div class="p2">
        <h2 class="mb2">I am a material card with hover and click effects.</h2>
        <div>Please hover and click me.</div>
    </div>
</div>

<div class="material-card">
    <div class="p2">
        <div class="loading-prompt">
            <div>This is an example with a loading animation inside the material card.</div>
            <div class="spinner">
              <div class="bounce1"></div>
              <div class="bounce2"></div>
              <div class="bounce3"></div>
            </div>
          </div>
    </div>
</div>

Wizard

Use it with configuration wizards

Style sheet: /scss/components/wizard-card.scss

Use a Coveo Organization

Coveo Cloud has identified the following Coveo organizations related to your account.

Create a New Coveo Organization

<div class="spaced-boxes-container flex flex-wrap">
    <div class="wizard-card spaced-box mod-small">
        <header class="header flex center-align">
            <div class="header-section">
                <h3 class="bold">Use a Coveo Organization</h3>
            </div>
        </header>
        <div class="wizard-card-body">
            <div class="coveo-form">
                <div class="form-group left-align">
                    <h3>Coveo Cloud has identified the following <em class="bold text-medium-blue">Coveo organizations</em> related to your account.</h3>
                </div>
                <div class="form-group input-field">
                    <input type="text" value="my org name" required disabled/>
                    <label>Coveo organization</label>
                </div>
            </div>
        </div>
        <footer class="wizard-card-footer">
            <button type="button" class="btn mod-primary mod-small">Next</button>
        </footer>
    </div>

    <div class="wizard-card spaced-box mod-small">
        <header class="header flex center-align">
            <div class="header-section">
                <h3 class="bold">Create a New Coveo Organization</h3>
            </div>
        </header>
        <div class="wizard-card-body">
            <div class="coveo-form">
                <div class="form-group">
                    <div class="input-field validate">
                        <input type="text" value="A new org name" required />
                        <label>Organization name</label>
                    </div>
                </div>
            </div>
        </div>
        <footer class="wizard-card-footer">
            <button type="button" class="btn mod-primary mod-small">Create</button>
        </footer>
    </div>
</div>