Publications Office of the EU
Cards v2 - Publications Office Web Guide
DisplayCustomHeader
MyPortal
Language Selector
English
BasketSummary
Dockbar
Card standard version 2

Card standard version 2

Last updated: 23/3/2023

cards - content

Core elements

Heading 1.125rem / 18px bold

Subtitle 1rem / 16px bold

Card body text 1rem / 16px

  • Heading color gray-100 (#333333)
  • Subtitle and body text color gray-75 (#666666)
  • Border: stroke 1px, color gray-20 (#D8D8D8)
  • Drop shadow by default, but it may be removed
  • Padding: 1rem / 16px; for larger components 1.5rem / 24px may be applied.

HTML code

<div class="gs-card rounded">
    <div class="gs-card-body">
        <h2 class="gs-title"><a href="#">Heading 1.125rem / 18px bold</a></h2>
        <p class="gs-subtitle">Subtitle 1rem / 16px bold</p>
        <p>Card body text 1rem / 16px</p>
    </div>
</div>

With image

Heading 1.125rem / 18px bold

Subtitle 1rem / 16px bold

Card body text 1rem / 16px

  • The recommended image size is 504px width x 288px height. This size ratio and dimensions work well in most use cases (where the card width does not exceed 450px rendered in the browser).
  • If the card will occupy the entire page width up until browser width 767px (all mobile screens -- xs and sm), then you may use 768px x 439px to avoid empty space on the sides.
  • Either way, you should use the ratio that best suits your needs. If you require something even wider, then please contact us so we may provide you with a specific solution for your use case.
  • When placing several cards next to each other, be sure to keep all the images the same size or ratio to maintain consistency.
  • Note: In cards with images, you will have to add the link a href="#" twice; once for the image and a second time for the heading.

HTML code

<div class="gs-card rounded">
    <!-- Card top with image -->
    <div class="gs-card-top" style="position: relative;">
        <div class="gs-card-img">
            <a href="#" tabindex="-1" aria-hidden="true">
            <img class="img-fluid mx-auto d-block" alt="" src="/documents/3628095/10259760/cards-logos-eu-parliament.png/984f5e5b-bad0-dc3e-8eec-e2b3f23c9cb8">
            </a>
        </div>
    </div>
    <!-- Card body -->
    <div class="gs-card-body">
        <h2 class="gs-title"><a href="#">Heading 1.125rem / 18px bold</a></h2>
        <p class="gs-subtitle">Subtitle 1rem / 16px bold</p>
        <p>Card body text 1rem / 16px</p>
    </div>
</div>

In a row

Heading lorem ipsum dolor sit

Body text nulla vulputate feugiat erat, nec auctor diam.

Heading lorem ipsum dolor sit

Body text nulla vulputate feugiat erat, nec auctor diam.

Heading lorem ipsum dolor sit

Body text nulla vulputate feugiat erat, nec auctor diam.

HTML code

<div class="gs-grid gs-grid-col gs-grid-sm-2col gs-grid-md-3col gs-grid-gap-24 mb-4">
    <!-- Card -->
    <div class="gs-card rounded">
        <!-- Card top with image -->
        <div class="gs-card-top" style="position: relative;">
            <div class="gs-card-img">
                <a href="#" tabindex="-1" aria-hidden="true">
                <img class="img-fluid mx-auto d-block" alt="" src="/documents/7946710/11242982/card-image-sample.jpg/593f4a3c-6d47-2982-aa2e-726c094e3723">
                </a>
            </div>
        </div>
        <!-- Card body -->
        <div class="gs-card-body">
            <h2 class="gs-title"><a href="#">Heading lorem ipsum dolor sit</a></h2>
            <p>Body text nulla vulputate feugiat erat, nec auctor diam.</p>
        </div>
    </div>
    <!-- Card -->
    <div class="gs-card rounded">
        <!-- Card top with image -->
        <div class="gs-card-top" style="position: relative;">
            <div class="gs-card-img">
                <a href="#" tabindex="-1" aria-hidden="true">
                <img class="img-fluid mx-auto d-block" alt="" src="/documents/7946710/11242982/card-image-sample.jpg/593f4a3c-6d47-2982-aa2e-726c094e3723">
                </a>
            </div>
        </div>
        <!-- Card body -->
        <div class="gs-card-body">
            <h2 class="gs-title"><a href="#">Heading lorem ipsum dolor sit</a></h2>
            <p>Body text nulla vulputate feugiat erat, nec auctor diam.</p>
        </div>
    </div>
    <!-- Card -->
    <div class="gs-card rounded">
        <!-- Card top with image -->
        <div class="gs-card-top" style="position: relative;">
            <div class="gs-card-img">
                <a href="#" tabindex="-1" aria-hidden="true">
                <img class="img-fluid mx-auto d-block" alt="" src="/documents/7946710/11242982/card-image-sample.jpg/593f4a3c-6d47-2982-aa2e-726c094e3723">
                </a>
            </div>
        </div>
        <!-- Card body -->
        <div class="gs-card-body">
            <h2 class="gs-title"><a href="#">Heading lorem ipsum dolor sit</a></h2>
            <p>Body text nulla vulputate feugiat erat, nec auctor diam.</p>
        </div>
    </div>
    <!-- Card END -->
</div>