A Full Post for Testing all the Features

NASA Lunar sample 60015 on display at Space Center Houston Lunar Samples Vault, at NASA's Johnson Space Center

Default content block

This is a default block for content in a post.

It has a background color different from the page background, called the “secondary color”.
It uses the main title color for text, called the “primary color”.
By default, the whole post takes its color settings from the related parent project or page. These colors can be overridden per post.
Posts with no related project resort to a bland default color scheme, if no colors are defined in the individual post settings.

The styles below are variations of the default block with different color combinations and font settings.

H3 Heading

H4 Heading

H5 Heading

H6 Heading

.centered

Normal text is this size. This whole block should be center aligned. The following font style classes can be added to elements within a block (<p>, <span>, …) or the whole block.

.font-small / .small / <small>

For smaller text in the current font.

Can be used with the class names or <small> tag.

.font-meta

This is set in a monospaced font, similar to the meta infos in the title area.

.font-caption

This is tiny monospaced text, similar to image captions.

.font-aside

This should use the sidebar font and formatting.

.style-aside

This whole block should look like the sidebar, in color and font style.

.label.label.filled

Labels to be used sparsely as small callouts or as another style of block headings, etc.

Note Can be combined with regular text, like in the beginning of a paragraph. Should also work in the middle of text, but can create weird gaps and line breaks.

.font-small .label Also works in smaller text [adjust].

.font-meta .label Let’s see how it looks with the monospaced font.

.color-inverted

This inverts the base color style. Good for separating main content sections or mark a different type of content, like for highlighting a programme or bios in an event post.

.color-bg

This is good to set back a content section a bit more. Or to add a third type of content style.

.style-inset

This inverts the shadow style from floating to inset. Could be used for stuff “under the hood” or notions like that.

.color-bg .style-inset

The inset style can be applied to other color styles, too.

.style-flat

This sets the panel background to the page background. Good for section titles, to inject something in the flow of panels, or things that shouldn’t be so much in a box.

.color-aside

This takes on the color of the sidebar panels (but keeps the main font). Used to mark more meta or side info or to add yet another level of content separation.

.color-aside .color-inverted

The sidebar color style can be inverted, too.

Image styles

Use <figure> tag within content for proper image styling. Images are full size by default. Add <figcaption> tag for image caption. All panel color styles can be used for image panels.

* .style-image / .panel-image was used before for full size images.

This is a caption. Use <figcaption> within <figure> tag.

Title before image

Full-size images can be mixed with other content. This can look a bit awkward, depends on the case.

Use class .inset on <figure> to fit image to normal text frame padding. This is also the default behaviour for plain <img> tags.

Use classes .span-3…9 or .size-3…9 on a <figure> element to limit the image width. The difference is that the .span-* classes will always be displayed 100% on mobile, whereas the .size-* classes keep their smaller size. These also work with plain <img> tags. The numbers refer to a 12-unit grid (so .span-6 would be half the column size).