Dates & times

Dates may be formatted as per the ANU homepage, with a large number for the date, and a smaller month (and year) underneath.

For advice on the appropriate form of dates and times see the editorial style guide.

Dates

15

Jan

2010

To achieve this, use the following code:


<div class="dateblock">
    <div class="day">15</div>
    <div class="month">Jan</div>
    <div class="year">2010</div>
</div>

The year class is optional - it is generally not necessary to display the year on a homepage or block that only shows a few events. Year is only really needed in archives where it is possible that multiple years are displayed.

The text alongside the date block should be wrapped in a div with the class datetext. This stops the text from moving underneath the date. Links within a datetext block will only be underlined on hover.

15

Jan

Some descriptive text near the date


    <div class="dateblock">
        <div class="day">15</div>
        <div class="month">Jan</div>
    </div>
    <div class="datetext">
        <p>Some descriptive text near the date</p>
    </div>

Week

1

2013

A generic block, with a top, middle and bottom label.


    <div class="dateblock">
        <div class="top-label">Week</div>
        <div class="middle-label">1</div>
        <div class="bottom-label">2013</div>
    </div>
    <div class="datetext">
        <p>A generic block, with a top, middle and bottom label.</p>
    </div>

Optionally, a faint vertical line can be added between the date and the text. To achieve this, use the class dateblock-line.

15

Jan

Some descriptive text near the date in a narrow div.


    <div class="dateblock-line">
        <div class="day">15</div>
        <div class="month">Jan</div>
    </div>
    <div class="datetext">
        <p>Some descriptive text near the date in a narrow div.</p>
    </div>

Times

You can also insert a time into a dateblock, or use the time alone in a time.

10.00 am

15

January

A dateblock showing the time first


    <div class="dateblock">
        <div class="time">10.00 am</div>
        <div class="day">15</div>
        <div class="month">January</div>
    </div>
    <div class="datetext">
        <p>A dateblock showing the time first </p>
    </div>

10.00 am

15

January

A dateblock showing the time first, with a faint vertical line


<div class="dateblock-line">
    <div class="time">10.00 am</div>
    <div class="day">15</div>
    <div class="month">January</div>
</div>
<div class="datetext">
    <p>A dateblock showing the time first, with a faint vertical line</p>
</div>

10.00 am

A block that is just for time only


<div class="timeblock">
    <div class="timestart">10.00 am</div>
</div>
<div class="timetext">
    <p>A block that is just for time only</p>
</div>

We support multiple styles of Dates & Times. Dates & Times classes can be quite handy for Events, News, Key dates, etc.

For advice on the appropriate form of dates and times see the editorial style guide.

General
Use cases
Style usage

Available Classes - Dates

Example date block

15

Jan

2010

Some descriptive text near the date.

Parent container class	Child class name	Description	Required field	Note
`.dateblock` or `.dateblock-line`		This is a parent container class	Required	`.dateblock` must be included when using any following classes. Alternatively, you can use `.dateblock-line` which will append a faint vertical separator between dateblock and datetext.
	`.day`	Display date	Optional	Should be a number from 1-31
	`.month`	Display month	Optional	Should be one of the following: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.
	`.year`	Display date	Optional	It is generally not necessary to include the year field. Year is only really needed in scenarios like archives, where you need to distinguish between different published years, etc.
	`.top-label`	Small text displayed above the middle label	Optional	A more generic structure, should be used with `.middle-label` and `.bottom-label`. You can use this class to display information like weeks, etc.
	`.middle-label`	Enlarged text displayed in the middle of the dateblock	Optional	A more generic structure, should be used with `.top-label` and `.bottom-label`. This class should be used to display numbers as well.
	`.bottom-label`	Small text displayed below the middle label	Optional	A more generic structure, should be used with `.top-label` and `.middle-label`. You can use this class to display information like year, etc.
`.datetext`		Parent container class	Optional	Display some descriptive text next to the dateblock.

Available Classes - Times

Example time block

10:00am

Some descriptive text near the date.

Parent container class	Child class name	Description	Required field	Note
`.timeblock`		This is a parent container class	Required	`.timeblock` should be used when you wish to display time only. If you want to include date information as well, please use `.dateblock`, where you can use `top-label` to insert time.
	`.timestart`	Display event start time	Required	The time format should be HH.MM am or HH.MM pm
`.timetext`		Parent container class	Optional	Display some descriptive text next to the timeblock.

Tips & Tricks

Wrapping dateblock/timeblock into a div container

All date and time classes are float elements, so if you wish to put a dateblock or a timeblock inside a wrapper div container, you will also need to float the wrapper container to either .left or .right. Otherwise, the elements won't be aligned correctly. See below as an example:

15

Jan

Some descriptive text near the date.

with .left added to the wrapper div container

15

Jan

Some descriptive text near the date.

without .left added to the wrapper div container

Including multiple entries of dateblocks/timeblocks

You may find multiple entries of dateblocks/timeblocks with short descriptive texts will make your layout collapse, where individual blocks will not align correctly.

15

Jan

Some descriptive text near the date.

15

Jan

Some descriptive text near the date.

Dateblocks collapsed, without proper style classes.

15

Jan

Some descriptive text near the date.

15

Jan

Some descriptive text near the date.

Dateblocks aligned correctly with .clear added to the wrapper div container

Use cases

Example 1: Dateblock with date, month, year and descriptive text.

15

Jan

2010

Some descriptive text near the date.

Code structure


                    <div class="dateblock">
                        <div class="day">15</div>
                        <div class="month">Jan</div>
                        <div class="year">2010</div>
                    </div>
                    <div class="datetext">
                        <p>Some descriptive text near the date.</p>
                    </div>

Example 2: Dateblock with week, year and descriptive text.

Week

1

2013

A generic block, with a top, middle and bottom label.

Code structure


                    <div class="dateblock-line">
                        <div class="top-label">Week</div>
                        <div class="middle-label">1</div>
                        <div class="bottom-label">2013</div>
                    </div>
                    <div class="datetext">
                        <p>A generic block, with a top, middle and bottom label.</p>
                    </div>

Example 3: Dateblock with time, date, month and descriptive text.

10.00am

15

January

A generic block, with a top, middle and bottom label.

Code structure


                    <div class="dateblock">
                        <div class="top-label">10.00 am</div>
                        <div class="middle-label">15</div>
                        <div class="bottom-label">January</div>
                    </div>
                    <div class="datetext">
                        <p>A dateblock showing the time first</p>
                    </div>

Example 4: Timeblock with start time, and descriptive text.

10.00am

A block that is just for time only

Code structure


                    <div class="timeblock">
                        <div class="timestart">10.00 am</div>
                    </div>
                    <div class="timetext">
                        <p>A block that is just for time only</p>
                    </div>

Style usage

1. Lastest news section on the side bar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

News

15

Jan

2022

Update on hail repairs - Chifley Library »

15

Jan

2022

Update on hail repairs - Chifley Library »

15

Jan

2022

Update on hail repairs - Chifley Library »

2. Event grid with date overlay (2 columns)

Placeholder images

15

Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Placeholder images

15

Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3. Event grid with date overlay (3 columns)

Placeholder images

15

Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Placeholder images

15

Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Placeholder images

15

Jan

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.