Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Design handover & standards
  • Colours
  • Typography
  • Buttons and links
  • Lists
  • Icons
  • Breakpoints
  • Vertical spacing
  • Hide and show items inclusively
  • Skip link
  • Images
  • Forms
  • Form error messages
  • Tables
  • Blockquotes
  • Details and summary
  • Utility classes
  • Flow elements
  • Print styles

Flow elements

These are elements that are used in the body of documents and applications.

This page provides examples of how Amplify does (or doesn't) style some of the more common flow elements that are not covered in more detail elsewhere.

This paragraph contains a selection of HTML5 elements, such as emphasis, strong, and small. You can also use keyboard text, which sometimes is styled similarly to the code or samp elements. Even more specifically, there is an element just for variables. And let's not forget the sub (H2O) and sup (E = MC2) elements.

abbr: Some vehicles meet the SULEV standard.
br was used to make this sentence start on a new line.

em is used for emphasis and usually renders as italics, contrast that with i which is used for alternate voice or to offset from the normal (such as a phrase from a different language or taxonomic designation): E. coli can be bad. strong is used for importance or urgency and usually renders as bold, contrast that with b which is used to draw attention without the semantic meaning of importance.

cite: In the words of Charles Bukowski — An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.

q: The W3C page About W3C says the W3C’s mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

sub is used for subscripts: H2O. sup is used for superscripts: E = MC2.

small is used for side comments: I wrote this whole document. [Editor's note: no they did not]

dfn: Foreign phrases add a certain je ne sais quoi to one's prose.

time: use for specifying 5 A.M. in a machine-readable format.

kbd and samp: I did this:

c:\>format c: /yes

Is that bad? Press Ctrl+F5 for a hard reload.

var: To log in, type ssh user@example.com, where user is your user ID.

mark: the HTML equivalent of the yellow highlighter.

meter and progress: Storage space usage: 6 blocks used (out of 8 total) Progress: 37%

Code snippets

Some projects may call for showing snippets of code, so here is how that would look with Amplify:

<ul>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>

Bear in mind that the appearance will also be affected by any white space you have used in your code snippet in your text editor/IDE.

© Studio 24