Page formatting

It is possible to modify the formatting of content on pages by using raw html. Here are some examples for how to modify the layout of content on your page.

Adding a lead paragraph#

Place {: .lead} after a paragraph to turn it into a “lead” paragraph. Eg:

Our community has built our identity. As early as our inception, our founders
agreed in order to create a genuine university community we needed more than
bricks and mortar.
{:.lead}

Our community has built our identity. As early as our inception, our founders agreed in order to create a genuine university community we needed more than bricks and mortar.

Multiple columns#

Multiple colums can be created by using the grid class. The number 2 in grid--2 says that this is a 2-column layout. Each <article> tag contains a single element. Each element will be placed in order into the column from left to right.

<div class="grid grid--2">
    <article>
        {% include youtube.html id="suv83zvEUgY" %}
    </article>
    <article>
        {% include youtube.html id="I2Vl_WhjZgU" %}
    </article>
</div>

Multple columns: text#

You can also put text inside your grid. Here’s an example of a 3 column layout with text items. Note that you need to define all text formatting with html tags too.

<div class="grid grid--3">
    <article>
        <h3>Tyra Petersen&mdash;Service Assistant Cadet</h3>
        <p>"Helping to make STEM a place where underrepresented people and groups can thrive is really important to me, and aligns with my passion of championing equal opportunity for all." <br /></p>
    </article>
    <article>
        <h3>Dr Catherine (Cathy) Ayres&mdash;Senior Project Officer</h3>
        <p>"I really care about research and education, and I think the best research and education comes from teams and communities that are truly equitable and inclusive, because it benefits the widest possible segment of our society." <br /></p>
    </article>
    <article>
        <h3>Megan Mayne&mdash;Project officer</h3>
        <p>"I've been supporting students in their learning at ANU for 10 years. In terms of positive experiences at uni and beyond, the community in which students learn, and their sense of belonging is every bit as important as their grades." <br /></p>
    </article>
</div>

Multiple columns: Cards#

This example shows the usage of cards in a column. If you want to list all subpages, you should use subpage cards instead. If however you want to display an individual page or other link, you can use include card.html directly like below.

Note: Cards can only hold 32 words in the text. They are not designed for large descriptions. If you need a large amount of text, you may be better suited using a paragraph and a button instead.

<div class="grid grid--2">
    <article>
        {% assign tagline= 'Ask about your study options, scholarships, accommodation, and student life.' %}
        {% include card.html title="Future students" subtitle="future.student@anu.edu.au" link_url="https://www.anu.edu.au/contact-anu/future-student-enquiry" text=tagline %}
    </article>
    <article>
        {% assign tagline= 'Speak to someone about collaboration and engagement opportunities. <br> businessdevelopment.cecc@anu.edu.au <br> +61 2 6125 6654' %}
        {% include card.html title="Industry and partners" subtitle="businessdevelopment.cecc@anu.edu.au" link_url="mailto:businessdevelopment.cecc@anu.edu.au" text=tagline %}
    </article>
</div>