Convivial demo page

Make your content sing by adding backgrounds.

Typography

Heading level 1. Page heading

Heading level 2, proceeding H1

This is an opening paragraph, that contains a link.

Heading level 2, looks like h5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita tenetur blanditiis in libero distinctio inventore porro external link quaerat, eum aspernatur and one that has a line break dolorum animi a perferendis, obcaecati, accusantium dignissimos atque, voluptates veniam!

Testing large external links.

Testing larger external links.

Heading level 2

Heading level 3, proceeding H2

The purpose of the Tab character is indentation; conversely, using the Space character for indentation carries no semantic meaning—if you code this way your indentation schema may as well be a form of ASCII art. ;-)

Heading level 3

The slow quick brown fox jumped over the lazy dog. The ins (insert) element, unlike the dog cannot jump over anything, so it cannot span cross paragraph boundaries.

This paragraph contains outdated information as well as current information.

Heading level 4

The coordinate of the jth point is (xj, yj). For example, the 10th point has coordinate (x10, y10).

E=mc2f(x, n) = log4xn

Definition term
A definition description: important information. Less important information.
A second definition description. Did you know?—a single definition term can have multiple definition (descriptions).
Single room
$199 breakfast included, GST inclusive
Double room
$239 breakfast included, GST inclusive

We can also have single definitions, used for terms upon their first occurence in a document:

Heading level 5

While they are essential reading material for our job, the W3C specifications are not exactly George R. R. Martin-level reading material.

Now to the mark element. This has a few useful applications:

  • useful for marking up interesting things in quotations (without altering the styling of text, eg to italic)
  • drawing attention to specific parts of pre-formatted text (eg code snippets)
  • for marking up search results (eg that match a given query)
Heading level 6

I also have some kittens who are visiting me these days. They’re really cute. I think they like my garden! Maybe I should adopt a kitten.

The highlighted part below is where the error lies:

var i: Integer; begin i := 1.1; end.

An unordered list containing an ordered list:

  • Canberra office
  • Sydney office
  • Foo item, with sub-items:
    1. one
    2. two
    3. three
  • Bar
  • Baz

A simple ordered list:

  1. Discovery
  2. Alpha
  3. Beta
  4. Live

Back to a paragraph.

And that’s a wrap.

View mode – Teaser

Node List of example content, rendered with Teaser view mode in a single column.

Popular, modern, well supported, open source CMS.

Druplicon

We aim to give your users the best client side performance.

Drupal Speed

View mode – Teaser small

Node List of example content, rendered with Teaser Small view mode in a single column.

Popular, modern, well supported, open source CMS.

Druplicon

We aim to give your users the best client side performance.

Drupal Speed

View mode – Teaser big

Drupal 8

Popular, modern, well supported, open source CMS.

Druplicon

Pagespeed

We aim to give your users the best client side performance.

Drupal Speed

View mode – Stack Simple

Node List of example content, rendered with Stack Simple view mode in three columns.

View mode – Stack Detail

Node List of example content, rendered with Stack Detail view mode in a three columns.

Druplicon

Popular, modern, well supported, open source CMS.

Drupal Speed

We aim to give your users the best client side performance.

Drupal Accessibility

Semantic HTML and sensible starting design aims for WCAG 2.0 AA compliance.

Extensible Drupal

Use the power of Drupal to build the site as you like.

View mode – Summary

Node List of example content, rendered with Summary view mode in a single column.

Popular, modern, well supported, open source CMS.

We aim to give your users the best client side performance.

Semantic HTML and sensible starting design aims for WCAG 2.0 AA compliance.

View mode – Search

Node List of example content, rendered with Search view mode in a single column.

Component: Item List: 3 Stack Simple

Item List paragraph bundle contains a list of Items which can model any object

Drupal Media

First Item

Second item info
Drupal Media

Second item

Second item info
Drupal Media

Third item

Second item info

Component: Item List: 3 Stack Detail

Item List paragraph bundle contains a list of Items which can model any object.

