7 Complex block element

Complex blocks have disparate components or child elements only available to them.

Basic aside△

The basic aside provides sections and subsections with an aside.

While a normal aside only has a heading but can contain several other elements, a basic aside is essentially a combination of an normal aside with a figure. It consists of a heading, introduction, and an optional image with an optional quote. If there is no image, the introduction is presented as a sentence. The images are only selectable from the Card and Aside purpose types.

Their advantage is that they are more straightforward to set up. They are essentially the same as an article basic aside, except those are defined in the Basic aside section of the Article head page.

A basic aside is only allowed as the first block of a Section / subsection, and it can be its only one. If it has an image, that image will be shown in a Pop-in for any link that targets its section or subsection.

Button△

A button provides a means of sending information to a website without exposing it in the url.

Links are the backbone of the web, relying on their URL to supply all the information that the target site needs to show the requested page. However, if that information is confidential, using it in the URL risks it being exposed to third-parties. While using the https:// URL prefix makes sure that all but the domain name is encrypted while travelling between the browser and the site, the complete URL will be included in the site's server logs as well as browser histories, potentially exposing the confidential information to site staff and other computer users not meant to be privy to it.

The proper means to hide information being transmitted is to use the HTML form and button elements with several hidden input elements. The button element provides this, along with an optional rich-text Comment, centred on a page, as with:

AUD $30. Currency conversion.

A button's Label and URL must be specified for it to display. Its Values are entered in the form name=value, with each on a separate line. What they need to be named and their valid values will be described in the service provider's documentation. For help with some, professional services may need to be engaged. If being used as a link to an online store that needs a code to know that it came from your site, that code must be one of the Values.

Comment△

A comment can appear after the button.

The comment is for providing extra qualifying information, such as a price or link to a currency conversion page. Any breaks in the comment will cause it to wrap next to the button. If the comment does not all fit next to the button, it will be centred below it.

Styling for impact△

While the default styling of the button element allows it to be fairly visible on a page, it can be styled to be more impactful.

Calls to action are more visible with more pronounced styling. For example, the previous button with some styling is:

AUD $30. Currency conversion.

A Button's characteristics are defined in its Styling field in the form `bg tc fs br ab at`, where:
#	Value	Size	Description
a	bg	6	Background colour as lower-case hex characters. Can be `transparent` to use the background of the parent element
b	tc	6	Text colour as lower-case hex characters
c	fs	1	Font style as `n` for normal and `i` for italic
d	br	2	Border radius from `00` to `19` pixels
e	ab	6	Active background colour as lower-case hex characters. Can be `transparent` to use the background of the parent element. Optional
f	at	6	Active text colour as lower-case hex characters. Optional, but if to include, ab must be included

The active colours are for when the button is pressed. There are no borders when styled, except that hovering over it will show the blue halo around the edge. The Styling setting for the sample button is 0079c1 ffffff i 04 ffd140 00457c. The link, file, email and telephone functional inline elements can be similarly styled.

Some considerations are:

a.Some stylings may not fit with the current subsite theme. Choosing another theme may require tweaking the styling.
b.Except for a button, no spacing is added around the element, so it will have to be included in any surrounding text.
c.When only one of the backgrounds is transparent, the element is still the same size as when the other background is shown, otherwise the element would shift when clicked.