9 WYSIWYG
Various styles suitable for use in a WYSIWYG.
9.1 Inline icons View in a new window
Icons can be used inline with any element, using the markup below. See the icon component for a detailed list of all available icon CSS classes.
Twig: wysiwyg/inline-icons.twig
Text with an inline icon
Text with a prepended icon
Text with an appended icon
Markup
<p>Text with an inline <span class="icon icon--inline icon--rsvp-blue"></span> icon</p>
<p><span class="icon icon--inline icon--calendar-blue"></span> Text with a prepended icon</p>
<p>Text with an appended icon <span class="icon icon--inline icon--arrow-blue-right"></span></p>
9.2 Date/Time View in a new window
Style any text to look like a date.
Twig: wysiwyg/date.twig
31 December, 2020
Markup
<p class="time">31 December, 2020</p>
9.3 Block title View in a new window
This is an uppercase title style used primarily on generic info blocks.
As illustrated in the example, all heading levels will use the same margin and text size when this class is used.
Twig: wysiwyg/block-title.twig
h1 Block title style
h2 Block title style
h3 Block title style
h4 Block title style
h5 Block title style
h6 Block title style
Markup
<h1 class="block-title">h1 Block title style</h1>
<h2 class="block-title">h2 Block title style</h2>
<h3 class="block-title">h3 Block title style</h3>
<h4 class="block-title">h4 Block title style</h4>
<h5 class="block-title">h5 Block title style</h5>
<h6 class="block-title">h6 Block title style</h6>
9.4 Button View in a new window
A simple button link.
Twig: wysiwyg/inline-button.twig
Markup
<p><a class="button" href="#">Button</a></p>
9.5 Image Floats View in a new window
Floated image, left and right. Image is 250px fixed width when floated.
Twig: wysiwyg/floated.twig
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Markup
<img class="{{ modifier_class }}" src="http://placeholder.it/400x300" alt="">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
9.6 Box Floats View in a new window
Float a block to the right or left of other content.
The class can be added to a <p> or <div> to make it stand out.
To add titles <h1>, <h2>, <h3> etc... wrap the content in a <div> with the float classes.
Twig: wysiwyg/box-floated.twig
Cras mattis consectetur purus sit amet fermentum. This is a link in a nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. This is a link in a box--float-right nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. This is a link in a box--float-left nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. This is a link in a box--float-right box--blue nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. This is a link in a box--float-right box--bordered nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. This is a link in a box--float-right box--black nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Markup
<p class="{{ modifier_class }}">
Cras mattis consectetur purus sit amet fermentum. <a href="#">This is a link in a {{ modifier_class }}</a> nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
</p>
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
9.6.1 Box Float - Example with Left and Right. View in a new window
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Title text example
Cras mattis consectetur purus sit amet fermentum. This is a link Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Title text example
Cras mattis consectetur purus sit amet fermentum. This is a link Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Markup
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
<div class="box--float-right">
<h3>Title text example</h3>
<p>Cras mattis consectetur purus sit amet fermentum. <a href="#">This is a link</a> Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
</div>
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
<div class="box--float-left box--bordered">
<h3>Title text example</h3>
<p>Cras mattis consectetur purus sit amet fermentum. <a href="#">This is a link</a> Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
</div>
<p>Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
9.7 Responsive table View in a new window
Use the .js-table--responsive class on the table element to assist mobile
phone users read long tables.
Twig: wysiwyg/js-table.twig
| Name | Unit | Position |
|---|---|---|
| Adair, Daryl | Management Discipline Group | Associate Professor |
| Adriaanse, Johanna | Management Discipline Group | Associate of the faculty |
| Agarwal, Renu | Management Discipline Group | Associate Professor |
Markup
<table class="js-table--responsive">
<caption>A table caption</caption>
<thead>
<tr>
<th>Name</th>
<th>Unit</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Adair, Daryl</a></td>
<td>Management Discipline Group</td>
<td>Associate Professor</td>
</tr>
<tr>
<td><a href="#">Adriaanse, Johanna</a></td>
<td>Management Discipline Group</td>
<td>Associate of the faculty</td>
</tr>
<tr>
<td><a href="#">Agarwal, Renu</a></td>
<td>Management Discipline Group</td>
<td>Associate Professor</td>
</tr>
</tbody>
</table>
9.8 Table cell widths View in a new window
There are five different preset widths you can apply to table cells (td
element). They are:
.table--cell-width-s- 190px (Fixed).table--cell-width-m- 25%.table--cell-width-l- 37.5%.table--cell-width-xl- 50%.table--cell-width-xxl- 75%
Apply classes to table cells in one row (tr element) only.
Twig: wysiwyg/td-widths.twig
| Name | Unit | Phone |
|---|---|---|
| Adair, Daryl | Management Discipline Group | 0422 555 666 |
| Adriaanse, Johanna | Management Discipline Group | 0422 333 555 |
| Agarwal, Renu | Management Discipline Group | 0433 555 666 |
Markup
<table>
<thead>
<tr>
<th>Name</th>
<th>Unit</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table--cell-width-xl"><a href="#">Adair, Daryl</a></td>
<td class="table--cell-width-m">Management Discipline Group</td>
<td class="table--cell-width-m">0422 555 666</td>
</tr>
<tr>
<td><a href="#">Adriaanse, Johanna</a></td>
<td>Management Discipline Group</td>
<td>0422 333 555</td>
</tr>
<tr>
<td><a href="#">Agarwal, Renu</a></td>
<td>Management Discipline Group</td>
<td>0433 555 666</td>
</tr>
</tbody>
</table>
9.9 Collapsible (Accordion) View in a new window
Use the .js-collapsible class on a h3 element (only). The next elements
until a h2 or h3 tag will become the contents of the collapsible
automatically.
Twig: wysiwyg/collapsible-example.twig
Title
Donec sed odio dui. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.
Title
Donec sed odio dui. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.
H2 title
Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.
Markup
<h3 class="js-collapsible">Title</h3>
<p>Donec sed odio dui. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.</p>
<h3 class="js-collapsible">Title</h3>
<p>Donec sed odio dui. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.</p>
<h2>H2 title</h2>
<p>Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.</p>
9.99 Generic info block examples View in a new window
Examples of classes used inside a WYSIWYG field to produce different results with generic info blocks
9.99.1 Example 1 - Standard View in a new window
A block that replicates an event
Twig: wysiwyg/promo-example-event.twig
3 April, 2017
Postgraduate info session
Speak to course coordibators, receive academic advice, explore our state-of-the-art teaching spaces and apply for free on the night.
Markup
<div class="promo promo--info promo--white">
<p class="time">3 April, 2017</p>
<h3><a href="#">Postgraduate info session</a></h3>
<p>Speak to course coordibators, receive academic advice, explore our state-of-the-art teaching spaces and apply for free on the night.</p>
</div>
9.99.2 Example 2 - Supplementary View in a new window
Another event, with a different style.
Twig: wysiwyg/promo-example-event-2.twig
26 August, 2017
UTS Open Day
With over 200 talks, tours and activities on offer, UTS Open Day is your chance to explore your course and career options.
Markup
<div class="promo promo--info-alt promo--white">
<p class="time">26 August, 2017</p>
<h3><a href="#">UTS Open Day</a></h3>
<p>With over 200 talks, tours and activities on offer, UTS Open Day is your chance to explore your course and career options.</p>
</div>