Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
Learn moreCard 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
<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>
Card Documentation
Use
Card headings should be kept short and have a character limitation
Card body text should be kept to max 3 lines and have a character limitation
Card link text should be kept to short and have a character limitation
Cards should use the grid to determine responsive layout
To make cards 100% height of their container add the class full-height
Images should be uploaded at 720px x 414px