Horizontal Rule

To separate sections of text, you can inject an HR widget.

Options

The following options are supported by this widget.

size

Specify the size in pixels of the horizontal rule.

ex: 3px

color

Specify the color of the horizontal rule.

ex: cornflowerblue

opacity

Specify the opacity of the horizontal rule.

ex: 75%

config

(OPTIONAL) A copy of the config hash. See the snippet that follows. This option reduces the number of times the site configuration values are queried, speding up the process of building the site.

    {% include read-config.liquid %}
    {% include countdown.widget config=config launchDate="2024-01-09T05:00:00.000Z" %}}

    {% include 'countdown.widget' config=site.config launchDate:'2024-01-09T05:00:00.000Z' %}

Usage

There are several ways to incorporate this widget into your pages.

Inline

If you have more than one countdown target datetime, you can specify each directly on the widget.

{% include hr.widget size="3px" %}

{% include 'hr.widget' size:'3px' %}

Page Metadata

If you want to have multiple hr widgets on the same page, you can set the style values in the page's metadata.

---
hr:
  color:   white
  size:    2px
  opacity: 75%
---
{% include hr.widget %}

---
hr:
  color:   white
  size:    2px
  opacity: 75%
---
{% include 'hr.widget' %}

Site Config

If you want to have multiple hr widgets on the same page, you can set the style values in the page's metadata. If the countdown widget is used across the site in multiple places, you can store the target datetime in the site config.

In the 'config.yml' file:

launchDate: "2024-01-09T05:00:00.000Z"

In the 'my-page.md' file:

{% include countdown.widget %}

In the 'config.yml' file:

launchDate: "2024-01-09T05:00:00.000Z"

In the 'my-page.md' file:

{% include 'countdown.widget' %}

Last modified: 25 May 2024