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
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
but sometimes.Learn more
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.
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 moreFeature two
All base UI elements are made using Nested Symbols and shared styles that are logically connected with one another.
Read moreFeature three
All base UI elements are made using Nested Symbols and shared styles that are logically connected with one another.
Read moreNarrow intro block
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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
- List Item 1
- List Item 2
- List Item 3
- List Item 1
- List Item 2
- 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
Small ButtonMedium Button
Medium ButtonLarge Button
Large ButtonTo display button ful width the extra class "btn-block" is added
Learn more about EventsEmail 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 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 qldwaterAdd cc, body text to the email
Adding cc and body text onto the html we are using.
Email UsSolid buttons with different link types in html
Link ButtonOutline buttons
Tabs content Pills & Tabs
Bootstrap 4 requires update to new tabs code
Link to tabs Tabs
Tab Heading A
Add module code hereTab Heading B
Add module code hereTab Heading C
Add module code hereTab Heading D
Add module code hereTab Heading E
Add module code hereTab Heading F
Add module code hereTab Heading G
Add module code hereTab Heading H
Add module code hereTab Heading I
Add module code hereTab Heading J
Add module code hereTab Heading K
Add module code hereTab Heading L
Add module code hereTab Heading M
Add module code hereAdding module code
From COMPONENTS on the top right of the WYSIWIG Editor, select CUSTOM MODULES
- Choose Source: Media Downloads
- Choose Layout: List
- Filter items: Category
- Filter Value: The name of the document(s)
- Sort by: Release Date
- Sort Order DESC
- Limit: Set to 100
- 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.
