Typography customisations
Contents
Examples
Text
.text-inverse inverts text for dark backgrounds
<div class="bg-inverse text-inverse">
<p>.text-inverse inverts text for dark backgrounds</p>
</div><div class="row">
<div class="col-xs-3">
<button class="btn btn-primary text-wrap">.text-wrap forces wrapping, especially on buttons</button>
</div>
</div>Blocks
Contact details
To RSVP, please visit http://web.jcu.io.
For further information, please contact example@jcu.edu.au.
<div class="block--dotted">
<h3>Contact details</h3>
<p>To RSVP, please visit <a href="http://web.jcu.io">http://web.jcu.io</a>.</p>
<p>For further information, please contact <a href="mailto:example@jcu.edu.au">example@jcu.edu.au</a>.</p>
</div>Bordered List (inside borders)
A border is present between each list item, and not present on the first or last item in a list. This is extended to create the Campus Stack.
- How do I apply at JCU?
- Where can I get support on campus?
- What is a supplementary exam?
<ul class="list-bordered">
<li>How do I apply at JCU?</li>
<li>Where can I get support on campus?</li>
<li>What is a supplementary exam?</li>
</ul>The border reflects the width of the list block, rather than the content:
- How do I apply at JCU?
- Where can I get support on campus?
- What is a supplementary exam?
<div class="row">
<div class="col-xs-4">
<ul class="list-bordered">
<li>How do I apply at JCU?</li>
<li>Where can I get support on campus?</li>
<li>What is a supplementary exam?</li>
</ul>
</div>
</div>