Components

This page is a test page which demonstrates the working components.

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).

Content breakout

If you need to fit more content on the screen.

Standard page - example

Section

One section can provide a common background for multiple components.

Convivial for GovCMS 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.

123.00

Each component can still maintain they own background.

Component: Item List

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

First item

First item info

Second item

Second item info

Third item

Third item info

Component: Node list

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

Blog article – example

25 July 2018

Use Blog articles to reach your target audience directly.

Event - example

17 April 2018 - 28 April 2018

Canberra, Australian capital territory

Use Event to reach your target audience.

News and Media - example

29 June 2018

Use News and Media to reach your target audience directly.

Accordion item heading (Fast, Closed)

Accordion group

Accordion group content

Accordion item heading (Slow, Closed)

Accordion item heading 2 (Fast, Open)

Accordion item body 2

Accordion item heading 3 (Fast, Closed)

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.

Line chart

CSV

"City","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"
"Tokyo",7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6
"New York",-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5
"Berlin",-0.9,0.6,3.5,8.4,13.5,17.0,18.6,17.9,14.3,9.0,3.9,1.0
"London",3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8

Bar chart

CSV

"Period","Africa","America","Asia","Europe","Oceania"
"Year 1800",107, 31, 635, 203, 2
"Year 1900",133, 156, 947, 408, 6
"Year 2012",1052, 954, 4250, 740, 38

Area chart

CSV

"Country",1940,1941,1942,1943,1944,1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006
"USA",null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104
"USSR/Russia",null, null, null, null, null, null, null, null, null, null,5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,21000, 20000, 19000, 18000, 18000, 17000, 16000

Pie chart

CSV

Brand,Share
"Microsoft Internet Explorer",56.33
"Chrome",24.03,
"Firefox",10.38
"Safari",4.77
"Opera",0.91
"Proprietary or Undetectable", 0.2

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.

95.00

Circle 1 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices fermentum nisl, non convallis justo viverra eu. Fusce odio risus, bibendum a est eu, malesuada tempor justo.

0.75

Circle 2 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices fermentum nisl, non convallis justo viverra eu. Fusce odio risus, bibendum a est eu, malesuada tempor justo.

35.00

Circle 3 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices fermentum nisl, non convallis justo viverra eu. Fusce odio risus, bibendum a est eu, malesuada tempor justo.