Example Formatting

When something is extra special it goes in a special container, this could be a notice or similar (found under Styles) in Saturno.

Remember always to use 'Heading 2, 3 or 4' for headlines. NEVER just bold or change the font-size on the text except for bulleted list (see below). H1's are rarely used and should only be used in special circumstances, reach out to your manager or DMM if thinking about implementing an H1.

To ensure that text, lists, and other content look consistent it is vital to clean the data before you paste it, and we will talk about that in the next section.

Headers, Data & Images (H1)

We don't use H1 on bio's but prefer H2's. Whenever you use any Heading remember (H2)

that it is important to alway nest them correctly under each other, like putting an H3  (H3)

after an H2 is fine, but not the other way around. In other words, you should not put an H2 followed by an H1 under it. (H4)

Copying in Data & Handling Images (H2)

Image Description goes here

It is important when you copy in data that you copy the pure text in. This means no CTRL-C to CTRL-V directly from Word, Outlook, etc. Either use Notepad as a step in between or click the "Paste as Plain Text" icon in Saturno. After you have pasted it in you, have to manually apply the formatting i.e., H2, and H3's. Spacing, Images, etc. Remember to preview the final result before you publish. Sometimes things look fine in the editor, but on the front-end, it is a different story.

Using Images and ALT text (H3)

It is important when you upload an image that you provide an ALT description for the image. Right click the image in Saturno, Then click "Image Properties" and type a description of the image into the ALT text field. I also recommend aligning the image RIGHT and setting the Horizontal Spacing at 5. (Test it out by hovering over the image above, you should see the ALT text appearing).

When creating lists remember we bold the line preceding the bulleted list (i.e this one):

  • Site-wide we do not put a . (dot) after the end of a bullet, except
  • for Representative Matters where we do put a . (dot) at the end of the bullet.

Quotations & Links (H2)

Quotes go into quotations to properly format them, like below. (See a live example of the quotation tag used)

Things that happen, happen for a reason. - John Johnson, Chambers & Partners

Links In-line with Text (H3)

Links in line are always just created by hyperlinking the text, i.e., NOT https://www.coolwebsite.com/link/page/2 but click to read more. Remember to click Target on the link 'pop-up' and select whether to open the link in a new window or not. (New windows is preferred for linking people off-site)

Links By Themselves or after Text (H4)

Links that appear in separate paragraphs by themselves or after a paragraph of text should be created using the method above with the caveat of adding to open brackets in front of the link >> Link Text & Link Goes Here

(Example: >> Click to read more).

Headings. No DOT's... Please (H4)

Title-Case is your friend! We also want to avoid using . (dots) in headings or sub-headings. Sub-headings or H2 are great for bio overviews where an attorney has more than one 'level' of content that needs to be formatted and categorized. This could be community engagement or a breakdown of the practice areas or wins in detail.

Tables can be used (H3)

Tables are rather limited in terms of functionality, think of the functionality as a basic table structure. No complex formatting or formulas can be used out of the box. Tables are rarely practical on a busy page. But if you must use tables, re-create the table using the formatting tools in Saturno. Click the table tool and select the number of columns and rows. Here is an example:

Very cool Data More Dat Data Data Data
2 12 $12
5 51 $25

Tables can have various types of borders; it is advisable that there always be a border so that the page content is clean and separated from the table content.

Bullet Lists and Hidden Treasures (H2)

Lots of Content can be Hidden (H3)

If we have a bio or any page for that matter where the need to scroll becomes a chore, then we can use 'Read More' to hide some of the content below the fold, It's pretty easy to hide the excessive amount of content, we use a pre-built  'read more' tag in Saturno like the one below. Click it to reveal the secret of life, the universe and everything in between.

Read More >

The answer is: 42 (Just kidding), actually, to create a Read More tag, simply click 'More Tools' in any WYSIWYG editor in Saturno then "Insert Html" -> "Read More" and paste in your content that you want to hide in the field under the blue line.

Rare Occasions (H2)

Something text just needs to stand out in special ways, like this or maybe like this These are basically sub-script and super-script. These can be found by clicking 'More Tools' and X2 or X2 . Rule of thumb is NOT to use these except for special circumstances. Underlines make text appear as links as is thus confusing and contrary to the ADA.

When Things go 'Wonky.' (H2)

Tx is x is your friend, and you will find that little icon in the toolbar above in Saturno. This allows you to select all text and remove all formatting. If that doesn't solve your issue, try copying the content into Notepad, and pasting it back in as plain text, then apply formatting where needed. Your last resort is looking a the field that is acting up, check the source HTML code by clicking 'Source' and deleting everything from there, click 'Source' again to leave that mode. Now paste in your PURE text and re-format.

HTML Code Basics (H3)

Paragraphs
<p>My first paragraph.</p>
Headings
<h1>This is heading 1</h1>
<
h2>
This is heading 2</h2>
<h3>This is heading 3</h3>
Links
<
a href="http://www.linkgoeshere.com">
This is a link</a>
Images
<
img src="/location/of/picturefile.jpg" alt="ALT text goes here" width="104" height="142">