Courses and course formats

I've not used this format, so this is just a guess, but it looks like they've used labels to seperate the activities: one label for "More resources" and one for "Sample tasks and activities".

You can achieve something similar like this...

Add this to the custom css box in your theme settings:

.headerlabel {
  background: #f5f5f5 ;
  padding: 5px ;
  font-size: 1.2em ;
  font-weight: 900 ;
}

Add a label to your course page.

Go to the HTML view click the button in the top left of your editing menu and then the button on the bottom right - it looks like <>

Type:

<div class="headerlabel">
Sample Tasks and Activities
</div>

If you can’t add custom css, replace the label text with this:

<div style="background: #f5f5f5; padding: 5px; font-size: 1.2em; font-weight: 900;">
Sample Tasks and Activities
</div>

If you want it to look nicer, you could use Font Awesome.

Go to Site administration > Appearance > Additional HTML and add this to the "Within HEAD" box:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Then type this into a label:

<div class="headerlabel">
  <i class="fa fa-folder-open-o fa-lg" aria-hidden="true"></i>
  Sample Tasks and Activities
</div>

which will give you something like this:

or

<div class="headerlabel">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
      <i class="fa fa-check fa-stack-1x fa-inverse" aria-hidden="true"></i>
    </span>
Sample Tasks and Activities
</div>

which will give you something like this:

You can see all the Font Awesome icons at http://fontawesome.io/icons/ - and the good news is that Moodle 3.3 is coming with Font Awesome already installed