1. Help Center
  2. ClearCompany Learning
  3. ClearCompany Learning: In-Depth
  4. ClearCompany Learning: HTML Snippets

HTML Snippets: Content Section Rounded

Follow
Avatar
Juan Burgos
Edited

HTML Snippets provide ready-to-use code for creating custom, modern HTML pages within the Learning Platform. This article focuses on snippets specifically designed for Content Sections, with a rounded border.

In this article:
What are Content Sections
Instructions
HTML Snippets
Additional Resources

What are Content Sections?

Content Sections are the building blocks of pages in the learning tool where learning objects—such as images, titles, and descriptions—are displayed.

Instructions

  1. Copy the provided Stylesheet into your custom HTML page.
  2. Complete your page using the snippets below. Ensure you copy each snippet in full, along with the stylesheet code. Note that some snippets span multiple pages.
  3. Select at least two visually distinct content sections (e.g., follow a two-column section with a three-column section) to enhance visual interest.
  4. Use these sections strategically to guide learners and highlight relevant learning objects in your Learning Platform.

HTML Snippets - Content Sections Rounded

Featured Section x3 Rounded

<!-- FEATURED-->
<div class="row clearfix margin45">
<div class="col s12 l4 blockgrid">
<a href="">
<div class="card_box boxhover featured rounded">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/nyrequired.jpg" style="width:auto">
<span>FEATURED</span>
<h5>State Regulatory Training</h5>
<p>Complete regulatory courses required by the state of __.</p>
</div>
</a>
</div>
<div class="col s12 l4 blockgrid">
<a href="">
<div class="card_box boxhover featured rounded">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/campaign-creators-gMsnXqILjp4-unsplash.jpg" style="width:auto">
<span>FEATURED</span>
<h5>The Manager's Hub</h5>
<p>Level up your leadership skills with these courses.</p>
</div>
</a>
</div>
<div class="col s12 l4 blockgrid">
<a href="">
<div class="card_box boxhover featured rounded">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hub/23531588/hubfs/aaron-blanco-tejedor-yH18lOSaZVQ-unsplash.jpg" style="width:auto">
<span>FEATURED</span>
<h5>Workplace Training</h5>
<p>Grow into a better team member. Check out these courses.</p>
</div>
</a>
</div>
</div>
Featured Rounded x4

<!-- FEATURED ROUNDED x4 -->
<div class="row clearfix margin45">
<div class="col s12 m6 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured rounded">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/nyrequired.jpg" style="width:auto">
<h5>Regulatory Training</h5>
<p>Complete regulatory courses required by the state of __.</p>
</div>
</a>
</div>
<div class="col s12 m6 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured rounded">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/campaign-creators-gMsnXqILjp4-unsplash.jpg" style="width:auto">
<h5>The Manager's Hub</h5>
<p>Level up your leadership skills with these courses.</p>
</div>
</a>
</div>
<div class="col s12 m6 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured rounded">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hub/23531588/hubfs/aaron-blanco-tejedor-yH18lOSaZVQ-unsplash.jpg" style="width:auto">
<h5>Workplace Training</h5>
<p>Grow into a better team member. Check out these courses.</p>
</div>
</a>
</div>
<div class="col s12 m6 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured rounded">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/campaign-creators-gMsnXqILjp4-unsplash.jpg" style="width:auto">
<h5>Other Training</h5>
<p>Other description goes here. Check out these courses.</p>
</div>
</a>
</div>
</div>
Category Grid x3 Rounded

<!-- CATEGORY GRID x3-->
<div class="row clearfix ">
<a href="">
<div class="col s12 m6 l4 blockgrid categorygrid">
<div class="card_box boxhover rounded">
<div class="cardboximg">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/amy-hirschi-W7aXY5F2pBo-unsplash.jpg" style="width:auto">
</div>
<h5 class="elm-active">Upper Leadership Hub
<div style="float:right">
<i style="float:right" class="icon ion-android-arrow-forward"></i>
</div>
</h5>
</div>
</div>
</a>
<a href="">
<div class="col s12 m6 l4 blockgrid categorygrid">
<div class="card_box boxhover rounded">
<div class="cardboximg">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/campaign-creators-gMsnXqILjp4-unsplash.jpg" style="width:auto">
</div>
<h5 class="elm-active">The Manager's Portal
<div style="float:right">
<i style="float:right" class="icon ion-android-arrow-forward"></i>
</div>
</h5>
</div>
</div>
</a>
<a href="">
<div class="col s12 m6 l4 blockgrid categorygrid">
<div class="card_box boxhover rounded">
<div class="cardboximg">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/scott-blake-wq7oyx_Kx-4-unsplash.jpg" style="width:auto">
</div>
<h5 class="elm-active">Learner's Dashboard
<div style="float:right">
<i style="float:right" class="icon ion-android-arrow-forward"></i>
</div>
</h5>
</div>
</div>
</a>
</div>
Category Grid x4 Rounded

