Custom Blocks: numbered dividers

One of the limitations in Rise is the numbering of divider blocks. Here’s how to create your own system for organizing and dividing your content with custom 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: