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

                        <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

sample alt text

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

sample alt text

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

                        <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

                            <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

                        <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

                        <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

                        <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

                        <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

                        <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

                        <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