Tag select

Tag builder

Carousels

A Backbone View and accompanying CSS exists for creating carousels.

define([
  'Backbone',
  'lib/views/CarouselView',
  'hbs!lib/templates/myItemTemplate'
], function (
  Backbone,
  CarouselView,
  carouselItemTemplate
) {
  var carouselItems = new Backbone.Collection();

  carouselItems.add([
    {
      name: 'Item 1',
      description: 'Item description.'
    },
    {
      name: 'Item 2',
      description: 'Item description.'
    }
    // ...and so on
  ]);

  var carouselView = new CarouselView({
    el: document.getElementById('carousel'),
    collection: carouselItems,
    itemTemplate: carouselItemTemplate
  });

  carouselView.render();
});

Modals

Please include the lib/frontend/widgets/modal JS dependency and the blocks/modal Sass dependency to display modals.

Click me

#modal
  .modal__head
    %a.modal__close.modal__head__close{href: '#'}
      %i.g-button-modal-close Close
    %h3modal__head__title Demo modal
  %p This is a demonstration modal.

%button.button#button Click me

%script
  var $modal = $('#modal').modal({
    autoOpen: false
  });

  $('#button').on('click', function () {
    $modal.modal('open');
  });

Tooltips

Please include the lib/widgets/tooltip JS dependency and the blocks/tooltip Sass dependency to display tooltips.

Always remember that, due to the limitation of touch screens, an element that already performs some other action on click cannot also function as a tooltip. e.g., links and buttons cannot be tooltips unless that is their only function.

Hover/tap on me Hover/tap on me

%button.button#tooltip Hover/tap me to show a tooltip.

$('#tooltip-1').tooltip({
  content: 'This text is displayed in a tooltip.'
});

$('#tooltip-2').tooltip({
  content: 'This text is displayed in a tooltip.',
  inverse: true
});