Global Voices Test Post: Formats

Global Voices Test Post

Here's an image to get us started.

This is a demo article that uses all of the supported HTML and CSS formats available for Global Voices posts. They should all work on all platforms. We'll start with headings.

Images

Images are a huge part of GV. They can be different sizes and they can float left and right if needed.

Example full width image without caption

Usually there should be a caption but sometimes there isn't.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Full width image WITH caption

Example full-width image with caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Floated images display at 50% width

Example of an image with caption floated right. This image also has a very long caption that will wrap to multiple lines, showing how it looks when there's a long text.

Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit. Etiam auctor, arcu vel tempor congue, erat risus porta dui, vel vestibulum orci massa vel felis. Pellentesque et nisl lacus. Vestibulum consectetur accumsan venenatis. Vivamus vitae nibh sit amet ante porta sollicitudin sed nec lectus. Suspendisse potenti. Etiam semper neque et orci tincidunt euismod. Suspendisse bibendum eleifend dolor, a ornare tellus tristique sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In accumsan ultricies neque eu suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent malesuada pharetra arcu non pretium.

Example of an image with caption floated Left.

Nulla eu lorem at ante semper elementum. Quisque hendrerit gravida eros, ut gravida dolor posuere quis. Etiam tincidunt arcu eget ipsum imperdiet mattis. Donec tempor nisl eu mi blandit et adipiscing elit consequat. Suspendisse a odio tincidunt tortor gravida auctor. Vestibulum a mollis felis. In sit amet lacus vitae est semper bibendum. Donec vel urna velit. Ut enim risus, scelerisque at ultricies nec, eleifend vel nunc. Fusce quis ultricies massa. Nam venenatis dapibus risus non laoreet. Duis et arcu vel metus faucibus pellentesque vestibulum vitae lectus. Suspendisse sed turpis augue, non pellentesque quam. Maecenas faucibus, quam id facilisis posuere, nulla tortor laoreet quam, sed volutpat erat justo ac tortor. Maecenas pulvinar nulla ultrices urna fermentum sit amet tincidunt nunc bibendum. Donec accumsan tortor in ante pharetra nec dictum nibh consequat.

Quotes

Here's a simple blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit. Etiam auctor, arcu vel tempor congue, erat risus porta dui, vel vestibulum orci massa vel felis. Pellentesque et nisl lacus. Vestibulum consectetur accumsan venenatis. Vivamus vitae nibh sit amet ante porta sollicitudin sed nec lectus. Suspendisse potenti.

Here's a translated blockquote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit. Etiam auctor, arcu vel tempor congue, erat risus porta dui, vel vestibulum orci massa vel felis. Pellentesque et nisl lacus. Vestibulum consectetur accumsan venenatis. Vivamus vitae nibh sit amet ante porta sollicitudin sed nec lectus. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit. Etiam auctor, arcu vel tempor congue, erat risus porta dui, vel vestibulum orci massa vel felis. Pellentesque et nisl lacus. Vestibulum consectetur accumsan venenatis. Vivamus vitae nibh sit amet ante porta sollicitudin sed nec lectus. Suspendisse potenti.

Here's a right-to-left blockquote with the .rtl style in it:

في خضم حراك عالمي ضد العنصرية تنقسم فرنسا حول المصير الذي سيتم تخصيصه لتماثيل تمثل شخصيات تاريخية مرتبطة بالرق أو الاستعمار.

Big tag

The text below uses the <big> tag, it should be bigger.

This text should be bigger.

Contributors block

The .contributors style is usually used at the end of a document to indicate other people who worked on the story.

These extra people also helped with this story! Jane Doe, Gohary Gohary, Jer Jer.

Notes block

The .notes style is similar to .contributor and ads visually-distinguished notes to the beginning or end of a post.

These are some extra notes about this article.

Pull-Quotes

Pull-quotes make text large and optionally floated to the right or left. The following text enables their format to be visualized.

This is a .pull-quote at full width, it is basically just giant text that isn't a heading. Note that all pull-quotes end up being full-width at mobile sizes.

This is a .pull-quote.alignright, it will float to the right at 50% of the document width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit. Etiam auctor, arcu vel tempor congue, erat risus porta dui, vel vestibulum orci massa vel felis. Pellentesque et nisl lacus. Vestibulum consectetur accumsan venenatis. Vivamus vitae nibh sit amet ante porta sollicitudin sed nec lectus. Suspendisse potenti. Etiam semper neque et orci tincidunt euismod. Suspendisse bibendum eleifend dolor, a ornare tellus tristique sit amet.

This is a .pull-quote.alignleft, it will float to the left at 50% of the document width.

Nulla eu lorem at ante semper elementum. Quisque hendrerit gravida eros, ut gravida dolor posuere quis. Etiam tincidunt arcu eget ipsum imperdiet mattis. Donec tempor nisl eu mi blandit et adipiscing elit consequat. Suspendisse a odio tincidunt tortor gravida auctor. Vestibulum a mollis felis. In sit amet lacus vitae est semper bibendum. Donec vel urna velit. Ut enim risus, scelerisque at ultricies nec, eleifend vel nunc. Fusce quis ultricies massa. Nam venenatis dapibus risus non laoreet.

