
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> <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>
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>
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>
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>
<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>
<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>
Faculty of Arts
Faculty of Arts
Faculty of Arts
Faculty of Arts
Faculty of Arts
Faculty of Arts
<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>
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>
Macquarie University
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>
1st Jan 2020 - 3rd Jan 2020
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>
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>
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>
<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>
<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>
<article class="card"> <div class="card__body"> <h3>Card Heading</h3> <a class="link--cta" href="#LINK">Learn more</a> </div> </article>
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