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

HTML Snippets: Content Sections Flat

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 straight 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 Flat

Featured Section x3

<!-- FEATURED-->
<div class="row clearfix margin45">
<div class="col s12 l4 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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">
<img 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">
<img 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 x4

<!-- FEATURED x4 -->
<div class="row clearfix margin45">
<div class="col s12 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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 l3 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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>
Featured Section w/ Button

<!-- FEATURED w/ BUTTON -->
<div class="row clearfix margin45">
<div class="col s12 l4 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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 class="btn-rightcontainer" style="text-align:center !important">
<a href="" class="btn-right rounded feat3btn">View Training</a>
</div>
</div>
</a>
</div>
<div class="col s12 l4 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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 class="btn-rightcontainer" style="text-align:center !important">
<a href="" class="btn-right rounded feat3btn">View Training</a>
</div>
</div>
</a>
</div>
<div class="col s12 l4 blockgrid">
<a href="">
<div class="card_box boxhover featured">
<img 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 class="btn-rightcontainer" style="text-align:center !important">
<a href="" class="btn-right rounded feat3btn">View Training</a>
</div>
</div>
</a>
</div>
</div>
Featured Single

<!-- FEATURED SINGLE -->
<div class="row clearfix margin45 flexwrap" style="padding: 0px 10px;">
<div class="col s12 featuredsingle rounded">
<div class="col s12 l6">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/nyrequired.jpg" style="width:auto">
</div>
<div class="col s12 l6 featsinglecont">
<span>FEATURED</span>
<h2>Course of the Month</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl.</p>
<div class="btn-rightcontainer" style="text-align:left !important">
<a href="" class="btn-right rounded">View Training</a>
</div>
</div>
</div>
</div>
Category Grid x3

<!-- CATEGORY GRID x3-->
<div class="row clearfix ">
<a href="">
<div class="col s12 m6 l4 blockgrid categorygrid">
<div class="card_box boxhover">
<div class="cardboximg">
<img 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">
<div class="cardboximg">
<img 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">
<div class="cardboximg">
<img 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

<!-- CATEGORY GRID x4-->
<div class="row clearfix catgrid4">
<a href="">
<div class="col s12 m6 l3 blockgrid categorygrid">
<div class="card_box boxhover">
<div class="cardboximg">
<img 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">
<div class="cardboximg">
<img 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">
<div class="cardboximg">
<img 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">
<div class="cardboximg">
<img 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

<!--CATEGORIES x3-->
<div class="row clearfix locationsection">
<div class="col s12 l4 ">
<div class="card_box boxhover nopadding">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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

<!--CATEGORIES x4-->
<div class="row clearfix locationsection">
<div class="col s12 l3 ">
<div class="card_box boxhover nopadding">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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>
5 Categories

<!-- 5 Categories-->
<div class="row clearfix locationsection">
<div class="col s12 l5ths ">
<div class="card_box boxhover nopadding">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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">
<a href="">
<div class="imgcontainer">
<img 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>
Category Header Left Image

<!-- Category Header Left Image -->
<!-- In the Stylesheet, search for CategoryHeaderLeftImageURL to change the background image for this section. You will need the URL of the image you'd like to use. -->
<div class="row clearfix margin45 flexwrap" style="margin-left: 0px;">
<div class="col s12 l6 categoryheaderdivleft categoryheaderdivleftimg valign-wrapper">
<h2>Section Title</h2>
</div>
<div class="col s12 l3 categoryheaderdivright">
<div class="catheadleftcont catheadleftcontimg boxhover">
<a href="">
<div class="catboxcontent">
<div class="catboxiconcont">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
</div>
<h5>Name</h5>
</div>
</a>
</div>
</div>
<div class="col s12 l3 categoryheaderdivright">
<div class="catheadleftcont catheadleftcontimg boxhover">
<a href="">
<div class="catboxcontent">
<div class="catboxiconcont">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
</div>
<h5>Name</h5>
</div>
</a>
</div>
</div>
</div>
Category Header Left Colorblock

 

<!-- Category Header Left ColorBlock -->
<div class="row clearfix margin45 flexwrap colorblockleft" style="margin-left: 0px;">
<div class="col s12 l4 categoryheaderdivleft valign-wrapper">
<h2>Section Title</h2>
</div>
<div class="col s12 m6 l2 categoryheaderdivright">
<div class="catheadleftcont boxhover">
<a href="">
<div class="catboxcontent">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
<h5>Name</h5>
</div>
</a>
</div>
</div>
<div class="col s12 m6 l2 categoryheaderdivright">
<div class="catheadleftcont boxhover">
<a href="">
<div class="catboxcontent">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
<h5>Name</h5>
</div>
</a>
</div>
</div>
<div class="col s12 m6 l2 categoryheaderdivright">
<div class="catheadleftcont boxhover">
<a href="">
<div class="catboxcontent">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
<h5>Name</h5>
</div>
</a>
</div>
</div>
<div class="col s12 m6 l2 categoryheaderdivright">
<div class="catheadleftcont boxhover">
<a href="">
<div class="catboxcontent">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
<h5>Name</h5>
</div>
</a>
</div>
</div>
</div>
Single Category Transparent Right Light

