General styling rules
For design consistency please follow try to stick to the following rules
The Free text component
- Try to keept the free text component for text only
- Don't change the Font-size in the Free text box
- if list: use the 'sketchy list' option (if available in the component)
- keep text left aligned
- Don't use the colours in the Free text space
- if colour can be applied it will be available in the component options
- avoid using Table (they are not responsive on smaller screens)
- Don't use italic, underline
- bold can be used to highlight words
- Links have automatically a default colour
- don't make them bold, underline or coloured
Use of headers
on a page with Hero:
- only use headers H2 (sub-header) and H3 (not h4, h5, h6)
- H1 is reserved for the Hero headers on top of the page
on a content page (story/blog)
- Use h1 for title
- h2 for sub-title
- h3 as sub-headers within the text / above a paragraph
Components
- All the components on this page have the name how they are named in the CMS
- Repeating: if the Rich text option is available within a component: only try to use it for plain text
- in the grid component overview:
- use the 2, 3 and 4 column setup as displayed on this page in combination with the type of card
For reference on how the components are build up in the CMS:
- Login to backend.steward-ownership.com > go to pages > find the page: Style-Guide & Style-Guide-Grid
Thank you!
with warm regards,
the Design Police
last updated: april 22, 2026
this is a hero intro (h1)
this is hero intro item (h2)
this is a hero intro (h3)
Hero Intro free text
this is a basic free text (no selection of header = text only)
this is a bold text
this is an italic text
this is an underline text
- this is a number list
- this is a dot list
this is a quote
horizontal line:
this is an image:
Free text item
Header 1 - 36px
Header 2 - 18 pt
Header 3 - 14 pt
Header 4 - 12pt
Header 5 - 14px
Header 6 - 12px
Free text - 15 px
Free text bold
Free text italic
Free text italic
- List number
- List bullet : is sketchy list enabled
Item in Image With Dividers Title
Item in Image With Dividers Text
header 1
header 2
header 3
- list number
- list dots
quote
divider:
Item in Image Title Text: Title
Item in Image Title Text: text
Grid: title
Display as grid
Image Button Card - title
Image Button Card - title
More Grids
more grid component variations in the grid sub-style guide
1 bubble quote
Steward-ownership brings together start-ups, medium-sized businesses and large corporations. It combines modern with traditional entrepreneurship, sustainability with profitable business. And much more.
Logo Grid: title
logo grid
Dividers:
Video Embed: title
This video is embedded via YouTube. By playing this video, you agree that data will be transmitted to YouTube and may also be transferred to countries outside the EU where no level of data protection equivalent to EU laws exists. For more information, please see the YouTube Privacy Policy.
Image Hero: title
full width image:
full width image slider:
free text
free text 2
Resources list
FAQ title
Question free text
Question free text
this is a disclaimer free text
Three Column Layout:
Free text image:
free text: Steward-ownership brings together start-ups, medium-sized businesses and large corporations. It combines modern with traditional entrepreneurship, sustainability with profitable business. And much more.
free text: Steward-ownership brings together start-ups, medium-sized businesses and large corporations. It combines modern with traditional entrepreneurship, sustainability with profitable business. And much more.
free text: Steward-ownership brings together start-ups, medium-sized businesses and large corporations. It combines modern with traditional entrepreneurship, sustainability with profitable business. And much more.
