Language selection

Search

Services and information - Common design pattern

Status
Up to spec
Type
Common design pattern
Last review
2019-01-08
Conforming to
Content and IA spec 1.5.1
Specification
Common design patterns - Services and information
Technical name
gc-srvinfo

Working example

Evaluation and report

There is no evaluation and report available for this component

API (Version 3.0)

CSS Class Template Visual rendering Schema
Version 1.3 Version 3.0 Version 1.1 Version 1.1

CSS Class (v1.3)

gc-srvinfo
Component: Service and information
gc-drmt
Component: (Deprecated) Doormat link. Defined inside a Service and information component.
Version notes
Version 1.3
  • Added: gc-srvinfo
Version 1.2 (between v4.0.28.1 and v4.0.27)
  • Depricated: gc-drmt
Version 1.1 (between v4.0.21 and v4.0.26)
  • Added: gc-drmt
Version 1.0
There were no exclusive CSS class

Template (v3.0)

Notes:

<section class="gc-srvinfo">
	<h2>[[comp:SrvInfo dct:title]]</h2>

	<!-- Two column && ( Subheading || Demand ) [default] -->
	<div data-if="comp:SrvInfo comp:srvInfoCol == comp:SrvInfo2Col &&
					( comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSubheading ||
					comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoDemand )" class="wb-eqht row">
		<div data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
			<p>[[comp:Doormat dct:description]]</p>
		</div>
	</div>

	<!-- One column && ( Subheading || Demand ) -->
	<div data-if="comp:SrvInfo comp:srvInfoCol == comp:SrvInfo1Col &&
					( comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSubheading ||
					comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoDemand )" data-for="comp:Doormat in (comp:SrvInfo comp:doormats )">
		<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
		<p>[[comp:Doormat dct:description]]</p>
	</div>

	<!-- Three column && ( Subheading || Demand ) -->
	<div data-if="comp:SrvInfo comp:srvInfoCol == comp:SrvInfo3Col &&
					( comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSubheading ||
					comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoDemand )" class="wb-eqht row">
		<div data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6 col-lg-4">
			<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
			<p>[[comp:Doormat dct:description]]</p>
		</div>
	</div>

	<!-- Sequential (One column only) -->
	<div data-if="comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSequential">
		<ol>
			<li data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )">
				<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
				<p>[[comp:Doormat dct:description]]</p>
			</li>
		</ol>
	</div>

</section>
Previous version
v4.0.28.1 to v4.0.27 testCase-v4.0.27 (2.0)
  • Clearfix removed
  • Doormat component explicit name CSS removed
  • More services and information when more than 10 doormat, removed
v4.0.26 to v4.0.22 testCase-v4.0.22 (1.2)
  • Separated column layout from section delimited
v4.0.21 testCase-v4.0.21 (1.1)
  • Limit default visible result to 10
v4.0.20 to v4.0.5 testCase-v4.0.5 (1.0)

Initial template

<section>
	<h2>[[comp:SrvInfo dct:title]]</h2>

	<!-- v4.0.28.1 to v4.0.27
		* Clearfix removed
		* Doormat component explicit name CSS removed
		* More services and information when more than 10 doormat, removed
	-->
	<div data-if="testCase-v4.0.27" class="wb-eqht row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<div class="col-md-6">
				<section>
					<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
					<p>[[comp:Doormat dct:description]]</p>
				</section>
			</div>
		</template>
	</div>

	<!-- v4.0.26  to v4.0.22
		* Separated column layout from section delimited
	-->
	<div data-if="testCase-v4.0.22" class="row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<div data-if="IterationIndex <= 10" class="col-md-6">
				<section class="gc-drmt">
					<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
					<p>[[comp:Doormat dct:description]]</p>
				</section>
			</div>
			<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
			<template data-if="IterationIndex > 10">
				<details class="mrgn-tp-md brdr-0">
					<summary class="btn btn-default text-center">Show more services and informations</summary>
					<div class="row">
						<template data-for="comp:Doormat in IterationCollection">
							<div class="col-md-6">
								<section class="gc-drmt">
									<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
									<p>[[comp:Doormat dct:description]]</p>
								</section>
							</div>
							<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
						</template>
					</div>
				</details>
			</template>
		</template>
	</div>

	<!-- v4.0.21
		* Limit default visible result to 10
	-->
	<div data-if="testCase-v4.0.21" class="wb-eqht row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<section data-if="IterationIndex <= 10" class="col-md-6 gc-drmt">
				<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
				<p>[[comp:Doormat dct:description]]</p>
			</section>
			<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
			<template data-if="IterationIndex > 10">
				<details class="mrgn-tp-md brdr-0">
					<summary class="btn btn-default text-center">Show more services and informations</summary>
					<div class="row">
						<template data-for="comp:Doormat in IterationCollection">
							<section class="col-md-6 gc-drmt">
									<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
									<p>[[comp:Doormat dct:description]]</p>
							</section>
							<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
						</template>
					</div>
				</details>
			</template>
		</template>
	</div>

	<!-- v4.0.20 to v4.0.5 -->
	<div data-if="testCase-v4.0.5" class="row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<section class="col-md-6">
				<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
				<p>[[comp:Doormat dct:description]]</p>
			</section>
			<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
		</template>
	</div>
</section>

Visual rendering (v1.1)

Doormat header comp:Doormat dct:title
  • Same style as the heading level 5: Lato, 20px, bold
  • Set the margin top as the same as heading level 5 (h5)
  • Set the margin bottom to be small: 5px
