6. 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 available from the Card and Aside purpose types.
Their advantage is that they are more straightforward to set up, but they must be the first block in the section or subsection. 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 a link to 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 logs as well as other possible locations, potentially exposing the confidential information to site staff 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. Smallsite Design's Button element provides this, along with an optional rich-text comment that can provide links, say to a site for exchange rate conversions, such as with:
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.
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:
| # | Value | Size | Description |
|---|---|---|---|
| a | bg | 6 | Background colour as lower-case hex characters |
| 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. 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. The Styling setting for the sample button is 428bca ffffff i 04 551177 ffff00. The link, file, mail and telephone functional inline elements can be similarly styled.