Components
Discover all the different components that the Design System. Here you can find design and development files for each component, findings we’ve collected from performing user research as well as documentation to help teams adopt the design system for their projects. Components are the building blocks of Macquarie Universities applications, enabling designers and developers with ready-to-go interface elements.
Components in process
The following components are currently being designed and improved.
- Gallery
- Search filter
Recently released
| Component name | Version | Last released |
|---|---|---|
| Button | v3.1 | Yesterday |
| Graph | v3.1 | 11 March 2019 |
| Header | v3.1 | 3 March 2019 |
Appropriately interruptive
Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.
Focused
Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.
Dismissing banners
An alert remains on the screen until the user dismisses it.
Appropriately interruptive
Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.
Focused
Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.
Dismissing banners
An alert remains on the screen until the user dismisses it.
Appropriately interruptive
Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.
Focused
Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.
Dismissing banners
An alert remains on the screen until the user dismisses it.
Appropriately interruptive
Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.
Focused
Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.
Dismissing banners
An alert remains on the screen until the user dismisses it.
Focused
Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.
Dismissing banners
An alert remains on the screen until the user dismisses it.
Appropriately interruptive
Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.
Focused
Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.
Dismissing banners
An alert remains on the screen until the user dismisses it.
Appropriately interruptive
Alert flags interrupt the user. The urgency of the content contained in an alert must match the level of interruption caused and the context of the alert.
Focused
Only one message is contained in each alert. Information is succinct and clear. Users can easily interpret how to interact with the alert flag.
Dismissing banners
An alert remains on the screen until the user dismisses it.
Image Gallery
Gallery — Default
<div class="my-gallery my-gallery-2134143 grid grid--c20 grid--r20 gallery margin-btm--48" data-variable="2134143" data-layout="image-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<div class="grid__col--12 flex flex--center loader--wrap">
<div class="loader loader--spinner" role="status">
<span class="visually-hidden">Loading...</span>
<div class="loader__container" aria-hidden="true">
<div class="loader__layer">
<div class="loader__border"></div>
<div class="loader__clipper loader__clipper--left">
<div class="loader__circle"></div>
</div>
<div class="loader__patch">
<div class="loader__circle"></div>
</div>
<div class="loader__clipper loader__clipper--right">
<div class="loader__circle"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Gallery — Hero
<div class="my-gallery my-gallery-1231244 grid grid--c20 grid--r20 gallery margin-btm--48" data-variable="1231244" data-layout="image-gallery-hero" itemscope itemtype="http://schema.org/ImageGallery">
<div class="grid__col--12 flex flex--center loader--wrap">
<div class="loader loader--spinner" role="status">
<span class="visually-hidden">Loading...</span>
<div class="loader__container" aria-hidden="true">
<div class="loader__layer">
<div class="loader__border"></div>
<div class="loader__clipper loader__clipper--left">
<div class="loader__circle"></div>
</div>
<div class="loader__patch">
<div class="loader__circle"></div>
</div>
<div class="loader__clipper loader__clipper--right">
<div class="loader__circle"></div>
</div>
</div>
</div>
</div>
</div>
</div>