Firefly Components Styleguide (Global Title — h1)

Text styling (Section Heading — h2)

The Firefly 5 editor has four different options for styling text. H1 is persevered for the page title only and is not available to the user. What follows are a number of paragraphs showing all possible font styling available to the user.

This paragraph, like the one above, is introductory text. The user can pick this styling option when they wish to write an opening paragraph of text

All text has a maximum width defined by the template, this is to prevent line lengths becoming unreadable.

Sub Heading (h3)

This is a regular paragraph, it's the default styling of any page when the user starts to type and hasn't selected any formatting options.

The user can also define links like this one (a). They can Make text bold (strong) or Make text italic (em). Or even combine the two to format text as both bold and italic (strong + em).

Paragraphs of text can be left aligned, like this one

Or they can be central aligned just like this fine paragraph of text. I'm waffling now as I want this to be quite long.

Or, if you're feeling particularly fruity you can right align a paragraph. This should use a class to apply the align, rather than the horrible align property.

This is a quote from someone who said this thing one time. He said something about how he loves Firefly.

Alan Partridge — The guy who said that thing one time

• A list of items
• Is always marked up as an unordered list
  • It can have nesting
  • and many levels
    • This is now
    • The third level
  • lovely levels
• And, we're back at the top

1. A list of ordered items
2. Is always marked up as an ordered list
   1. It can have nesting
   2. and many levels
      1. This is now
      2. The third level
   3. lovely levels
3. And, we're back at the top

Image components

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit est, porta at sapien sed, imperdiet vestibulum massa. Ut suscipit rhoncus tincidunt. Sed in bibendum ante. Phasellus luctus pretium hendrerit. Duis dictum, metus id venenatis commodo, lorem urna semper neque, vel mollis tortor nibh adipiscing nisi. Quisque vel ultrices elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit est, porta at sapien sed, imperdiet vestibulum massa. Ut suscipit rhoncus tincidunt. Sed in bibendum ante. Phasellus luctus pretium hendrerit. Duis dictum, metus id venenatis commodo, lorem urna semper neque, vel mollis tortor nibh adipiscing nisi. Quisque vel ultrices elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit est, porta at sapien sed, imperdiet vestibulum massa. Ut suscipit rhoncus tincidunt. Sed in bibendum ante. Phasellus luctus pretium hendrerit. Duis dictum, metus id venenatis commodo, lorem urna semper neque, vel mollis tortor nibh adipiscing nisi. Quisque vel ultrices elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit est, porta at sapien sed, imperdiet vestibulum massa. Ut suscipit rhoncus tincidunt. Sed in bibendum ante. Phasellus luctus pretium hendrerit. Duis dictum, metus id venenatis commodo, lorem urna semper neque, vel mollis tortor nibh adipiscing nisi. Quisque vel ultrices elit.

Gallery components

Container row

Up to 4 images can be aligned next to each other, whilst still retaining the drag-and-drop-ability of a normal firefly component

Masonry

Slideshow

Newsfeed

File list