DOTD Component Library

Post Nav 

<div class="c-post-nav">
      <a href="/" class="c-post-nav__item c-post-nav__item--prev">
          <button class="o-button o-button--icon c-post-nav__button" aria-label="Previous">
              <span class="o-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3126 16.7243C9.94502 17.0919 9.3491 17.0919 8.98155 16.7243L4 11.3529C4 11.3379 4.00036 11.3228 4.00108 11.3078C4.01184 11.0822 4.10337 10.8597 4.27566 10.6874L8.98155 5.98154C9.3491 5.61399 9.94502 5.61399 10.3126 5.98154C10.6801 6.3491 10.6801 6.94502 10.3126 7.31257L7.21338 10.4118L19.0588 10.4118C19.5786 10.4118 20 10.8331 20 11.3529C20 11.8727 19.5786 12.2941 19.0588 12.2941L7.21338 12.2941L10.3126 15.3933C10.6801 15.7609 10.6801 16.3568 10.3126 16.7243ZM8.98155 16.7243L4.00004 11.3616C4.00222 11.5996 4.0941 11.8369 4.27566 12.0185L8.98155 16.7243Z" />
                  </svg>
              </span>
          </button>
          <div class="c-post-nav__content">
              <span class="o-kicker c-post-nav__kicker">
                  Previous
              </span>
              <span class="c-post-nav__label">Previous Post Title</span>
          </div>
      </a>
      <a href="/" class="c-post-nav__item c-post-nav__item--next">
          <button class="o-button o-button--icon c-post-nav__button" aria-label="Next">
              <span class="o-icon">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                  </svg>
              </span>
          </button>
          <div class="c-post-nav__content">
              <span class="o-kicker c-post-nav__kicker">
                  Next
              </span>
              <span class="c-post-nav__label">Next Post Title</span>
          </div>
      </a>
  </div>
 
{% set base_class = post_nav.base_class|default('c-post-nav') %}
{% if post_nav.prev or post_nav.next %}
  <div class="{{ bem(base_class, post_nav.element, post_nav.modifiers, post_nav.extra) }}">
    {% if post_nav.prev.link and post_nav.prev.title %}
      <a href="{{ post_nav.prev.link }}" class="{{ bem(base_class, 'item', 'prev') }}">
        {% include "@button" with {
          "button": {
            "icon": {
              "name": "arrow-left",
              "size": "md"
            },
            "modifiers": "icon",
            "extra": bem(base_class, 'button'),
            "attributes": {
              "aria-label": "Previous"
            }
          }
        } %}
        <div class="{{ bem(base_class, 'content') }}">
          {% include "@kicker" with {
            "kicker": {
              "text": "Previous",
              "extra": bem(base_class, 'kicker')
            }
          } %}
          <span class="{{ bem(base_class, 'label') }}">{{ post_nav.prev.title }}</span>
        </div>
      </a>
    {% endif %}
    {% if post_nav.next.link and post_nav.next.title %}
      <a href="{{ post_nav.next.link }}" class="{{ bem(base_class, 'item', 'next') }}">
        {% include "@button" with {
          "button": {
            "icon": {
              "name": "arrow-right",
              "size": "md"
            },
            "modifiers": "icon",
            "extra": bem(base_class, 'button'),
            "attributes": {
              "aria-label": "Next"
            }
          }
        } %}
        <div class="{{ bem(base_class, 'content') }}">
          {% include "@kicker" with {
            "kicker": {
              "text": "Next",
              "extra": bem(base_class, 'kicker')
            }
          } %}
          <span class="{{ bem(base_class, 'label') }}">{{ post_nav.next.title }}</span>
        </div>
      </a>
    {% endif %}
  </div>
{% endif %}
 
{
  "post_nav": {
    "prev": {
      "link": "/",
      "title": "Previous Post Title"
    },
    "next": {
      "link": "/",
      "title": "Next Post Title"
    }
  }
}
  • Content: 
    /* ------------------------------------*\
  $POST-NAV
\*------------------------------------ */

.c-post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--dotd-space-lg);
  padding-top: var(--dotd-space-lg);
  border-top: var(--dotd-border-width) solid var(--dotd-color-border-default);

  @include media(">small") {
    align-items: center;
  }

  &__item {
    display: flex;
    gap: var(--dotd-space);
    width: 50%;
    flex-direction: column;
    align-items: flex-start;

    @include media(">small") {
      flex-direction: row;
      align-items: center;
    }

    &--next {
      text-align: right;
      align-items: flex-end;

      @include media(">small") {
        flex-direction: row-reverse;
        align-items: center;
      }
    }

    &:hover:not(:disabled),
    &:focus {
      color: inherit;

      .c-post-nav__button {
        background-color: var(--dotd-color-background-primary-default);
        color: var(--dotd-color-content-primary-weak);
      }
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: var(--dotd-space-xs);
  }

  &__label {
    @include o-typography-body--lg('bold');
  }

  &__button {
    border: var(--dotd-border-width) solid var(--dotd-color-border-default);
    border-radius: var(--dotd-icon-xl);
  }
}
  • URL: /components/raw/post-nav/_post-nav.scss
  • Filesystem Path: components/02-molecules/navigation/post-nav/_post-nav.scss
  • Size: 1.3 KB

No notes defined.