Windy CSS styleguide

3.6 #components.card .card

Toggle example guides Toggle HTML markup

Card with a picture on a left.

<div class="card">
    <div class="card__wrapper">
        <div class="card__image" style="background-image:url('...')">
            <!-- place badges here -->
            <span class="badge fg-white size-xs bg-red">bdg 1</span>
            <span class="badge fg-white size-xs bg-orange">bdg 2</span>
        </div>
        <div class="card__content">
            <div class="card__title">
            Card Title
            </div>
            Content goes here
            <div class="card__buttons">
                <!-- Many .button classes if needed -->
                <div class="button">Button 1</div>
                <div class="button">Button 2</div>
            </div>
        </div>
    </div>
</div>
Examples
Default styling
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
.card--plain
remove padding
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
bdg 1 bdg 2
Card Title
Content goes here
Button 1
Button 2
Markup 
    <section class="mt-10 mb-10 bg-white rounded-box">
        <div class="card [modifier class]" style="max-width: 420px;">
            <div class="card__wrapper">
                <div class="card__image" style="background-image:url('<!-- @echo IMG_GALLERY_PATH -->/howto/Screenshot-2019-08-16-at-16.52.29.png?w=300')">
                    <!-- palce badges here -->
                    <span class="badge fg-white size-xs bg-red">bdg 1</span>
                    <span class="badge fg-white size-xs bg-orange">bdg 2</span>
                </div>
                <div class="card__content">
                    <div class="card__title">
                    Card Title
                    </div>
                    Content goes here
                    <div class="card__buttons">
                        <!-- Many .button classes if needed -->
                        <div class="button">Button 1</div>
                        <div class="button">Button 2</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="mt-10 mb-10 fg-gray-light bg-gray-dark rounded-box dark-content">
        <div class="card [modifier class]" style="max-width: 420px;">
            <div class="card__wrapper">
                <div class="card__image" style="background-image:url('<!-- @echo IMG_GALLERY_PATH -->/howto/Screenshot-2019-08-16-at-16.52.29.png?w=300')">
                    <!-- palce badges here -->
                    <span class="badge fg-white size-xs bg-red">bdg 1</span>
                    <span class="badge fg-white size-xs bg-orange">bdg 2</span>
                </div>
                <div class="card__content">
                    <div class="card__title">
                    Card Title
                    </div>
                    Content goes here
                    <div class="card__buttons">
                        <!-- Many .button classes if needed -->
                        <div class="button button--variant-orange">Button 1</div>
                        <div class="button button--variant-orange">Button 2</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
Source: src/css/components/card.less, line 1