Media groups

Six-across is not feasibble. So, not sure if we need to build that. In production NOT demoing other numbers per row, the height of the elements should be balanced.

• Six
• Four
• Three
• Two
• Border

Images

An optional heading

Heading can be H2, H3, H4, or bolded P. All captions are optional.

Proin nibh erat, faucibus non lacinia at, condimentum in erat. Phasellus id augue ut massa venenatis consequat.

Vestibulum at mi ultrices lorem eleifend viverra.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Suspendisse dictum erat elit, eu ultricies turpis vehicula a.

Curabitur tempus congue blandit.

Video

Metric boxes

1.5 million

is Peel's population, which is larger than six of Canada's provinces

1 in 10

Ontarians live in Peel

69%

of residents identify with a racialized group, the highest percentage in the GTA

2^nd

largest water and wastewater system in Ontario and 4th largest in Canada

30%

lower utility rates than other GTA municipalities

3^rd

largest community housing provider in Ontario

21%

of all goods movement GDP in Ontario carried on Peel Region roads

$1.8 billion

worth in goods travel to, from and through Peel every day

2^nd

largest police service in Ontario and 3^rd largest in Canada

2^nd

largest in paramedic service in Ontario

2^nd

largest in waste management program in Ontario and 4th largest in Canada

2^nd

argest public health service in Ontario by population size and one of the largest in Canada

$10.3 million

in annual funding to over 150 community agencies in the non-profit secto

$3.1 billion

annual operating budget and $1.9 billion annual capital budget

$36 billion

is the total value of Peel assets

Explanation

The following is an example with six items (one of which is highlighted in liime), although there is no theoretical limit.

The parent group class attibute must contain of the following selectors: six, four, three or two. This determines the number accross at full resolution.

Optionally, we should be able to apply the border selector to the main class attibute. I there is no caption, we won't use the border. Also, images should be the same size (at least the same aspect ratio). For the groups, it will be an eithe/or situation when the publisher is implementing. All captions or none (but this is an operational matter).

Sample code

<!--begin group-->
<div id="grouping" class="media-group four border">

  <div>
     <img src="https://peelregion.ca/articles/2024/images/tax-forms.jpg">
     <p>An optional heading</p>
     <p>Heading can be H2, H3, H4, or bolded P. All captions are optional.</p>
  </div>


  <div>
    <img src="https://peelregion.ca/articles/2024/images/v2-2024-Fix-a-leak.jpg">
	<p></p>
    <p>Proin nibh erat, faucibus non lacinia at, condimentum in erat. Phasellus id augue ut massa venenatis consequat.</p>
  </div>

  <div>
    <img src="https://peelregion.ca/articles/2024/images/oral-health.jpg">
	<p></p>
    <p>Vestibulum at mi ultrices lorem eleifend viverra.</p>
  </div>

  <div>
    <img src="https://peelregion.ca/articles/2024/images/woman-on-phone.jpg">
	<p></p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  </div>

  <div>
    <img src="https://peelregion.ca/children-parenting/_img/children-playing.jpg">
	<p></p>
    <p>Suspendisse dictum erat elit, eu ultricies turpis vehicula a.</p>
  </div>

  <div>
    <img src="https://peelregion.ca/budget/2024/_img/child-family.jpg">
	<p></p>
    <p>Curabitur tempus congue blandit.</p>
  </div> 

</div>
<!--end group-->

Metric boxes

For the metric boxes, the first <p> is styled differently. this means that it must have a metric. There is no other reason to use this style so this metric must should not be omitted by the program area and/or pblisher. This allowws publisher to simply enter 2 paragraphs and an imag (icon).

The image should be 75px wide by 60px tall. It will be forced to that height. Again, this is for design/publisher and will be included in the stadards.

The CSS till handle the border whether the option is selected or not. The following os the parent plus one metric box. Note, there is no structural difference to the other types. Just publisher-entered image and paragraphs. Also, to be noted for publishers, these should be 3-across in full res.

<div id="grouping" class="media-group four metric">

  <div>
    <img src="https://peelregion.ca/transition/peel-deep-dive/residency.png"">
    <p>1 in 10</p>
    <p>Ontarians live in Peel</p>
  </div>
  ...
  
</div>