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.
Images
![](https://peelregion.ca/articles/2024/images/tax-forms.jpg)
An optional heading
Heading can be H2, H3, H4, or bolded P. All captions are optional.
![](https://peelregion.ca/articles/2024/images/v2-2024-Fix-a-leak.jpg)
Proin nibh erat, faucibus non lacinia at, condimentum in erat. Phasellus id augue ut massa venenatis consequat.
![](https://peelregion.ca/articles/2024/images/oral-health.jpg)
Vestibulum at mi ultrices lorem eleifend viverra.
![](https://peelregion.ca/articles/2024/images/woman-on-phone.jpg)
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
![](https://peelregion.ca/children-parenting/_img/children-playing.jpg)
Suspendisse dictum erat elit, eu ultricies turpis vehicula a.
![](https://peelregion.ca/budget/2024/_img/child-family.jpg)
Curabitur tempus congue blandit.
Video
A heading 1
Lorem ipsum dolor sit amet.
A heading 2
Lorem ipsum dolor sit amet.
A heading 3
Lorem ipsum dolor sit amet.
A heading 4
Lorem ipsum dolor sit amet.
A heading 5
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Metric boxes
![](https://peelregion.ca/transition/peel-deep-dive/population.png)
1.5 million
is Peel's population, which is larger than six of Canada's provinces
![](https://peelregion.ca/transition/peel-deep-dive/residency.png)
1 in 10
Ontarians live in Peel
![](https://peelregion.ca/transition/peel-deep-dive/demographic.png)
69%
of residents identify with a racialized group, the highest percentage in the GTA
![](https://peelregion.ca/transition/peel-deep-dive/water-supply.png)
2nd
largest water and wastewater system in Ontario and 4th largest in Canada
![](https://peelregion.ca/transition/peel-deep-dive/water-rates.png)
30%
lower utility rates than other GTA municipalities
![](https://peelregion.ca/transition/peel-deep-dive/housing.png)
3rd
largest community housing provider in Ontario
![](https://peelregion.ca/transition/peel-deep-dive/goods.png)
21%
of all goods movement GDP in Ontario carried on Peel Region roads
![](https://peelregion.ca/transition/peel-deep-dive/goods-moved.png)
$1.8 billion
worth in goods travel to, from and through Peel every day
![](https://peelregion.ca/transition/peel-deep-dive/police.png)
2nd
largest police service in Ontario and 3rd largest in Canada
![](https://peelregion.ca/transition/peel-deep-dive/paramedic.png)
2nd
largest in paramedic service in Ontario
![](https://peelregion.ca/transition/peel-deep-dive/waste.png)
2nd
largest in waste management program in Ontario and 4th largest in Canada
![](https://peelregion.ca/transition/peel-deep-dive/health.png)
2nd
argest public health service in Ontario by population size and one of the largest in Canada
![](https://peelregion.ca/transition/peel-deep-dive/funding.png)
$10.3 million
in annual funding to over 150 community agencies in the non-profit secto
![](https://peelregion.ca/transition/peel-deep-dive/budget.png)
$3.1 billion
annual operating budget and $1.9 billion annual capital budget
![](https://peelregion.ca/transition/peel-deep-dive/asset.png)
$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
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). 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.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
<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>