6 βBasic block element
Blocks are the full-width elements that provide the structure of and overall aesthetic of an article. Basic blocks are the less complex.
Simpleβ³
The simple blocks are just that!
- line
- Horizontal line like the one above this glossary, with a width of 40% of the page. Traditionally used to indicate a change of scene in a novel, but can be used to indicate a change in perspective in the narrative of an article.
- verse
- Up to 20 lines of plain text suitable for poetry or song lyrics.
Containersβ³
Containers provide a structure for presenting other blocks.
The master container is the
- a.
Section orsubsection β in a general article element. - b.
Information ,question orcomments β in a test article. - c.Step
action ,response ornotes β in a procedure article.
- aside
- Bordered area to the end-side of the page with a heading. Often used for pictures or other media. Not considered essential to the article, but providing some extra related information. Any following free-flowing elements will render to its starting side then go full-width after it. Only in a general article element.
- block quote
- Up to 20 paragraphs or verses that form an extended quote. There are two display modes. With an introduction, as when initially created, its children are indented and slightly smaller. If the introduction is deleted, monologue formatting is used, where all children are normal size with an opening quote, except the last which also has a closing quote. Only in a general article element.
- columns
- Up to two columns with a central border, for up to 20 verses or other simple blocks that would leave a lot of space on the page otherwise. Avoid if too many lines of verses in the columns wrap. Only in a general article element.
- example
- Introduced bordered area containing up to two other elements illustrating usage of them.
- glossary
- Introduced list of entries for terms, abbreviations or names, each with a rich-text description and an optional image. Only in a general article element.
- highlight
- Bordered area with background tint and a heading, filling 90% of the page width. Meant for up to two paragraphs of important information, though they can be buttons, perhaps with styling, to provide prominent calls to action.
- list
- Introduced list of rich-text items with bullets, numbers or letters at the start of each. See Linking to figures for how to link list items to figure labels.
- program
- Introduced set of lines of monospaced computer code, which can use the colour-selection facility of inline elements to provide colour-coded syntax.
Rich-textβ³
Rich-text blocks contain inline elements to provide text with formatting or special functionality.
Rich-text elements like paragraphs will make up the bulk of articles, though most will contain only one text element. However, multiple text elements can be used, so one could be used per sentence, making it easier to move them around while keeping their text together.
A paragraph, list item or glossary entry can have a card or aside thumbnail at its end, as here, that will expand when clicked on and retains focus, though they will need at least three lines of height so that the thumbnail does not protrude into the next block, possibly displacing it. A table cell can also have a thumbnail that expands, and it will be shown before other content.
In general, avoid ending rich-text elements with full stops,
as they will be appended as required when their page is viewed.
- paragraph
- Standalone workhorse rich-text element that can be used almost everywhere, unlike the remainder that are elements in more complex blocks.
- introduction
- To a
list ,table ,figure ,example ,diagram ,glossary ,program ,block quote ,diagram ,audio ,video orsequence . - list item
- Allows more than just plain-text lists.
- table cell
- Bordered area in a table, which, unlike other rich-text elements, can be left blank, as long as at least one on a row has content.
- glossary entry
- Like this one, with the term as its heading. See Glossary for how useful they can be for cataloging sets of information that can be directly linked to, as in this article.
- program line
- Monospaced text which can be colour-coded for highlighting syntax. Can be used with box-drawing
character s for simple diagrams, but the diagram element is more flexible and adapts to the reading direction. - statement
- Introduction for question options, allowing formatting and links in the questions, as do the
Incorrect andComments paragraphs in a test article. - step objective
- Statement of what the step is to achieve, while allowing formatting control names as references in a procedure article.
- footnote
- For comprehensive bibliographies with links, or extra information that may only be of interest to some readers. Though up to two can be inserted at the end of a paragraph, introducti
on, list item or table cell, only the footnote numbers are shown there when rendered, with the full text shown in the article footer. There are bi-directional links between the two parts for quick access and return.