Doormat description comp:Doormat dct:description
  • Desktop: Noto sans, 17px, plain text
  • Smaller devices: Noto sans, 19px, plain text
Previous version
on and prior v4.0.29 (1.0)
Doormat header comp:Doormat dct:title is the same style as the heading level 5

Schema (v1.1)

#
# Schema of the Service and Information component
#

@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix skos: <http://www.w3.org/2004/02/skos/core#> .
@prefix wms: <http://vocab.canada.ca/wms> .
@prefix comp: <http://vocab.canada.ca/wms/component> .


comp:SrvInfo
	dct:issued "2018-12-28"^^xsd:date ;
	a rdfs:Class, wms:Component ;
	wms:componentName "gc-srvinfo" ;
	rdfs:label "Service and information"@en ;
	rdfs:label "Service et renseignements"@fr ;
	rdfs:isDefinedBy <https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/common-design-patterns.html#services-information>@en;
	rdfs:isDefinedBy <https://www.canada.ca/fr/secretariat-conseil-tresor/services/communications-gouvernementales/specifications-contenu-architecture-information-canada/configurations-conception-communes.html#services-renseignements>@fr;

comp:Doormat
	dct:issued "2018-12-28"^^xsd:date ;
	a rdfs:Class, wms:Component ;
	rdfs:label "Doormat link"@en ;
	rdfs:label "Liens avec description connexe"@fr ;

comp:doormats
	dct:issued "2018-12-28"^^xsd:date ;
	a rdf:Property ;
	rdfs:domains comp:SrvInfo ;
	rdfs:range comp:Doormat .

comp:srvInfoGroupAs
	dct:issued "2018-12-28"^^xsd:date ;
	rdfs:label "Type for this group of doormat links"@en ;
	rdfs:domains comp:SrvInfo ;
	rdfs:range comp:SrvInfoDemand ;
	rdfs:range comp:SrvInfoSequential ;
	rdfs:range comp:SrvInfoSubheading .

comp:SrvInfoDemand
	a rdfs:Class ;
	rdfs:label "Demand-based"@en .

comp:SrvInfoSequential
	a rdfs:Class ;
	rdfs:label "Demand-based"@en .

comp:SrvInfoSubheading
	a rdfs:Class ;
	rdfs:label "Demand-based"@en .

comp:srvInfoCol
	dct:issued "2018-12-31"^^xsd:date ;
	rdfs:label "Column layout rendering"@en ;
	a rdf:Property ;
	rdfs:range comp:SrvInfo1Col ;
	rdfs:range comp:SrvInfo2Col ;
	rdfs:range comp:SrvInfo3Col .

comp:SrvInfo1Col
	a rdfs:Class ;
	rdfs:label "One Column"@en .

comp:SrvInfo2Col
	a rdfs:Class ;
	rdfs:label "Two Column"@en .

comp:SrvInfo3Col
	a rfds:Class ;
	rdfs:label "Three Column"@en
	rdfs:comment "Used essentially for the home page" .

Shapes graphs

#
# Shape graph of the Service and Information component
#

@prefix sh: <http://www.w3.org/ns/shacl#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix comp: <http://vocab.canada.ca/wms/component> .

comp:SrvInfoShape
	a sh:NodeShape ;
	sh:targetClass comp:SrvInfo ;
	sh:and (
		[
			sh:path dct:title ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path comp:doormats ;
			sh:minExclusive 0 ;
			sh:severity sh:Warning ;
		]
	)
	sh:property [
		sh:path comp:srvInfoGroupAs ;
		sh:in ( comp:SrvInfoDemand comp:SrvInfoSequential comp:SrvInfoSubheading ) ;
		sh:severity sh:Violation ;
		sh:defaultValue comp:SrvInfoSubheading ;
	]
	sh:property [
		sh:path comp:srvInfoCol ;
		sh:in ( comp:SrvInfo1Col comp:SrvInfo2Col comp:SrvInfo3Col ) ;
		sh:severity sh:Violation ;
		sh:defaultValue comp:SrvInfo2Col ;
	] .

comp:DoormatShape
	a sh:NodeShape ;
	sh:targetClass comp:Doormat ;
	sh:and (
		[
			sh:path dct:title ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path dct:description ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path foaf:page ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
	) .
Previous version
on and prior v4.0.29 (1.0)

Same as 1.1 without:

  • comp:srvInfoGroupAs
  • comp:SrvInfoDemand
  • comp:SrvInfoSequential
  • comp:SrvInfoSubheading
  • comp:srvInfoCol
  • comp:SrvInfo1Col
  • comp:SrvInfo2Col
  • comp:SrvInfo3Col

JSON-LD sample

{
	"@context": {
		"foaf": "http://xmlns.com/foaf/0.1/",
		"dct": "http://purl.org/dc/terms/",
		"comp": "http://vocab.canada.ca/wms/component"
	},
	"dct:title": "Services et renseignements",
	"comp:srvInfoGroupAs": "comp:SrvInfoDemand",
	"comp:srvInfoCol": "comp:SrvInfo2Col",
	"comp:doormats": [
		{
			"foaf:page": "https://www.canada.ca/doormat/link",
			"dct:title": "[Doormat title]",
			"dct:description": "[Doormat description]"
		},
		{
			"foaf:page": "https://www.canada.ca/doormat/link/2",
			"dct:title": "[Doormat title 2]",
			"dct:description": "[Doormat description 2]"
		},
		{
			"foaf:page": "https://www.canada.ca/doormat/link/3",
			"dct:title": "[Doormat title 3]",
			"dct:description": "[Doormat description 3]"
		}
	]
}

Reference

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: