Template Elements

Medium length display headline

See also the wide template elements that sit in "section" tags to fill the entire page width.

Separated they live in Books,
but sometimes. Learn more

Medium length display headline

Separated they live in Bookmarks right at the coast of the famous Semantics, large language ocean Separated they live in Bookmarks right

Separated they live in Books,
but sometimes.Learn more
07 3632 6850

Grids

Applying class of "bg-light" gives coloured light grey background. Apply this to a "section" tag that spans the width of the page. The tag has been applied to this column, but it does not work correctly. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
See also wide template elements that have sections to fill the page edge to edge. Add "p-5" class for padding makes a nice margin inside the grey area too.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Feature one

All base UI elements are made using Nested Symbols and shared styles that are logically connected with one another.

Read more

Feature two

All base UI elements are made using Nested Symbols and shared styles that are logically connected with one another.

Read more

Feature three

All base UI elements are made using Nested Symbols and shared styles that are logically connected with one another.

Read more
By signing in you agree with the Terms and Conditions and Privacy Policy

Basic Elements

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.,eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at,commodo vitae,feugiat in,nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at,tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


List Types

Definition List

Horizontal Definition Lists

User Agent
An HTML user agent is any device that interprets HTML documents.
Client-side Scripting
Client-side scripting generally refers to the category of computer programs on the web that are executed by the user's web browser.
Document Tree
The tree of elements encoded in the source document.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at,tincidunt nec, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi,imperdiet at,incidunt nec,gravida vehicula,nisl. Praesent mattis,massa quis luctus fermentum,turpis mi volutpat justo,eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem,consequat at,nunc. Morbi imperdiet augue quis tellus. AVE


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

qwater buttons

Keep in mind how much text you add to each size button. Widths are coded in bootstrap for specific sizes, so if you text is longer, the button will be wider.


Small Button

Sml

Medium Button

Med

Large Button

Large

To display button ful width the extra class "btn-block" is added

Learn more about Events

Email links using Treepl editor

Some editing code blocks when you want to add in email links from html code. Using Treepl editor copy these code blocks

Basic email only link

Open default mail program, create new message with the TO field already filled out.

Email qldwater

Email address + Adding a subject

Opens default mail program, create new message with the TO and SUBJECT field already filled out. Essentially we are adding the parameter subject to the href value. Spaces in the subject will probably work OK, but to be super-extra sure, you can replace spaces with "%20".

Email qldwater

Add cc, body text to the email

Adding cc and body text onto the html we are using.

Email Us

Solid buttons with different link types in html

Link Button

Outline buttons


Tabs content Pills & Tabs

Bootstrap 4 requires update to new tabs code


Link to tabs Tabs


Tab Heading A

Add module code here

Tab Heading B

Add module code here

Tab Heading C

Add module code here

Tab Heading D

Add module code here

Tab Heading E

Add module code here

Tab Heading F

Add module code here

Tab Heading G

Add module code here

Tab Heading H

Add module code here

Tab Heading I

Add module code here

Tab Heading J

Add module code here

Tab Heading K

Add module code here

Tab Heading L

Add module code here

Tab Heading M

Add module code here

Adding module code

From COMPONENTS on the top right of the WYSIWIG Editor, select CUSTOM MODULES 

  1. Choose Source: Media Downloads
  2. Choose Layout: List
  3. Filter items:  Category
  4. Filter Value:  The name of the document(s) 
  5. Sort by: Release Date
  6. Sort Order DESC
  7. Limit: Set to 100
  8. Click the blue code to copy to your clipboard.





Give us your feeback

Your feedback help us develop our systems and services now and for the future. Let us know what you think. If your feedback required a response, we will be in contact.

Your feedback helps us develop and deliver our systems for now and the future

Do you have feedback on the chemicals availability and suppliers list?