<!-- *** Matrix add-ons Line divider *** -->
<div class="line bold-line bg-primary">
</div>

<!-- *** Matrix add-ons Line divider *** -->
<div class="line bold-line small-line bg-primary">
</div>

<!-- *** Matrix add-ons Line divider *** -->
<h3 style="text-align:center;font-size:40px;">
    Center-aligned title
</h3>

<div class="line bold-line small-line bg-primary center-align" style="margin:0 auto;background:#002fdc;height:3px;">
</div>

<!-- *** Matrix add-ons Line divider *** -->
<style>
/*<![CDATA[*/
.liner {
  display: flex;
  align-items: flex-start;
  text-align: left;
}
.liner:after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background: #002fdc;
  min-width: 20px;
  margin: auto;
}
.liner:after {
  margin-left: 20px;
}
/*]]>*/
</style>

<h3 class="liner" style="font-size:40px;">
    This is a custom title
</h3>

<!-- *** Matrix add-ons Line divider *** -->
<style>
/*<![CDATA[*/
.is-center-diamond:before {
  content: "";
  width: 10px;
  height: 10px;
  background: inherit;
  display: inline-block;
  position: absolute;
  top: -4px;
  left: 50%;
  margin: 0 0 0 -3px;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
/*]]>*/
</style>

<h3 style="text-align:center;font-size:40px;">
    Diamond center-aligned title
</h3>
<br />

<div class="line bold-line small-line bg-primary center-align is-center-diamond" style="margin:0 auto;background:#002fdc;height:1px;width:200px;">
</div>