<!-- CATEGORY GRID x4-->
<div class="row clearfix catgrid4">
<a href="">
<div class="col s12 m6 l3 blockgrid categorygrid">
<div class="card_box boxhover rounded">
<div class="cardboximg">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/thisisengineering-raeng-TXxiFuQLBKQ-unsplash.jpg" style="width:auto">
</div>
<h5 class="elm-active">Instructor Led
<div style="float:right">
<i style="float:right" class="icon ion-android-arrow-forward"></i>
</div>
</h5>
</div>
</div>
</a>
<a href="">
<div class="col s12 m6 l3 blockgrid categorygrid">
<div class="card_box boxhover rounded">
<div class="cardboximg">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/joshua-hoehne-WPrTKRw8KRQ-unsplash.jpg" style="width:auto">
</div>
<h5 class="elm-active">Required Courses
<div style="float:right">
<i style="float:right" class="icon ion-android-arrow-forward"></i>
</div>
</h5>
</div>
</div>
</a>
<a href="">
<div class="col s12 m6 l3 blockgrid categorygrid">
<div class="card_box boxhover rounded">
<div class="cardboximg">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/julissa-capdevilla-ewwTcBOJgV4-unsplash.jpg" style="width:auto">
</div>
<h5 class="elm-active">Earn Certifications
<div style="float:right">
<i style="float:right" class="icon ion-android-arrow-forward"></i>
</div>
</h5>
</div>
</div>
</a>
<a href="">
<div class="col s12 m6 l3 blockgrid categorygrid">
<div class="card_box boxhover rounded">
<div class="cardboximg">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/charlesdeluvio-Lks7vei-eAg-unsplash.jpg" style="width:auto">
</div>
<h5 class="elm-active">Video Coaching
<div style="float:right">
<i style="float:right" class="icon ion-android-arrow-forward"></i>
</div>
</h5>
</div>
</div>
</a>
</div>
3 Categories Rounded

<!-- 3 CATEGORIES ROUNDED-->
<div class="row clearfix locationsection">
<div class="col s12 l4 ">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/zach-miles-Y84-eo8drzk-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>New York</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l4">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/r-k-h1n7o0yb0sE-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Dallas</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l4">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/patrick-tomasso-yHJOwJ6TSsA-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Detroit</span>
</div>
</div>
</a>
</div>
</div>
</div>
4 Categories Rounded

<!-- 4 CATEGORIES ROUNDED-->
<div class="row clearfix locationsection">
<div class="col s12 l3">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/zach-miles-Y84-eo8drzk-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>New York</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l3">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/r-k-h1n7o0yb0sE-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Dallas</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l3">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/patrick-tomasso-yHJOwJ6TSsA-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Detroit</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l3">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/zach-miles-Y84-eo8drzk-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Las Vegas</span>
</div>
</div>
</a>
</div>
</div>
</div>
Browse by Region x5 Rounded

<!-- 5 CATEGORIES ROUNDED-->
<div class="row clearfix locationsection">
<div class="col s12 l5ths ">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/zach-miles-Y84-eo8drzk-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>New York</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l5ths">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/r-k-h1n7o0yb0sE-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Dallas</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l5ths">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/patrick-tomasso-yHJOwJ6TSsA-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Detroit</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l5ths">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/zach-miles-Y84-eo8drzk-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Las Vegas</span>
</div>
</div>
</a>
</div>
</div>
<div class="col s12 l5ths">
<div class="card_box boxhover nopadding rounded">
<a href="">
<div class="imgcontainer">
<img class="roundedimg" src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/r-k-h1n7o0yb0sE-unsplash.jpg" alt="">
<div class="imgcaptiontext">
<span>Denver</span>
</div>
</div>
</a>
</div>
</div>
</div>

Additional Resources

For additional HTML Snippets, see the articles below:

HTML Snippets: Content Section Flat
HTML Snippets: Hero Sections
HTML Snippets: Headings

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Articles in this section