To main heading

Smallsite Design

Online editing help

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!


The simple block elements are:

β–³
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 Article element, and depending upon its type, some elements are allowed within it. Many of those elements are containers themselves.

The containers that are part of more complex blocks are:

  1. a.Section or subsection – in a general article element.
  2. b.Information, question or comments – in a test article.
  3. c.Step action, response or notes – in a procedure article.

The container block elements that can be used in many other containers are:

β–³
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 50 verses or paragraphs 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 in Media element for how to link list items to figure labels.
program
Introduced set of lines of monospaced computer code, which can use the colour-selection of the text element 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.

Full-length gap closing diagramA paragraph 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 a paragraph needs at least three lines so that the thumbnail doesn't protrude into the next block. Also, see Full stops for how Smallsite Design applies them in relation to rich-text elements.

No final full stop

In general, avoid ending rich-text elements with full stops,
as they will be appended as required when their page is viewed.


The rich text elements are:

β–³
paragraph
Standalone workhorse rich-text element that can be used almost everywhere, unlike the remainder that are part of other blocks.
introduction
To a list, table, figure, example, diagram, glossary, program, block quote, diagram, audio, video or sequence.
list item
Allows more than just plain-text lists.
table cell
Unlike other rich-text elements, table cells can be left blank, as long as at least one on a row has content.
glossary entrySplit-gap closing diagram
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 with colour-coding for highlighting syntax. Can be used with box-drawing characters for simple diagrams, but the diagram element is more flexible and adapts to the reading direction.
statement
Allows for formatting and links in the questions, as well as the in the Incorrect and Comments paragraphs, in a test article.
step objective
Allows linking to other procedures and 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, introduction, 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.
  • β€’Table element
  • β€’Sequence element
  • β€’Procedure article element
  • β€’Contact   Glossary   Policies
  • β€’Categories   Feed   Site map

  • This site doesn't store cookies or other files on your device when visiting public pages.
    External sites: Open in a new tab or window, and might store cookies or other files on your device. Visit them at your own risk.
    Powered by: Smallsite Design ©Patanjali Sokaris