<!-- SINGLE CATEGORY TRANSPARENT RIGHT LIGHT -->
<!-- In the Stylesheet, search for SplitTranspRightURL to change the background image of this section. You will need the URL of the image you'd like to use. -->
<div class="row clearfix splitranspright margin45" style="min-height: 0px !important;">
<div class="catsplit">
<div class="column half">
</div>
<a href="">
<div class="column half imgcontainerfull righttransp">
<div class="catboxcontent">
<div class="catboxiconcont">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
</div>
<h5>Name</h5>
</div>
</div>
</a>
</div>
</div>
Single Category Transparent Right Dark

<!-- SPLIT CATEGORY TRANSPARENT RIGHT DARK -->
<!-- In the Stylesheet, search for SplitTranspRightURL to change the background image of this section. You will need the URL of the image you'd like to use. -->
<div class="row clearfix splitranspright margin45" style="min-height: 0px !important;">
<div class="catsplit catsplitdark">
<div class="column half">
</div>
<a href="">
<div class="column half imgcontainerfull righttransp catboxdark">
<div class="catboxcontent">
<div class="catboxiconcont">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
</div>
<h5>Name</h5>
</div>
</div>
</a>
</div>
</div>
Single Category Right Color Block

<!-- SPLIT CATEGORY COLOR BLOCK -->
<!-- In the Stylesheet, search for SplitColorBlockLeftURL to change the background image of this section. You will need the URL of the image you'd like to use. -->
<div class="row clearfix margin45" style="margin-left: 0px;">
<div class="categoryheaderdivimg">
<div class="column half splitcolorblockleft">
</div>
<a href="">
<div class="column half righthalf">
<div class="catboxcontent">
<div class="righthalficon">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Asset%2048@3x.png" alt="">
</div>
<h5>Name</h5>
</div>
</div>
</a>
</div>
</div>

Video/Category Table

<!-- VIDEO/TABLE -->
<div class="row clearfix margin45">
<div class="column two-third">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/CqV6658FXo8" title="YouTube video player" frameborder="0" autoplay="1" mute="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="column third">
<table class="tabstyle" style="border-collapse:collapse;width:100%;">
<tbody>
<tr>
<td style="width:25%"><a href=""><img src="https://cdn.brainier.com/002/wizzy/434BE0CD-ED90-AD3E-4015CB1F30BDBA12.png"> </a></td>
<td>
<a href="">
<p>See recent articles.</p>
</a>
</td>
</tr>
<tr>
<td style="width:25%"><a href=""><img src="https://cdn.brainier.com/002/wizzy/434BE08A-DA41-F0A2-C63AA3C02A5E98DC.png"> </a></td>
<td>
<a href="">
<p>View company directory.</p>
</a>
</td>
</tr>
<tr>
<td style="width:25%"><a href=""><img src="https://cdn.brainier.com/002/wizzy/43B6EB6B-DB16-2DFF-D3E1FCB106EA5050.png"> </a></td>
<td>
<a href="">
<p>See your recent achievements.</p>
</a>
</td>
</tr>
<tr>
<td style="width:25%"><a href=""><img src="https://cdn.brainier.com/002/wizzy/43B6EB5B-048F-82AB-3D9FDA5773B4B641.png"> </a></td>
<td>
<a href="">
<p>Go to the social learning hub.</p>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Video/Featured Half Split

<!-- VIDEO/FEATURED HALF -->
<div class="row clearfix margin45">
<div class="col s12 l6">
<iframe width="100%" height="400" src="https://www.youtube.com/embed/CqV6658FXo8" title="YouTube video player" frameborder="0" autoplay="1" mute="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="col s12 l6">
<div class="featured">
<span style="margin:0px !important">FEATURED</span>
</div>
<h3>State Regulatory Training</h3>
<p>Sea change level the playing field roll back strategy. It's about managing expectations. Circle back nail it down, nor we don't need to boil the ocean here strategic fit, but focus on the customer journey cross sabers we need to aspirationalise our offerings. Ultimate measure of success beef up, can you ballpark the cost per unit for me time to open the kimono this is our north star design. Player-coach value-added we need to touch base off-line before we fire the new ux experience, yet optimize the fireball you must be muted problem territories, so I just wanted to give you a heads-up.</p>
</div>
</div>
Video Full w. Description, Button

<!-- VIDEO FULL w. Description -->
<div class="row clearfix margin45">
<div class="col s12">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/CqV6658FXo8" title="YouTube video player" frameborder="0" autoplay="1" mute="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>
<div class="col s12">
<h3 style="margin-top: 15px;">State Regulatory Training</h3>
<p>Sea change level the playing field roll back strategy. It's about managing expectations. Circle back nail it down, nor we don't need to boil the ocean here strategic fit, but focus on the customer journey cross sabers we need to aspirationalise our offerings. Ultimate measure of success beef up, can you ballpark the cost per unit for me time to open the kimono this is our north star design. Player-coach value-added we need to touch base off-line before we fire the new ux experience, yet optimize the fireball you must be muted problem territories, so I just wanted to give you a heads-up.
</p>
<div class="btn-rightcontainer" style="text-align:left !important;">
<a href="" class="btn-right rounded feat3btn" style="width: 50%;max-width: 500px;">View Training</a>
</div>
</div>
</div>

Additional Resources

For additional HTML Snippets, see the articles below:

HTML Snippets: Content Section Rounded
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