Drupal Media

First item

First item info

First item content.

Drupal Media

Second item

Second item info

Second item content.

Drupal Media

Third item

Third item info

Third item content.

Component: Node list: 3 Stacks

Node List paragraph bundle, rendered with Stack Simple view mode in 3 columns on Dark Alt background with Hero style.

Druplicon

Popular, modern, well supported, open source CMS.

Drupal Speed

We aim to give your users the best client side performance.

Drupal Accessibility

Semantic HTML and sensible starting design aims for WCAG 2.0 AA compliance.

Component: Node list: 6 Stacks

Node List paragraph bundle, rendered with Stack Detail view mode in 6 columns.

Druplicon

Popular, modern, well supported, open source CMS.

Drupal Speed

We aim to give your users the best client side performance.

Drupal Accessibility

Semantic HTML and sensible starting design aims for WCAG 2.0 AA compliance.

Drupal Media

Easily manage and embed images, videos, tweets, documents and more.

Extensible Drupal

Use the power of Drupal to build the site as you like.

Drupal Workflow

Customise how content flows through content creators and reviewers.

Component: Content

Content paragraph bundle contains arbitrary HTML.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring

Content Colour Selector: Default

Content component with default colour selected.

Content Colour Selector: Alt

Content component with alt colour selected.

Content Colour Selector: Dark

Content component with dark colour selected.

Content Colour Selector: Dark Alt

Content component with dark alt colour selected.

Content Style Selector: Hero

Content component with hero style selected. (Dark Colour Selector added for clarity).

Accordion item body

Accordion group

Accordion group content

Accordion item 1 body

Accordion item 2 body

Accordion item 3 body

Scroll Reveal: Sequence

The Scroll Reveal modifier eases sequences of items when the user has scrolled to the spot in the page. This works well with Node Lists and Item Lists.

Circle progress

Best component for displaying a single numerical value. Settings for this component allows to change colors, value, arc size, value prefix and suffix.

Transparent
100.00

Circle 100

Transparent
0.75

Circle 0.75

Transparent
60.00

Circle 60

Section

One section can provide a common background for multiple components.

Convivial is a Drupal 8 distribution, based on top of GovCMS8. It contains all of the standard features of GovCMS8 with the addition of a number of extensions aimed at making GovCMS even better. Hit the ground running with a site which can run on GovCMS SaaS, supports the Design Guide and gives editors a great set of tools to build sites.

Link

Each component can still maintain they own background.

Convivial is a Drupal 8 distribution, based on top of GovCMS8. It contains all of the standard features of GovCMS8 with the addition of a number of extensions aimed at making GovCMS even better. Hit the ground running with a site which can run on GovCMS SaaS, supports the Design Guide and gives editors a great set of tools to build sites.

Link

Charts

For displaying your data there is a versatile chart component with multiple types. It allows you to customize colors and axis labels as needed.

Social share icons - icon only

Social share icons - label only

Social share icons - pills

Social share icons - half pills

GeoJSON and Leaflet

The Map component allows multiple GeoJSON files to be rendered, sources from JSON data as text or from a URL.

App component

 
 

Modifier: Padding

Content component with Padding modifier (and Colours modifier).

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment

Modifier: Background Image

Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier. Content component with Background image modifier.

Modifier: Relative Height

Content component with Relative Height modifier (and Colours modifier).

Set to 4:1 ratio.

Modifier: Background Parallax

Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier. Content component with Background Parallax modifier.

Modifier: Linear Gradient

Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier. Content component with Linear Gradient modifier.

Modifier: Colour Background

Content component with Colour Background modifier. Relative Height modifier added to get the size.

Video background

Font modifier

Need a custom font for an extra announcement?

Custom radial gradient

Catch readers attention by a radial gradiet with unlimited colors, shape options and center position.

Adaptive height modifier

Set height relatively to screen width – great for maintaining custom aspect ratio. Content vertical position can be set.

Was this page helpful?