Custom Blocks: numbered dividers

  4f

  3

  3

  16

<p><span style="height:1px;background-color:var(--color-theme);display:block;position:relative;color:transparent;opacity:.4;top:40px;">&nbsp;</span> <span class="mydivider" style="text-align:center;display:block;font-size:24px;position:relative;line-height:55px;background-color:var(--color-theme);height:55px;width:55px;margin:10px auto;border-radius:50%;">4f</span></p>

<p><span style="height:1px;background-color:#666;display:block;position:relative;color:transparent;opacity:.4;top:28px;">&nbsp;</span> <span class="mydivider" style="text-align:center;display:block;font-size:20px;position:relative;line-height:35px;background-color:#000;height:35px;width:35px;color:#fff;margin:10px auto;border-radius:50%;">3</span></p>

<p><span style="height:1px;background-color:var(--color-theme);display:block;position:relative;color:transparent;opacity:.4;top:33px;">&nbsp;</span> <span class="mydivider" style="text-align:center;display:block;font-size:20px;position:relative;line-height:45px;background-color:var(--color-theme);height:45px;width:45px;color:white;font-weight:bold;margin:10px auto;">3</span></p>

<p><span style="height:1px;display:block;position:relative;color:transparent;border-top:4px dotted black;opacity:.3;top:36px;">&nbsp;</span> <span class="mydivider" style="text-align:center;display:block;font-size:28px;border:1px solid #fff;position:relative;line-height:45px;background-color:white;height:45px;width:45px;font-weight:100;margin:10px auto;border-radius:50%;">16</span></p>

Getting started with theme components? Download the blank theme component css file.
Watch: installing a theme component.


Posted

in

Tags: