Bootstrap

Cards

A collection of Sage styled cards, created with custom code.

Asset cards

Asset cards are designed to link downloadable assets showing file type using icons and color-code.

These asset cards are expected to be used inside smaller container inside flexbox and side panel.

Introduction to Sage University

Lorem ipsum dolor sit amet
CTA
Sep 2, 2023

<div class="asset-card pdf bg-subtle"> <!-- available file types are pdf, doc, word, calendar, image, sheet -->
  <div class="card-heading">
    <h4>Introduction to Sage University</h4>
    <label class="type">Whitepaper</label> <!-- cateogry is mentioned here -->
  </div>
  <div class="card-body">Lorem ipsum dolor sit amet</div>
  <div class="card-footer">
    <a href="#">CTA</a>
    <div class="date">Sep 2, 2023</div>
  </div>
</div>

On page example

Example showing different types of asset cards pulled inside .flexbox .column-4 layout

Introduction to Sage University

Lorem ipsum dolor sit amet
CTA
Sep 2, 2023

Introduction to Sage University

Lorem ipsum dolor sit amet
CTA
Sep 2, 2023

Introduction to Sage University

Lorem ipsum dolor sit amet
CTA
Sep 2, 2023

Introduction to Sage University

Lorem ipsum dolor sit amet
CTA
Sep 2, 2023

Introduction to Sage University

Lorem ipsum dolor sit amet
CTA
Sep 2, 2023

Introduction to Sage University

Lorem ipsum dolor sit amet
CTA
Sep 2, 2023

Content cards

Use this card if any of the card doesn't have a CTA to link to.

Introduction to Sage University

The survey is now live! Please complete by Tuesday, May 23.
Learn more

<div class="content-card">
  <div class="card-heading">
    <img class="img-responsive" width="60" height="60"
      src="https://ux-repo.sage.com/spot-icons/accessibility/static/accessibility--over-light.svg"
      alt="">
    <h4>Introduction to Sage University</h4>
  </div>
  <div class="card-body">The survey is now live! Please complete by Tuesday, May 23.</div>
  <div class="card-footer">
    <a class="btn btn-link btn-sm" href="#">Learn more</a> <!-- other button styles are available -->
  </div>
</div>

Navigation cards

Use this for task navigation of the same type of tasks.

Submit a case

CTA

<div class="nav-card external case bg-dark-grey" data-bs-theme="dark"> <!-- use internal for internal links to control inline icon appended at the end of the heading -->
  <!-- available navigation types are form, page, case and secure -->
  <div class="card-heading">
    <h4>Submit a case</h4>
  </div>
  <div class="card-body"></div>
  <div class="card-footer">
    <a href="#">CTA</a>
  </div>
</div>

On page example

Example showing different types of navigation cards pulled inside .flexbox .column-4 layout

Submit a case

CTA

View existing cases

CTA

Closed cases

CTA

Submit a case

CTA

Shortcut cards

Use these for quick link between related sections. Serve these in a side panel.

FAQ

Frequently asked questions
Go to FAQ

<div class="shortcut-card bg-subtle">
  <div class="card-heading">
    <h4>FAQ</h4>
  </div>
  <div class="card-body body-sm">Frequently asked questions</div>
  <div class="card-footer">
    <img alt="" class="img-responsive"
      src="https://ux-repo.sage.com/spot-icons/mail box/static/mail-box--over-light.svg" width="60" height="60"> <!-- Spot icons are availabe from https://ux-repo.sage.com server following the same structure.  Find suitable icons from Digital Library and use here. -->
    <a href="#">Go to FAQ</a>
  </div>
</div>

Created and open sourced by the Bootstrap team. Sage branded by Central XD of Sage.