<div class="c-halfboxes">
<section class="c-mainbox">
<header>
<h2>
Urgent / Critical Issues
</h2>
</header>
<p><a href="https://cdlib.org/contact/report-a-problem/">Report a Problem</a></p>
<p>See <a href="https://cdlib.org/services/info-services/guides/reporting-problems-after-hours/">After Hours</a> to report problems with CDL resources after 5 PM.</p>
</section>
<section class="c-mainbox">
<header>
<h2>
Non-Urgent Issues
</h2>
</header>
<ul>
<li><a href="http://helpline.cdlib.org">CDL Helpline</a></li>
<li><a href="https://helpline.cdlib.org/MRcgi/MRentrancePage.pl">Login</a></li>
<li><a href="https://cdlib.org/services/info-services/guides/how-to-use-the-cdl-helpline-web-site/">Instructions</a></li>
</ul>
</section>
</div>
<div class="c-halfboxes">
{{> @mainbox halfbox1 }}
{{> @mainbox halfbox2 }}
</div>
{
"halfbox1": {
"mainbox": {
"heading": {
"level": "2",
"text": "Urgent / Critical Issues"
},
"text": "<p><a href=\"https://cdlib.org/contact/report-a-problem/\">Report a Problem</a></p>\r\n<p>See <a href=\"https://cdlib.org/services/info-services/guides/reporting-problems-after-hours/\">After Hours</a> to report problems with CDL resources after 5 PM.</p>"
}
},
"halfbox2": {
"mainbox": {
"heading": {
"level": "2",
"text": "Non-Urgent Issues"
},
"text": "<ul>\r\n\t<li><a href=\"http://helpline.cdlib.org\">CDL Helpline</a></li>\r\n\t<li><a href=\"https://helpline.cdlib.org/MRcgi/MRentrancePage.pl\">Login</a></li>\r\n\t<li><a href=\"https://cdlib.org/services/info-services/guides/how-to-use-the-cdl-helpline-web-site/\">Instructions</a></li>\r\n</ul>"
}
}
}
If one box is absent, the other one will stretch to fill the space.