Examples for developers
Each example solves one task. It contains a real built page that you can open on a desktop, tablet and phone, and the files it is built from. The demo pages show the documentation of a fictional payment service, Acme Pay.
Header and menu
Header with an action button
The site’s main button on the right of the header, next to search.
Header, menu and contents
The parts that make up an ordinary documentation page.
A note under the menu
A short block with a link under the menu on the left.
Page regions
A note next to the contents
A warning that stays visible while the reader scrolls the page.
Page footer
A company line and a link at the bottom of the page.
A page without side columns
A long full-width document without a menu or contents.
Section and page settings
Shared section settings
The section sets the settings, and one page changes only the width.
Settings on three levels
The site, section and page settings combine, and the page resets what it does not need.
Page types
Documentation page
A header, a menu on the left and contents on the right.
Product landing page
A first screen, benefit cards and an action button, without a menu.
Page from a template
One template and a setting that picks the header variant.
Components
Alert in the text
A prominent SIMAI Framework alert right in Markdown.
Button in the text
A SIMAI Framework button right in Markdown.
Your own project component
An install command builder and a plan calculator from the site folder.