Ministerial profile pages: Canada.ca design system

From: Treasury Board of Canada Secretariat

  • Mandatory
  • Last updated: 2021-09-27

A ministerial profile page is the landing page for ministers, parliamentary secretaries and heads of quasi-judicial organizations. It provides a consistent biographical overview and clarifies their roles and responsibilities.

On this page

When to use

Use the ministerial profile template to provide a consistent presentation for information about:

What to avoid

Don't use this template more than once for each minister, parliamentary secretary or head of organization.

How to implement

Use this template and follow the guidance:

Ministerial profile page

Template with guidance

Code
<h1 id="wb-cont" property="name">The Honourable [Minister name], MP | [Parliamentary secretary’s name] | [Head of institution or organization's name]</h1>
<div class="row">
	<div class="col-md-3">
		<p class="mrgn-tp-lg"><img src="img/265x352.png" alt="" class="img-responsive"></p>
	</div>
	<div class="col-md-9">
		<p class="mrgn-tp-lg"><strong>Minister of <a href="#">[Portfolio name one]</a> and <a href="#">[Portfolio name two]</a> | Parliamentary secretary to the <a href="#">[Minister of portfolio name]</a> | [Official title of the head]</strong></p>
		<p>Represents the riding of <a href="#">[Riding name]</a></p>
		<ul>
			<li><a href="#">Ministerial mandate letter</a></li>
			<li><a href="#">Ministerial briefing book</a></li>
			<li><a href="#">Ministerial appointments</a></li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex commodi autem laudantium aliquam id, voluptate possimus quod illo velit vero, at dolorum sequi ipsam culpa fugit, molestias quaerat vitae.</p>
		<section>
			<h2>Contact information</h2>
			<p>House of Commons<br>
				Ottawa, Ontario K1A 0A6<br>
				<strong>Telephone:</strong> 123-456-7890<br>
				<strong>Email:</strong> <a href="mailto:">[first.last@canada.ca]</a> <span class="glyphicon glyphicon-envelope"></span></p>
		</section>
	</div>
</div>
<section class="gc-features">
	<h2>Features [optional]</h2>
	<div class="row wb-eqht">
		<div class="col-lg-4 col-md-6 mrgn-bttm-md">
			<h3 class="h5"><a href="#" class="stretched-link">[Feature hyperlink text]</a></h3>
			<img src="./images/feature-img-360x203.jpg" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
			<p>Brief description of the feature being promoted.</p>
		</div>
		<div class="col-lg-4 col-md-6 mrgn-bttm-md">
			<h3 class="h5"><a href="#" class="stretched-link">[Feature hyperlink text]</a></h3>
			<img src="./images/feature-img-360x203.jpg" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
			<p>Brief description of the feature being promoted.</p>
		</div>
		<div class="col-lg-4 col-md-6 mrgn-bttm-md">
			<h3 class="h5"><a href="#" class="stretched-link">[Feature hyperlink text]</a></h3>
			<img src="./images/feature-img-360x203.jpg" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
			<p>Brief description of the feature being promoted.</p>
		</div>
	</div>
						

Latest changes

  • replaced Latest, Recent announcements, and Gallery with a flexible Features section
  • removed the social media feed
  • simplified and streamlined the guidance
  • clarified how to display ministers, parliamentary secretaries and heads of organizations

Discussion

Discuss the pattern in github issues

Did you find what you were looking for?

What was wrong?

You will not receive a reply. Telephone numbers and email addresses will be removed.
Maximum 300 characters

Thank you for your feedback

Date modified: