To the 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 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.

Full-length gap closing diagramA 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.

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 elements in more complex 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
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 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 which can be colour-coded 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
Introduction for question options, allowing formatting and links in the questions, as do the Incorrect and Comments 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, 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.
Links   △Latest articles&β–³
  • β€’Procedure article element
  • β€’Complex block element
  • β€’General article element
  • Subsite linksβ–³
  • β€’
  • β€’Contact   Glossary   Policies
  • β€’Categories   Feed   Site map
  • Searchβ–³

    This site does not store cookies or other files on your device when visiting public pages.
    External sites: Open in a separate page, and might not respect your privacy or security. Visit them at your own risk.
    Powered by: Smallsite Design  ©Patanjali Sokaris   Manage\