UHasselt Component Library

Prev Next 

<!-- Prev -->
<a href="#" class="prev-next prev-next-prev">
      <span class="icon fal fa-angle-left  fa-2x " aria-hidden="true"></span>
  </a>


<!-- Next -->
<a href="#" class="prev-next prev-next-next">
      <span class="icon fal fa-angle-right  fa-2x " aria-hidden="true"></span>
  </a>


<!-- Prev Secondary -->
<a href="#" class="prev-next prev-next-prev prev-next-secondary">
      <span class="icon fal fa-angle-left  fa-2x " aria-hidden="true"></span>
  </a>


<!-- Next Secondary -->
<a href="#" class="prev-next prev-next-next prev-next-secondary">
      <span class="icon fal fa-angle-right  fa-2x " aria-hidden="true"></span>
  </a>


<{{element}}
    {{#if type}}type="{{type}}"{{/if}}
    {{#if title}}title="{{title}}"{{/if}}
    {{#if href}}href="{{href}}"{{/if}}
    {{#if target}}target="{{target}}"{{/if}}
    {{#if id}}id="{{id}}"{{/if}}
    {{#if isDisabled}}disabled{{/if}}
    class="prev-next {{#if modifier}}prev-next-{{modifier}}{{/if}}">
      {{#if icon}}
        {{ render '@icon' icon  }}
      {{/if}}
  </{{element}}>
 
/* Prev */
{
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "#",
  "id": "",
  "isDisabled": false,
  "modifier": "prev",
  "icon": {
    "style": "fal",
    "icon": "fa-angle-left",
    "size": "fa-2x"
  }
}


/* Next */
{
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "#",
  "id": "",
  "isDisabled": false,
  "modifier": "next",
  "icon": {
    "style": "fal",
    "icon": "fa-angle-right",
    "size": "fa-2x"
  }
}


/* Prev Secondary */
{
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "#",
  "id": "",
  "isDisabled": false,
  "modifier": "prev prev-next-secondary",
  "icon": {
    "style": "fal",
    "icon": "fa-angle-left",
    "size": "fa-2x"
  }
}


/* Next Secondary */
{
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "#",
  "id": "",
  "isDisabled": false,
  "modifier": "next prev-next-secondary",
  "icon": {
    "style": "fal",
    "icon": "fa-angle-right",
    "size": "fa-2x"
  }
}
  • Content: 
    .prev-next {
    @apply flex w-12 h-12 justify-center items-center bg-white shadow-lg rounded-full cursor-pointer no-underline;

    &.prev-next-secondary {
        @apply shadow-none;
    }
}
  • URL: /components/raw/prev-next/prev-next.css
  • Filesystem Path: src\components\02-atoms\prev-next\prev-next.css
  • Size: 200 Bytes

No notes defined.