@travlrcom/uikit/site/components/sidebar-documentation.html

TRAVLR UiKit

<div class="t-col-4 t-col-mobile-12">
  <div class="t-box t-box-with-shadow">
    <h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest">Colour Pallete</h2>
    <ul class="t-accordion t-no-padding">
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/theme-colours.html"
          class="t-accordion-title"
          title="Theme Colours">Theme Colours</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/greyscale.html"
          class="t-accordion-title"
          title="Greyscale">Greyscale</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/alerts.html"
          class="t-accordion-title"
          title="Alerts">Alerts</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
    </ul>
  </div>
  <div class="t-box t-box-with-shadow">
    <h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest">Typography</h2>
    <ul class="t-accordion t-no-padding">
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/hierarchy.html"
          class="t-accordion-title"
          title="Hierarcy">Hierarchy</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
    </ul>
  </div>
  <div class="t-box t-box-with-shadow">
    <h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest">Assets</h2>
    <ul class="t-accordion t-no-padding">
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/ui-icons.html"
          class="t-accordion-title"
          title="UI Icons">UI Icons</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/content-icons.html"
          class="t-accordion-title"
          title="Content Icons">Content Icons</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/brands-icons.html"
          class="t-accordion-title"
          title="Brands Icons">Brands Icons</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/loading-spinners.html"
          class="t-accordion-title"
          title="Loading Spinners">Loading Spinners</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
    </ul>
  </div>
  <div class="t-box t-box-with-shadow">
    <h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest">Elements</h2>
    <ul class="t-accordion t-no-padding">
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/button.html"
          class="t-accordion-title"
          title="Button">Button</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/radio-button.html"
          class="t-accordion-title"
          title="Radio Button">Radio Button</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/checkbox.html"
          class="t-accordion-title"
          title="Checkbox">Checkbox</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/toggle-button.html"
            class="t-accordion-title"
            title="Toggle Button">Toggle Button</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
        </li>
        <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/text-input.html"
            class="t-accordion-title"
            title="Text Input">Text Input</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
        </li>
        <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/selection-input.html"
            class="t-accordion-title"
            title="Selection Input">Selection Input</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/badge.html"
          class="t-accordion-title"
          title="Badge">Badge</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/tags.html"
          class="t-accordion-title"
          title="Tags">Tags</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/image.html"
          class="t-accordion-title"
          title="Image">Image</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
    </ul>
  </div>
  <div class="t-box t-box-with-shadow">
    <h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest">Components</h2>
    <ul class="t-accordion t-no-padding">
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/dropdown.html"
          class="t-accordion-title"
          title="Dropdown">Dropdown</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/date-picker.html"
          class="t-accordion-title"
          title="Date Picker">Date Picker</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/number-picker.html"
          class="t-accordion-title"
          title="Number Picker">Number Picker</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/slider.html"
            class="t-accordion-title"
            title="Slider">Slider</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
        </li>
        <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/alert.html"
            class="t-accordion-title"
            title="Alert">Alert</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
        </li>
        <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/notification.html"
            class="t-accordion-title"
            title="Notification">Notification</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/message.html"
          class="t-accordion-title"
          title="Message">Message</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/tooltip.html"
          class="t-accordion-title"
          title="Tooltip">Tooltip</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/modal.html"
          class="t-accordion-title"
          title="Modal">Modal</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/cards.html"
            class="t-accordion-title"
            title="Cards">Cards</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
        </li>
        <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/panel.html"
            class="t-accordion-title"
            title="Panel">Panel</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
        </li>
        <li class="t-accordion-item">
          <div class="t-accordion-item-header">
            <a
            href="/tabs.html"
            class="t-accordion-title"
            title="Tabs">Tabs</a>
            <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
          </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/breadcrumb.html"
          class="t-accordion-title"
          title="Breadcrumb">Breadcrumb</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/steps.html"
          class="t-accordion-title"
          title="Steps">Steps</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/pagination.html"
          class="t-accordion-title"
          title="Pagination">Pagination</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
    </ul>
  </div>
  <div class="t-box t-box-with-shadow">
    <h2 class="t-heading-4 t-m-b-16 t-color-grey-darkest">Layouts</h2>
    <ul class="t-accordion t-no-padding">
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/grid.html"
          class="t-accordion-title"
          title="Grid">Grid</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/navbar.html"
          class="t-accordion-title"
          title="Navbar">Navbar</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/hero.html"
          class="t-accordion-title"
          title="Hero">Hero</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/carousel.html"
          class="t-accordion-title"
          title="Carousel">Carousel</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
      <li class="t-accordion-item">
        <div class="t-accordion-item-header">
          <a
          href="/image-slideshow.html"
          class="t-accordion-title"
          title="Image Slideshow">Image Slideshow</a>
          <i class="t-accordion-icon t-icon icon-angle-right-small"></i>
        </div>
      </li>
    </ul>
  </div>
</div>