Card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options

Card 1

SG Design System

Card 2

SG Design System


Use this code snippet to any part of your project.

<div class="sgds-card">
    <div class="sgds-card-content">
        <p class="title">Card title</p>
        <p class="subtitle">SG Design System</p>
    <div class="sgds-card-footer">
        <div class="sgds-card-footer-item">
            <span><a href="">View</a></span>
        <div class="sgds-card-footer-item">
            <span><a href="">Share</a></span>


Card should:

  • Use headings that set clear expectations about its purpose
  • Prioritise information of the content so user know what comes first
  • Avoid too many call-to-action buttons and only one primary call-to-action per card


Having troubles with the guide? Please give us more details and we'll get back to you soon.

Tell us more