Tenancy Logos
Course & Program Images
Acorn Widget Dashboard
Image Widget Desktop
Image Widget Mobile
Image Widget Desktop & Mobile
Slider Widget Desktop
Slider Widget Desktop & Mobile
Tenancy Logo
Location
The tenancy logo appears in the top left corner of your Acorn tenancy.
Image Size
We recommend using inline logos for the tenancy, as stacked logos may be cut off or appear too small within the image frame.
-
Minimum logo height: 100px
-
Maximum aspect ratio: 4:1(width) to the fit header
-
Include a 40px border around the logo for
optimal positioning
File Size & Format
The maximum file size is 400MB, though we recommend keeping the logo file under 100MB when possible.
Accepted file formats: PNG, JPG, GIF.
Tenancy Reverse Logo
This logo appears on darker backgrounds, such as the Capability Assessment and similar screens. Please use a reverse or light-coloured logo in the same size as your tenancy logo.
Course and Program Images
These images appear on the course page, program page and course catalogue.
Image Size
Recommended image size is 1080px wide and 608px high (maintaining a 1.7:1 image ratio)
File Size & Format
The maximum file size is 400MB, however we’d recommend keeping your image file below 100MB whenever possible.
The image uploader accepts PNG, JPG and GIF files.
Safezone
For margin of error, we recommend leaving a safe zone’ of 30-50px around the outside of each image widget to ensure text is not cut off by the image cropper during upload.
Acorn Widget Dashboard
Columns
The dashboard is divided into four columns, with a 10px gap between each. As you add widgets, they can be dragged to span one, two, three, or all four columns. The exact width of the columns depends on your screen size, which is why we recommend using image size ratios in addition to pixel dimensions.
Some widgets have a minimum size that requires them to span two or more columns due to content needing more space. If a widget cannot be resized smaller, it’s likely already at its minimum size.
What does ‘4/4’ mean?
Throughout this guide, you'll see terms like ‘1/4’, ‘1/2’, ‘2/4’, ‘3/4’, and ‘4/4’. These indicate how many columns the widget spans, as shown in the diagram on the right.
Widget Height
While widgets often have a minimum height, they can be expanded to almost any height from there, allowing you to customise the layout to suit your needs.
Images Widgets for Desktop
The Image Widget is one of the most versatile widgets in the Widget Dashboard. From showing important content to acting as a link to internal or external content, this widget can do it all!
Image Size
If your users will be mainly using laptop or desktop computers to access the dashboard, we recommend the following selection of image ratios suggested for different widget sizes. As the height of the image block is fairly flexible to allow for customisation, we’ve included a recommended minimum height:width ratio on each block as well as recommended sizes for clarity across a range of device sizes.
For mobile applications, please see Image Widgets: Mobile, or Desktop & Mobile if you need the design to work for all devices.
Safezone
For margin of error, we recommend leaving a ‘safe zone’ of 30-50px around the outside of each image widget to prevent content from being cut off. However depending on the size of your widget, you may need to refine this further!
Image Widgets for Mobile
The Image Widget is one of the most versatile image widgets in the Widget Dashboard. From showing important content to acting as a link to internal or external content, this widget can do it all!
Image Size
If your users will be mainly using mobile devices to access the dashboard, we recommend the following selection of image ratios suggested for different widget sizes. As the height of the image block is fairly flexible to allow for customisation, we’ve included a recommended minimum height:width ratio on each block as well as recommended sizes for clarity across a range of device sizes.
For desktop applications, please see Image Widgets for Desktop above, or Desktop & Mobile below if you need the design to work for all devices.
Safezone
For margin of error, we recommend leaving a ‘safe zone’ zone of 30-50px around the outside of each image widget to prevent content from being cut off. However depending on the size of your widget, you may need to refine this further!
Image Widgets for Desktop & Mobile
Multiple Screen Sizes
If you’re aiming to use the same dashboard for both mobile and desktop, we recommend using an image tile ratio of 1.8:1 for taller widget blocks or 3:1 for a more narrow image block, depending on the desired widget height.
Once you’ve imported the image tile into your dashboard, you can use the mobile and desktop views to adjust the widget style and placement to best suit your dashboard.
Safezone
In order to prevent content from being cut off on most device sizes, we recommend a safe margin of 100px on the left and right sides of your image. However depending on the size of your widget, you may need to refine this further!
Slider Widget for Desktop
Slider Widgets
The Slider Widget is your go-to for organisation wide announcements and news updates. We recommend using it to feature new content, programs or news, it’s a versatile widget!
Image Size
The slider widget can be set to be full width, two thirds or half the width of the dashboard with a minimum height of 100px. For best resolution, we recommend using a 3:1 width vs height ratio based off your desired image height.
You can also set your slider to have an additional content space on the left or right side of the widget. You can change the text on these areas independently from the image.
For mobile applications, please see Slider Widgets: Desktop & Mobile
For mobile applications, please see Slider Widgets for Desktop & Mobile.
Safezone
For margin of error, we recommend leaving a ‘safe zone’ of 50px around the outside of each image widget to prevent content from being cut off.
Slider Widget for Desktop & Mobile
Multiple Screen Sizes
If you’re aiming to use the same dashboard for both mobile and desktop, we recommend using an image tile ratio of 1.8:1 or 3:1 depending on the desired image height.
Once you’ve imported the image tile into your dashboard, you can use the mobile and desktop views to adjust the tile width in the layout to your preferred style.
Safezone
In order to prevent content from being cut off on most device sizes, we recommend a safe margin of 50-100px on the left and right sides of your image. However depending on the size of your widget, you may need to refine this further!
You can also download a PDF version of this guide below if you wish to view it this way instead.
Attachments