@universityofmaryland/umd-element-date-slider

<umd-element-date-slider> Web Component

Installation

$ yarn add @universityofmaryland/umd-element-date-slider

Basic Usage

Import the component in your js if you bundle using a transpile with babel or typescript.

import '@universityofmaryland/umd-element-date-slider';

HTML usage

Styling

You may utilize design system classes and tailwind CSS to style your content. See below for example usage.

UMD design system classes

Tailwind CSS Styles

Attributes

Attribute Name	default	Options	Notes
theme	"light"	"light" | "dark"	Defaults to light theme if omitted
aria-hidden	null	"true" | "false"	Resizes content when changed to false

Slots

• information (Required to provide a title)

• date-list (Required)

Example Usage

<umd-element-date-slider theme="dark">
  <div slot="introduction">
    <p>Dates Title</p>
    <a class="umd-cta-secondary" href="https://google.com">
      <svg
        class="umd-cta-icon"
        width="14"
        height="14"
        viewBox="0 0 14 14"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M7.7183 6.98243L2.625 1.89575H6.15621L11.306 6.93269L11.2563 6.98243L11.306 7.03218L6.15621 12.0691H2.625L7.7183 6.98243Z"
        />
      </svg>
      <span> CTA Link </span>
    </a>
  </div>

  <div slot="date-list">
    <div>
      <p>
        <span class="umd-interactive-sans-small">Nov</span>
        <span class="umd-sans-large">01</span>
      </p>
      <h3 class="umd-sans-large">Title 1</h3>
    </div>

    <div>
      <p>
        <span class="umd-interactive-sans-small">Nov</span>
        <span class="umd-sans-large">02</span>
      </p>
      <h3 class="umd-sans-large">Title 2</h3>
    </div>

    <div>
      <p>
        <span class="umd-interactive-sans-small">Nov</span>
        <span class="umd-sans-large">03</span>
      </p>
      <h3 class="umd-sans-large">Title 3</h3>
    </div>

    <div class="client-styled-event-info">
      <p>
        <span class="umd-interactive-sans-small">Nov</span>
        <span class="umd-sans-large">04</span>
      </p>
      <h3 class="umd-sans-large">Title 4</h3>
    </div>

    <div>
      <p>
        <span class="umd-interactive-sans-small">Nov</span>
        <span class="umd-sans-large">05</span>
      </p>
      <h3 class="umd-sans-large">Title 5</h3>
    </div>

    <div>
      <p>
        <span class="umd-interactive-sans-small">Nov</span>
        <span class="umd-sans-large">06</span>
      </p>
      <h3 class="umd-sans-large">Title 6</h3>
    </div>

    <div>
      <p>
        <span class="umd-interactive-sans-small">Nov</span>
        <span class="umd-sans-large">07</span>
      </p>
      <h3 class="umd-sans-large">Title 7</h3>
    </div>
  </div>
</umd-element-date-slider>

License

Distributed under the MIT license. See LICENSE for details.