Factboxes

“Factboxes” are <div> tags that use the .factbox style to create a block with a colored background to isolate certain information, such as an explainer of “facts” related to a story. Factboxes can be used for anything you want to visually distinguish though, and allow various content like images, headings, and lists inside of them. They can be floated right or left to display at 50% width, similar to pull-quotes and images.

Full-width Factbox

This factbox wasn't given an alignment, so it will just be a full-width area that has a colored background. Here's an example list.

  • This is the first list item
  • This is the second list item
  • This is a third list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right-aligned Factbox

This is a .factbox.alignright and it will take up 50% of the article width for sizes bigger than “mobile” (and 100% width at mobile).

Here's an example of how images work in a factbox.

Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit. Etiam auctor, arcu vel tempor congue, erat risus porta dui, vel vestibulum orci massa vel felis. Pellentesque et nisl lacus. Vestibulum consectetur accumsan venenatis. Vivamus vitae nibh sit amet ante porta sollicitudin sed nec lectus. Suspendisse potenti. Etiam semper neque et orci tincidunt euismod. Suspendisse bibendum eleifend dolor, a ornare tellus tristique sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In accumsan ultricies neque eu suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent malesuada pharetra arcu non pretium.

Left-Aligned Factbox

Factboxes can also be left-aligned, though right-alignment usually works better.

GVers discussing the future in Cebu, Philippines.

Nulla eu lorem at ante semper elementum. Quisque hendrerit gravida eros, ut gravida dolor posuere quis. Etiam tincidunt arcu eget ipsum imperdiet mattis. Donec tempor nisl eu mi blandit et adipiscing elit consequat. Suspendisse a odio tincidunt tortor gravida auctor. Vestibulum a mollis felis. In sit amet lacus vitae est semper bibendum. Donec vel urna velit. Ut enim risus, scelerisque at ultricies nec, eleifend vel nunc. Fusce quis ultricies massa. Nam venenatis dapibus risus non laoreet. Duis et arcu vel metus faucibus pellentesque vestibulum vitae lectus. Suspendisse sed turpis augue, non pellentesque quam. Maecenas faucibus, quam id facilisis posuere, nulla tortor laoreet quam, sed volutpat erat justo ac tortor. Maecenas pulvinar nulla ultrices urna fermentum sit amet tincidunt nunc bibendum. Donec accumsan tortor in ante pharetra nec dictum nibh consequat.

Pages list [gvpages]

[gvpages] is a custom GV Shortcode that shows a set of pages as headlines.

NOTE: The shortcode needs to know a `page_id` to work, so the code below will break when this post is moved to a new site. Please find 3 pages with featured images and insert their ID's in the code below.

Facebook Fundraising Guide

Facebook has a powerful tool called Personal Fundraisers and Donations. It's free to use and anyone with a Facebook account (with some major geographic exceptions — more below) can use…

Welcome to GV!

This document explains our mission and how our community works.

Communication Within GV

Introductory guide to communication channels used by GV to help new members get up to speed and ensure they are signed up.

Inline-RSS [gvinlinerss]

[gvinlinerss] is a custom GV Shortcode that inserts headlines from an RSS feed into the post. Below is the output for the following shortcode:

[gvinlinerss feed_url="https://advox.globalvoices.org/feed/" count="3" show_excerpts="0"]

Generic Nicelist

This is a .nicelist. This format isn't set up to be added automatically in the editor but should be supported in posts.

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit.
  • Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit.
  • Etiam auctor, arcu vel tempor congue

Headings

The .factbox below has examples of all the headings that can be used on GV. Note that only H3 and H4 are recommended for use inside of posts, and they should be big and dynamic as shown throughout the rest of this article. H1 and H2 are demonstrated here only so we can make sure they look okay in case people mistakenly use them.

H1: First-level heading

Should never be used.

H2: Second-level heading

H2 is also not recommended, but should still work normally on GV.

H3: Third-level heading

H3 is the recommended heading for use inside posts

H4: Fourth-level heading

H4's should be used when a document is complex enough to have sub-headings that need to be visually smaller than h3.

H5: Fifth-level headings

H5 should work but rarely be used. Visually it will look like bold text, but can be used to ensure the heading shows up in a Table of Contents. Avoid this if possible.

H1 line-height: This h1 is so long it should wrap to two lines and show the line-height.

H2 line-height: This h2 is so long it should wrap to two lines and show the line-height.

H3 line-height: This h3 is so long it should wrap to two lines and show the line-height.

H4 line-height: This h4 is so long it should wrap to two lines and show the line-height.

Sorry for that.v

Start the conversation

Authors, please log in »

Guidelines

  • Please treat others with respect. Comments containing hate speech, obscenity, and personal attacks will not be approved.