Text Links

Add the text-link class to a link to get a standard underline styling, hover colors, etc. You can add color classes to set the link color and its hover color. The disabled class sets the color and disables link interaction. All a tags inside of rich-text get this styling with the vibrant color. When you want a text link with an icon, put the class of text-link-text on a span inside a link or button without the text-link class.

Text Link Buttons

You can also add the text-link class to buttons to style them like text links.

Standard Buttons

These are buttons with a standardized containing shape.

Small Buttons

Add the class of btn-small.

Large Buttons

Add the class of btn-large.

Modal JS Events

The modal JS fires these events. These events bubble, so you can listen for them on the modal element, any parent, or the document. event.detail.modal is the modal element that opened or closed.

• ntgt.modal.open
  Fires when the modal starts to open.
• ntgt.modal.opened
  Fires when the modal has finished opening (after CSS transitions).
• ntgt.modal.close
  Fires when the modal starts to close.
• ntgt.modal.closed
  Fires when the modal has finished closing (after CSS transitions).

	document.addEventListener('ntgt.modal.opened', function(event){
		console.log('Model Opened: ', event.detail.modal);
	}, false);

Modal JS Functions

You can use these functions to initialize, open, and close modals. If you call ntgt.init() after all the modals and modal open buttons are in the DOM everything should just work. But if you add modals or modal open buttons to the DOM after that init function has run, you will need to run some of the modal init functions below. Also, if you want to open or close a modal from code without relying on the data-open-modal attribute, you can use the openModal and closeModal functions below.

• ntgt.modals.initModalOpenButtons(parent)
  Pass it a parent element (defaults to document). It will initialize all elements with the data-open-modal attribute within the parent as modal open buttons.
• ntgt.modals.initModal(modal)
  Pass it a modal element. It sets up event handlers for close buttons, anchor links, and click outside to close. It also emits events when the modal is closed.
• ntgt.modals.initModals(parent)
  Pass it a parent element (defaults to document). It will initialize all the modals within that parent.
• ntgt.modals.openModal(modal)
  Pass it a modal element. It will open the modal and emit events.
• ntgt.modals.closeModal(modal)
  Pass it a modal element. It will close.

	// Initialize modals and modal open buttons in a parent element
	let parent = document.querySelector('#my-parent');
	ntgt.modals.initModalOpenButtons(parent);
	ntgt.modals.initModals(parent);
	
	// Open a modal
	let modal = document.querySelector('#my-modal');
	ntgt.modals.openModal(modal);
	
	// Close a modal
	ntgt.modals.closeModal(modal);

Collapse JS Events

The collapse JS fires these events. These events bubble, so you can listen for them on the collapse element, any parent, or the document. event.detail contains references to the collapse and collapseToggle elements.

• ntgt.collapse.open
  Fires when the collapse starts to open.
• ntgt.collapse.opened
  Fires when the collapse has finished opening (after CSS transitions).
• ntgt.collapse.close
  Fires when the collapse starts to close.
• ntgt.collapse.closed
  Fires when the collapse has finished closing (after CSS transitions).

	document.addEventListener('ntgt.collapse.opened', function(event){
		console.log('Collapse Opened: ', event.detail);
	}, false);

Collapse JS Functions

You can use these functions to initialize, open, and close collapses. If you call ntgt.init() after all the collapses are in the DOM everything should just work. But if you add collapses to the DOM after that init function has run, you will need to run the collapse init function below. Also, if you want to open or close a collapse from code without the user clicking the collapse toggle, you can use the toggle, open, and close functions below.

• ntgt.collapse.initCollapses(parent)
  Pass it a parent element (defaults to document). It will initialize all collapse elements (including collapse accordions) within the parent.
• ntgt.collapse.toggle(collapse)
  Pass it a collapse element. It will toggle the collapse open/close state and emit events.
• ntgt.collapse.open(collapse)
  Pass it a collapse element. It will open the collapse and emit events.
• ntgt.collapse.close(collapse)
  Pass it a collapse element. It will close the collapse and emit events.

	// Initialize collapses and collapse accordions in a parent element
	let parent = document.querySelector('#my-parent');
	ntgt.collapse.initCollapses(parent);
	ntgt.collapse.initCollapseAccordions(parent);
	
	// Open a collapse
	let collapse = document.querySelector('#my-collapse');
	ntgt.collapse.open(collapse);
	
	// Close a collapse
	ntgt.collapse.close(collapse);

Popover1 JS Events

The popover1 JS fires these events. These events bubble, so you can listen for them on the popover element, any parent, or the document. event.detail contains references to the popover element.

• ntgt.popover1.open
  Fires when the popover1 starts to open.
• ntgt.popover1.opened
  Fires when the popover1 has finished opening (after CSS transitions).
• ntgt.popover1.close
  Fires when the popover1 starts to close.
• ntgt.popover1.closed
  Fires when the popover1 has finished closing (after CSS transitions).

	document.addEventListener('ntgt.popover1.opened', function(event){
		console.log('Popover1 Opened: ', event.detail);
	}, false);

Popover1 JS Functions

You can use these functions to initialize, open, and close popover1s. If you call ntgt.init() after all the popover1s are in the DOM everything should just work. But if you add popover1s to the DOM after that init function has run, you will need to run the popover1 setupTriggers function below. Also, if you want to open or close a popover1 from code without the user clicking the trigger, you can use the toggle, open, and close functions below.

• snui.popover1.setupTriggers(parent)
  Pass it a parent element (defaults to document). It will initialize all popup1 trigger elements within the parent.
• ntgt.popover1.toggle(popover)
  Pass it a popover element. It will check the popover's open/close status and call open() or close() accordingly.
• ntgt.popover1.open(popover)
  Pass it a popover element. It will open the popover and emit events.
• ntgt.popover1.close(popover)
  Pass it a popover element. It will close the popover and emit events.

// Initialize popover1 triggers in a parent element
let parent = document.querySelector('#my-parent');
ntgt.popover1.setupTriggers(parent);

// Open a popover1
let popover = document.querySelector('#my-popover');
ntgt.popover1.open(popover);

// Close a popover1
ntgt.popover1.close(popover);

// Toggle a popover1
ntgt.popover1.toggle(popover);