Cards
A card is an element used to display one topic. Cards feature a call to action (CTA) link, typically combined with an image and brief descriptive text.
V2.0.1
Yesterday
Hierarchy
Cards are designed with hierarchy in mind. When a page uses cards, primary cards should always appear first. On mobile devices, cards are stacked one above the other. Horizontal card images do not appear on mobile devices to ensure they appear less prominent than primary cards.
Primary card
Primary cards will be the first cards displayed on any content page.
Principles
1 column page
- Minimum of 3
- Maximum of 4
- Maximum of 1 row only
3 column page
- Minimum of 2
- Maximum of 3 rows only
- Maximum of 6
Character count
- Heading - Recommended 25, 2 lines maximum, 50 maximum
- Description - 100 maximum
- CTA - 30 maximum, 1 line maximum
Image size requirements
- 507 x 290
Horizontal card
Horizontal cards appear after primary cards on a content page. They are particularly useful when there is only one item to display in a row.
Principles
1 column page
- Minimum of 2
- Maximum of 4
- Maximum of 2 row only
3 column page
- Minimum of 1
- Maximum of 3
- Maximum of 3 rows only
Character count
- Heading - Recommended 35, 1 maximum
- Description - 120 maximum, 3 lines maximum
- CTA - 40 maximum, 1 line maximum
Image size requirements
- 507 x 290
Card with image & link
This variety of card provides a high level of emphasis where there is no description required.
Principles
1 column page
- Minimum of 3
- Maximum of 4
- Maximum of 1 row only
3 column page
- Minimum of 2
- Maximum of 3 rows only
- Maximum of 6
Character count
- Heading - Recommended 25, 2 lines maximum, 50 maximum
- CTA - 40 maximum, 1 line maximum
Image size requirements
- 507 x 290
Gradient Image
These cards emphasise imagery, and can be used where no description is required.
Principles
1 column page
- Minimum of 3
- Maximum of 4
- Maximum of 1 row only
3 column page
- Minimum of 2
- Maximum of 3 rows only
- Maximum of 6
Character count
- Heading - Recommended 25, 1 lines maximum, 50 maximum
- CTA - 40 maximum, 1 line maximum
Image size requirements
- 349 x 243
Lighthouse Image
This card is used exclusively for Lighthouse feed items.
Principles
1 column page
- Minimum of 6
- Maximum of 6
- Maximum of 2 rows only
3 column page
- Minimum of 3
- Maximum of 3
- Maximum of 1 row only
Character count
- Descriptor tag - Recommended 25 (will truncate)
- Heading - Recommended 25, 2 lines maximum, 50 maximum
- CTA - 40 maximum, 1 line maximum
Image size requirements
- 509 x 350
Simple card
This card displays lower-order information with no need for an image.
Card Heading
GEM is Macquarie University’s design system for digital products and experiences.
Learn morePrinciples
1 column page
- Minimum of 2
- Maximum of 4
- Maximum of 1 row only
3 column page
- Minimum of 2
- Maximum of 6
- Maximum of 3 rows only
Character count
- Heading - Recommended 25, 1 lines maximum, 50 maximum
- Description - 100 maximum
- CTA - 40 maximum, 1 line maximum
Faculty list
These cards were designed to display faculty or department lists, where only a link title is required.
Principles
1 column page
- Minimum of 5
- Maximum of 18
- Maximum of 2 rows only
3 column page
- Minimum of 3
- Maximum of 18
- Maximum of 4 rows only
Character count
- Heading - 55 maximum
Functionality
A card's only interactive element is its CTA link. Cards should never contain swipeable content.
Placement
Cards are consistently spaced according to the grid. They should never overlap, or displace other elements. Each type of card has a maximum height; cards do not stagger when displayed.
Imagery
Card images serve to communicate the content that will be found when users click them.
Card Styles
Card Primary (Default)
<article class="card">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.</p>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
Card Secondary
Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
Learn more
<article class="card card--secondary">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg" alt="sample alt text" aria-hidden="false">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.</p>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
Card Borderless
Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
<article class="card card--no-border">
<div class="card__img">
<img src="http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.</p>
</div>
</article>
Card Borderless with Subheading
Card Heading
Subheading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
<article class="card card--no-border">
<div class="card__img">
<img src="http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<h3>Card Heading</h3>
<h5>Subheading</h5>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.</p>
</div>
</article>
Card with Image and Link
Card Heading
Learn more
<article class="card">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg" alt="sample alt text" aria-hidden="false">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
Image Card
Lorem ipsum dolor
Learn more
<article class="card card--image">
<a href="#LINK" class="card__link">
<div class="card__container">
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Lorem ipsum dolor</h3>
<span class="link--cta link--cta--white">Learn more</span>
<div class="card__image" style="background-image:linear-gradient(0deg,rgba(0,0,0,.82) 25%,transparent), url(http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg);"></div>
</div>
</div>
</a>
</article>
Image Lighthouse Card
Faculty of Arts
Eco-tech investments could get a boost from school strike
Faculty of Arts
Eco-tech investments could get a boost from school strike
Faculty of Arts
Eco-tech investments could get a boost from school strike
Faculty of Arts
Eco-tech investments could get a boost from school strike
Faculty of Arts
Eco-tech investments could get a boost from school strike
Faculty of Arts
Eco-tech investments could get a boost from school strike
<div class="card--lighthouse">
<article class="card card--image">
<a href="#LINK" class="card__link">
<div class="card__container feed__module">
<div class="card__body">
<i class="icon icon--shard"></i>
<p class="card__faculty margin-top--12">Faculty of Arts</p>
<div class="sub__container">
<h3>Eco-tech investments could get a boost from school strike</h3>
</div>
<span class="link--cta link--cta--white">Learn more</span>
<div class="card__image" style="background-image:linear-gradient(0deg,rgba(0,0,0,.82) 25%,transparent), url(http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg);"></div>
</div>
</div>
</a>
</article>
</div>
Horizontal Card
Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
Learn more
<article class="card card--horizontal">
<a href="#LINK" class="card__link">
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting. </p>
<span class="link--cta">Learn more</span>
</div>
<div class="card__img">
<div style="background-image:url(http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg);"></div>
</div>
</a>
</article>
News Card
Macquarie University
Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
Learn more
<article class="card">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<p class="card__detail">Macquarie University</p>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting. </p>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
Event Card
1st Jan 2020 - 3rd Jan 2020
Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
Learn more
<article class="card">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="http://dev.mq.edu.au/uat-landing/gem/gem-website/website/gemportal/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<p class="card__detail">1st Jan 2020 - 3rd Jan 2020</p>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting. </p>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
Card Simple
Card Heading
GEM is Macquarie University’s design system for digital products and experiences.
Learn more
<article class="card card--simple">
<div class="card__body">
<h3>Card Heading</h3>
<p>GEM is Macquarie University’s design system for digital products and experiences. </p>
<a href="#LINK" class="link--cta">Learn more</a>
</div>
</article>
Card no image
Card Heading
GEM is Macquarie University’s design system for digital products and experiences.
Learn more
<article class="card">
<div class="card__body">
<h3>Card Heading</h3>
<p>GEM is Macquarie University’s design system for digital products and experiences. </p>
<a href="#LINK" class="link--cta">Learn more</a>
</div>
</article>
Card with List
Smart Green Cities
- Building E8C Room 153
- Macquarie University NSW 2109
- Phone: + 61 2 9850 4258
<article class="card">
<div class="card__body">
<h3>Smart Green Cities</h3>
<ul>
<li>Building E8C Room 153</li>
<li>Macquarie University NSW 2109</li>
<li>Phone: + 61 2 9850 4258</li>
</ul>
</div>
</article>
Card with Links
Useful Links
<article class="card">
<div class="card__body">
<h3>Useful Links</h3>
<ul>
<li><a class="link--cta" href="#LINK">Our projects</a></li>
<li><a class="link--cta" href="#LINK">Our people</a></li>
<li><a class="link--cta" href="#LINK">Publications</a></li>
<li><a class="link--cta" href="#LINK">Opportunities</a></li>
<li><a class="link--cta" href="#LINK">Contact us</a></li>
</ul>
</div>
</article>
Card Link
Card Heading
Learn more
<article class="card">
<div class="card__body">
<h3>Card Heading</h3>
<a class="link--cta" href="#LINK">Learn more</a>
</div>
</article>