Style Guide

For Collaborative Fund writers and content managers. Visit the brand guide for colors, fonts, and logo assets.

In This Guide: Table of Contents

Writing

Writing in Siteleaf

In the Siteleaf text editor, there are two writing modes to choose from, Visual and Markdown. Visual is easier for many writers, while Markdown gives you additional control, including manual excerpt separators and additional elements.

Change modes using the dropdown in the top-right of the editor.

Capitalization

Post titles (and all subheadings) should use sentence case, with no period. Here are a few examples:

Excerpts

Blog posts are excerpted when shown on the main blog page with a Read more link to the full blog post.

The first sentence of the first line will be shown as the excerpt. If a sentence is less than five words, a second sentence is shown. A maximum of 20 words are included.

This sentence is short. So this one will be included in the excerpt as well. But not this one.

This line will be shown only on the full article only.

Blockquotes

Use blockquotes when quoting a text passage. Do not use screenshots of text.

This is a blockquote.

Images and video

Keep in mind that larger files make the page slower to load. We recommend uploading images with a

Embed videos (Vimeo, YouTube), versus uploading a video.

iframe embeds

Many iframes, such as video embeds from YouTube or Vimeo, are responsively sized automatically.

Additional elements in Markdown mode

For more control, you can use these additional elements when editing content in Markdown mode.

Image captions

Optionally include a caption for images in the text.

This is an image caption.

This is an image caption.
{: .caption}

Pull-quotes

Use pull-quotes as a graphic feature to highlight quotes from the main text.

Pull-quotes like this are brief, attention-catching quotations.

Pull-quotes like this are brief, attention-catching quotations.
{: .pull-quote}

Footnotes

Here is a sentence showing off a footnote1. They are created like this:

Here is a sentence showing off a footnote[^1].

[^1]: This is a footnote!

Horizontal rules

Use a horizontal rule to break up text into sections.


---

Header Styles

This is an H1: With Alternate

This is an H2: With Alternate

This is an H3: With Alternate

This is an H4: With Alternate

This is an H5
This is an H6
# This is an H1: _With Alternate_
## This is an H2: _With Alternate_
### This is an H3: _With Alternate_
#### This is an H4: _With Alternate_
##### This is an H5
###### This is an H6

Meta fields

To publish a blog post, you only need a title and content. However, there are additional fields you can specify for more control.

Author

author: Choose an author from the dropdown list of authors. Defaults to Collaborative Team. Read about adding an author.

Cover image

cover_image: Post headers look great plain, but they look even better with the right cover image. Optionally upload a cover_image for your blog post. Unsplash is a good resource to find free (do whatever you want) high-resolution photos.

If left blank, cover image will fall back to a randomized gradient. You choose a different gradient by downloading an SVG from this tool and uploading it to Siteleaf as the cover_image.

Intro note

intro_note: If your post needs an introduction that’s not part of the content, you can optionally include an intro_note.

posts: Optionally select up to 3 posts to link to in the “Read next” module at the bottom of the post. If not specified, Siteleaf will automatically select posts based on tags, author, and recency.

Social card image

image: Optionally specify an image used for social cards, such as the Twitter summary card that appears whenever your post gets tweeted. If not specified, the social card image falls back to the cover_image (if set) or the Collaborative Fund logo.

Content management

Authors

In Siteleaf, authors have a title (name), optional twitter handle, optional bio, and customizable permalink (such as collabfund.com/blog/authors/craig).

Adding an author

Investments

Investments have the following fields:

  1. This is a footnote! ↩