Card standard version 2
Last updated: 23/3/2023
Note: This is an older version. Please use the current card component
Core elements
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
- 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>