DJELIBEYBI Style Guide and Components Library

https://standards.aviva.com/ion/component-library/
Admin
This documentation describes the DJELIBEYBI Style Guide and Components Library, providing guidelines...
Tokens:476,216
Snippets:6,413
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Wallet Component Basic Setup

Source: https://standards.aviva.com/ion/component-library/components/wallet

Configure available payment options by providing a comma-separated list of IDs to the 'data-options' attribute. This example shows how to set up credit card and instalment payment options.

```html
<div data-module="o-wallet" data-options="credit-card,instalments,other"></div>
```

--------------------------------

### Programmatic Control Example

Source: https://standards.aviva.com/ion/component-library/components/show-more/archive.html

An example demonstrating how to initialize the Show More component and control it programmatically, including updating its settings.

```APIDOC
## Programmatic Control Example

```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-show-more' ], function ( mShowMoreModule ) {
		var mShowMoreEl = document.querySelector( '#showmoreId' ),
			mShowMoreInstance = mShowMoreModule.initInstance( mShowMoreEl );

		mShowMoreInstance.setSettings({
			expand : 'Reveal more',
			contact : 'Reveal less',
			limits : '30,75,150',
		});
	});
});
```
```

--------------------------------

### Search Button Example

Source: https://standards.aviva.com/ion/component-library/components/button/archive.html

Example of a search button implementation. This snippet demonstrates the basic structure for a search button.

```html
Search Search site
Search
```

--------------------------------

### Hero with Inline Image Example

Source: https://standards.aviva.com/ion/component-library/components/long-form-hero

This is an interactive example demonstrating the hero component with an inline image. It showcases the layout and basic functionality.

```html
<!-- Interactive example -->
<div class="hero hero--long-form">
  <div class="hero__image-wrapper">
    <img class="hero__image" src="/assets/images/hero.jpg" alt="Hero image">
  </div>
  <div class="hero__content">
    <div class="hero__breadcrumb">Home / Business / Personal</div>
    <h1 class="hero__title">Log in or register</h1>
    <p class="hero__subtitle">Access your account or create a new one.</p>
  </div>
</div>

<!-- Example of chapter navigation that would appear on scroll -->
<nav class="chapter-nav">
  <ul>
    <li><a href="#section1">Log in</a></li>
    <li><a href="#section2">or</a></li>
    <li><a href="#section3">Register</a></li>
  </ul>
</nav>
```

--------------------------------

### Promo Card v5 Markup Example

Source: https://standards.aviva.com/ion/component-library/components/card-promo/archive.html

This example shows the HTML structure for a Version 5 Promo Card, including image and content sections. It demonstrates the use of various classes for layout and styling.

```html
<div class="m-card [m-card--image-left/m-card--image-right] [m-card--40/m-card--60] m-card--promo t-accent-light [Modifier]">
	<div class="m-card-image">
		<picture>
			<source type="image/webp" media="..." srcset="..." width="..." height="..." />
			...
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
	</div>
	<div class="m-card-content">
		<div class="m-card-content__inner">
			<h2 class="a-heading a-heading--2 [Modifier]">...</h2>
			<p>...</p>
			<ul class="m-button-group">
				<li class="m-button-group__item"><a class="a-button a-button--primary" href="...">...</a></li>
				<li class="m-button-group__item"><a class="a-button" href="...">...</a></li>
			</ul>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			...
		</div>
	</div>
</div>
```

--------------------------------

### Previous Extended Functionality Example

Source: https://standards.aviva.com/ion/component-library/components/modal-fullscreen/archive.html

This example demonstrates the previous method of handling modal close and destroy events using pubsub.

```javascript
<script>
	document.addEventListener( 'requireready', function () {
		require([ 'jquery', 'pubsub' ], function ( $, pubsub ) {
			$( document ).on( 'click', '.close-test', function ( event ) {
				event.preventDefault();
				setTimeout( function () {
					pubsub.emit( 'modal:close' );
					$( '.notification-target' ).empty();
				}, 1000 );
			});
			$( document ).on( 'click', '.destroy-test', function ( event ) {
				event.preventDefault();
				setTimeout( function () {
					pubsub.emit( 'modal:destroy' );
					$notification = '<div class="m-card m-card-notification m-card-notification--success" role="status"><div class="m-card-content"><p>Function successful</p></div></div>';
					$( '.notification-target' ).empty().append( $notification );
				}, 1000 );
			})
		});
	});
</script>
```

--------------------------------

### Extended Functionality Example (Pre-v5.0.0)

Source: https://standards.aviva.com/ion/component-library/components/modal/archive.html

This example demonstrates how to close or destroy modals using `pubsub.emit` prior to v5.0.0. It includes event listeners for click actions and uses `setTimeout` for delayed actions.

```javascript
<script>
	document.addEventListener( 'requireready', function () {
		require([ 'jquery', 'pubsub' ], function ( $, pubsub ) {
			$( document ).on( 'click', '.close-test', function ( event ) {
				event.preventDefault();
				setTimeout( function () {
					pubsub.emit( 'modal:close' );
					$( '.notification-target' ).empty();
				}, 1000 );
			});
			$( document ).on( 'click', '.destroy-test', function ( event ) {
				event.preventDefault();
				setTimeout( function () {
					pubsub.emit( 'modal:destroy' );
					$notification = '<div class="m-card m-card-notification m-card-notification--success" role="status"><div class="m-card-content"><p>Function successful</p></div></div>';
					$( '.notification-target' ).empty().append( $notification );
				}, 1000 )
			})
		});
	});
</script>
```

--------------------------------

### Interactive Promo Card Example

Source: https://standards.aviva.com/ion/component-library/components/card-promo-imagery

An interactive example of a promo card, demonstrating its functionality and appearance. This is typically used for user engagement and showcasing dynamic content.

```html
Tagline / dateline
```

--------------------------------

### Payment Type Image Path Example

Source: https://standards.aviva.com/ion/component-library/components/wallet

This is an example of the full image path for payment type icons available in the icon library. You can use these or your own custom images.

```html
<img src="//static.aviva.io/assets/themes-icons/v2/[ organisation ]/[ theme name ]/functional/payment-types/[ card type ].svg" decoding="async" width="..." height="..." alt="..." />
```

--------------------------------

### Basic Image Card Example

Source: https://standards.aviva.com/ion/component-library/components/card-navigation

Example of a navigation card that includes an image. Specify aspect ratio using `m-card-image--16x9` or `m-card-image--1x1`.

```html
<a class="m-card [ Modifiers ]" href="...">
	<div class="m-card-image [ Modifiers ]">
		<picture>
			<source type="image/webp" media="(min-width: ...)" srcset="..." width="..." height="..." />
			...
			<source type="image/webp" srcset="..." width="..." height="..." />
			<img src="..." decoding="async" width="..." height="..." alt="" />
		</picture>
	</div>
	<div class="m-card-content">
		<div class="m-card-content__inner m-card-content__inner--top">
			<p class="a-text-tagline">...</p>
			<h2 class="a-heading a-heading--2 a-heading--semibold">...</h2>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-readmore"><span>...</span></p>
		</div>
	</div>
</a>
```

--------------------------------

### Slider Tick Configuration Example

Source: https://standards.aviva.com/ion/component-library/components/slider

Demonstrates how to configure tick marks, their positions, and labels for the slider component.

```javascript
ticks : [ 1, 50, 100 ]
```

```javascript
ticksPositions : [ 0, 50, 100 ]
```

```javascript
ticksLabels : [ '£1', '£50' ,'£100' ]
```

```javascript
ticksLabels : [ '£1', '', '£100' ]
```

--------------------------------

### Button Group Example

Source: https://standards.aviva.com/ion/component-library/components/button

A simple button group implementation using a list structure with items for each button.

```html
<ul class="m-button-group">
	<li class="m-button-group__item">...</li>
	<li class="m-button-group__item">...</li>
</ul>
```

--------------------------------

### Control Slider Component Programmatically: Get Value

Source: https://standards.aviva.com/ion/component-library/components/slider

Example of how to programmatically get the current value(s) of the slider.

```javascript
getValue()
```

--------------------------------

### Initialize and Configure Show More Component

Source: https://standards.aviva.com/ion/component-library/components/show-more/archive.html

Initializes a show more component instance and updates its settings programmatically. Ensure the framework is ready and the module is required before use.

```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-show-more' ], function ( mShowMoreModule ) {
		var mShowMoreEl = document.querySelector( '#showmoreId' ),
			mShowMoreInstance = mShowMoreModule.initInstance( mShowMoreEl );

		mShowMoreInstance.setSettings({
			expand : 'Reveal more',
			contact : 'Reveal less',
			limits : '30,75,150',
		});
	});
});
```

--------------------------------

### AJAX Source Function Example

Source: https://standards.aviva.com/ion/component-library/components/predictive-search

A sample `source` function for the predictive search component that performs an AJAX GET request. It utilizes `XMLHttpRequest` to fetch data and includes basic error handling for the HTTP status.

```javascript
source : function( term, response, xhr ) {
	xhr.open( 'GET', '//www.test.com/search?q=' + term, true );
	xhr.onload = function onload() {
		var jsonResponse,
			responseData = [],
			i;
		if ( xhr.status >= 200 && xhr.status < 400 ) {
			jsonResponse = JSON.parse( xhr.responseText );

			// Format response from service

			response( responseData );
		}
	};
	xhr.send();
}
```

--------------------------------

### Initialize and Open Modal Instance

Source: https://standards.aviva.com/ion/component-library/components/modal

This example demonstrates how to initialize a modal instance and open it programmatically using the modal API. Ensure the 'frameworkready' event has fired and the required module is loaded.

```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/o-modal' ], function ( oModalModule ) {
		// modalLinkEl should be the link element, not the modal content area.
		var modalLinkEl = document.querySelector( '#modalLinkId' ),
			modalInstance = oModalModule.initInstance( document.documentElement );

		modalInstance.open( modalLinkEl );
	});
});
```

--------------------------------

### Error Code Template Examples

Source: https://standards.aviva.com/ion/component-library/components/error-page

Examples of common error code pages like 401, 403, 404, and 500. These are interactive examples.

```html
Skip to content
  * Personal
  * Business


Global.com
  * Menu
  *     * Log in
    * or
    * Register
Log in
  * Search


Praesent vel neque
Close menu
Search Search site Search
## Log in or register
  * Log in
  * or
  * Register


Close menu
```

--------------------------------

### Controlling the Media Player Programmatically

Source: https://standards.aviva.com/ion/component-library/components/video

The media player can be controlled programmatically to play, pause, mute, set and get volume, set and get captions and their settings, and set and get a particular point within a media file.

```APIDOC
## Controlling the Media Player Programmatically

### Description
Provides methods to control media playback, volume, captions, and seek position.

### Methods

- **play()**
  - Description: Play the media file.

- **pause()**
  - Description: Pause the media file.

- **mute()**
  - Description: Mute / unmute the media file.

- **setVolume(volume: number)**
  - Description: Set the volume to a particular level. 'volume' should be an integer between 0 and 10.

- **getVolume()**
  - Description: Returns current volume as an integer between 0 and 10, or 'muted' if audio is muted.

- **setCaptions(settings: 'on' | 'off' | string)**
  - Description: Sets single closed captions to show the only available captions or, if multiple languages are available, to the specified language. 'off' will hide captions for both variants. Set to 'on', 'off', or an appropriate language code (e.g., 'en' or 'fr'). Note: this will not work with browsers that use only the native video/audio player.

- **getCaptionsSettings()**
  - Description: Returns an object containing the current captions settings. For single captions, this will be on or off. For multiple captions, this will be on or off and the particular language selected (null if captions are off). Note: this will not work with browsers that use only the native video/audio player.

- **setTime(time: number)**
  - Description: Skips media to the selected point. 'time' should be an integer in seconds.

- **getTime()**
  - Description: Returns the current position within the media file in seconds.

### Example Usage
```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-media-player' ], function ( mMediaPlayerModule ) {
		var mediaPlayerEl = document.querySelector( '#mediaPlayerTest' ),
			mediaPlayerInstance = mMediaPlayerModule.initInstance( mediaPlayerEl );

		mediaPlayerInstance.play();
		mediaPlayerInstance.setCaptions( 'on' );
	});
});
```
```

--------------------------------

### Show/Hide Component with Context Help

Source: https://standards.aviva.com/ion/component-library/components/context-help

This example demonstrates the integration of the context help component within a show/hide module. It includes a heading with a context help link that can be activated as a modal.

```html
<div class="m-showhide" data-module="m-showhide" data-module-load="true">
	<h2 class="a-heading a-heading--2 m-showhide__heading">... <a class="a-context-help a-context-help--hidden-text a-link-icon" href="..." data-module="a-context-help" data-module-load="true" data-variant="modal"><span class="a-link-icon__inner u-hidden--visually">...</span></a></h2>
	<div class="m-showhide__content">
		...
	</div>
	...
</div>
```

--------------------------------

### Video Player Control Methods

Source: https://standards.aviva.com/ion/component-library/components/video/archive.html

The media player can be controlled programmatically to play, pause, mute, set and get volume, set and get captions and their settings and set and get a particular point within a media file.

```APIDOC
## Video Player Control Methods

### Description
Provides methods to programmatically control the video player's playback, volume, captions, and seek position.

### Methods

- **play()**
  - Description: Play the media file.

- **pause()**
  - Description: Pause the media file.

- **mute()**
  - Description: Mute or unmute the media file.

- **setVolume( volume: number )**
  - Description: Set the volume to a particular level. Accepts an integer between 0 and 10.

- **getVolume()**
  - Description: Returns the current volume as an integer between 0 and 10, or 'muted' if audio is muted.

- **setCaptions( settings: 'on' | 'off' | string )**
  - Description: Sets closed captions. Accepts 'on', 'off', or a language code (e.g., 'en', 'fr'). Note: May not work with browsers using native players.

- **getCaptionsSettings()**
  - Description: Returns an object with current caption settings (on/off, selected language). Note: May not work with browsers using native players.

- **setTime( time: number )**
  - Description: Skips media to a selected point in seconds. Accepts an integer.

- **getTime()**
  - Description: Returns the current position within the media file in seconds.

### Example Usage
```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-media-player' ], function ( mMediaPlayerModule ) {
		var mediaPlayerEl = document.querySelector( '#mediaPlayerTest' ),
			mediaPlayerInstance = mMediaPlayerModule.initInstance( mediaPlayerEl );

		mediaPlayerInstance.play();
		mediaPlayerInstance.setCaptions( 'on' );
	});
});
```
```

--------------------------------

### Initialize and Control Show/Hide Instance

Source: https://standards.aviva.com/ion/component-library/components/showhide

Initializes a Show/Hide instance and demonstrates programmatic control for opening a specific section. Ensure the 'frameworkready' event is listened for and the module is required.

```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-showhide' ], function ( mShowhideModule ) {
		var mShowhideEl = document.querySelector( '#showhideId' ),
			mShowhideInstance = mShowhideModule.initInstance( mShowhideEl );

			mShowhideInstance.setSettings({
			expand : 'Show',
			contact : 'Hide',
		});

		mShowhideInstance.open( '#showhideHeadingId', true );
	});
});
```

--------------------------------

### Accessing Framework Modules (v5+)

Source: https://standards.aviva.com/ion/component-library/components/filters-results/archive.html

This code demonstrates the updated method for loading modules via require and initializing instances in Framework v5 and later.

```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-filter-tags' ], function ( mFilterTagsModule ) {
		var filterEl = document.querySelector( '.m-filter-tags' ),
			applyFilters = function() {
				// Callback function which should then process which checkboxes have been selected
			},
			filterInstance = mFilterTagsModule.initInstance( filterEl );

		filterInstance.setCallback( applyFilters );
	});
});
```

--------------------------------

### Audio Player Programmatic Control

Source: https://standards.aviva.com/ion/component-library/components/audio/archive.html

The media player can be controlled programmatically to play, pause, mute, set and get volume, set and get captions and their settings, and set and get a particular point within a media file.

```APIDOC
## Audio Player Methods

### Description
Provides methods to control the audio player programmatically.

### Methods

- **`play()`**
  - Description: Play the media file.

- **`pause()`**
  - Description: Pause the media file.

- **`mute()`**
  - Description: Mute / unmute the media file.

- **`setVolume( 0 - 10 )`**
  - Description: Set the volume to a particular level. Set 'volume' to an integer between 0 and 10.

- **`getVolume()`**
  - Description: Returns current volume as an integer between 0 and 10, or 'muted' if audio is muted.

- **`setCaptions( on | off | language code )`**
  - Description: Sets single closed captions to show the only available captions or, if multiple languages are available, to the specified language. 'off' will hide captions for both variants. Set to 'on', 'off', or an appropriate language code (e.g., 'en' or 'fr').
  - Note: This will not work with browsers that use only the native video/audio player.

- **`getCaptionsSettings()`**
  - Description: Returns an object containing the current captions settings. For single captions, this will be on or off. For multiple captions, this will be on or off and the particular language selected (null if captions are off).
  - Note: This will not work with browsers that use only the native video/audio player.

- **`setTime( time )`**
  - Description: Skips media to the selected point. Set 'time' to an integer in seconds.

- **`getTime()`**
  - Description: Returns the current position within the media file in seconds.

### Example Usage
```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-media-player' ], function ( mMediaPlayerModule ) {
		var mediaPlayerEl = document.querySelector( '#mediaPlayerTest' ),
			mediaPlayerInstance = mMediaPlayerModule.initInstance( mediaPlayerEl );

		mediaPlayerInstance.play();
		mediaPlayerInstance.setCaptions( 'on' );
	});
});
```
```

--------------------------------

### Initialize and Control Audio Player

Source: https://standards.aviva.com/ion/component-library/components/audio/archive.html

This snippet demonstrates how to initialize the media player instance and control its playback programmatically. Ensure the 'frameworkready' event is listened for and the 'blocks/m-media-player' module is required.

```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-media-player' ], function ( mMediaPlayerModule ) {
		var mediaPlayerEl = document.querySelector( '#mediaPlayerTest' ),
			mediaPlayerInstance = mMediaPlayerModule.initInstance( mediaPlayerEl );

			mediaPlayerInstance.play();
			mediaPlayerInstance.setCaptions( 'on' );
	});
});
```

--------------------------------

### Show More Component Settings

Source: https://standards.aviva.com/ion/component-library/components/show-more/archive.html

These are the available settings for the Show More component that can be configured during initialization or updated using the `setSettings` method.

```APIDOC
## Show More Component Settings

### Setting Options

**Required options must be set when initialising the component.**

| Attribute   | Type   | Description                                                                                                                               |
|-------------|--------|-------------------------------------------------------------------------------------------------------------------------------------------|
| `expand`    | string | Text used for the expand button on the show more, e.g., `'Show more'`                                                                     |
| `contract`  | string | Text used for the contract button on the show more, e.g., `'Show less'`                                                                   |
| `description` | string | Text for where a descriptive link is required, e.g., `'this topic'`                                                                       |
| `limits`    | string | Limits the number of characters to be displayed when collapsed at mobile, tablet, and desktop via comma-separated values for each breakpoint. e.g., `'60,170,220'` |
| `truncate`  | string | Truncation setting to either disable truncation at all breakpoints using the value `'none'` or to specify truncation at mobile, tablet, and desktop via comma-separated true/false values for each breakpoint. e.g., `'true,true,false'` |
```

--------------------------------

### Lazy Tabs with Links and Content

Source: https://standards.aviva.com/ion/component-library/components/tabs-section

This example demonstrates the structure for a lazy-loaded tabs section using links. It includes attributes for module initialization and lazy loading.

```html
<div class="m-tabs m-tabs--links m-tabs--links-lazy" data-module="m-tabs" data-module-load="true">
	<div class="m-tabs__list">
		<ul class="a-list-plain">
			<li><a href="..." class="a-heading a-heading--3 m-tabs__heading">...</a></li>
			<li><a href="..." class="a-heading a-heading--3 m-tabs__heading">...</a></li>
			...
		</ul>
	</div>
	<div class="m-tabs__content" id="...">
		<h3 class="a-heading a-heading--3 m-tabs__heading">...</h3>
		...
	</div>
</div>
```

--------------------------------

### Form Help Show More with Custom CTAs Markup

Source: https://standards.aviva.com/ion/component-library/components/form-help-show-more

This example shows how to implement the Form Help Show More component with custom expand and contract text using data attributes.

```html
<div class="m-form-row">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<div class="m-show-more" id="..." data-module="m-show-more" data-description="..." data-expand="..." data-contract="...">
			<p>...</p>
			...
		</div>
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" aria-describedby="..." />
	</div>
</div>
```

--------------------------------

### Standard Show More Component

Source: https://standards.aviva.com/ion/component-library/components/show-more

Use this snippet for the basic implementation of the 'Show More' component. It requires a data-module attribute and a description.

```html
<div class="m-show-more" data-module="m-show-more" data-description="..." >
	<p>...</p>
</div>

<!-- OR -->

<div class="m-show-more" data-module="m-show-more" data-description="..." >
	[object]
	...
</div>
```

--------------------------------

### Accessing Framework Modules (Pre-v5)

Source: https://standards.aviva.com/ion/component-library/components/filters-results/archive.html

This code shows the previous method for accessing modules via require in the Framework setup.

```javascript
document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/m-filter-tags' ], function () {
		var filterEl = document.querySelector( '.m-filter-tags' ),
			applyFilters,
			filterLoaded = setInterval( function() {
				if ( filterEl.classList.contains( 'js-m-filter-tags' ) ) {
					filterEl.setCallback( applyFilters );
					clearInterval( filterLoaded );
				}
			}, 250);

		applyFilters = function() {
			// Callback function which should then process which checkboxes have been selected
		}
	});
});
```

--------------------------------

### outerWidthTrue

Source: https://standards.aviva.com/ion/component-library/components/utility-javascript

Get width of the given Node including its margins.

```APIDOC
## outerWidthTrue

### Description
Get width of the given Node **including** its margins.

### Signature
```javascript
utility.outerWidthTrue( target );
```

### Parameters
#### target
- **target** (Node) - The DOM node to measure.
```

--------------------------------

### outerHeightTrue

Source: https://standards.aviva.com/ion/component-library/components/utility-javascript

Get height of the given Node including its margins.

```APIDOC
## outerHeightTrue

### Description
Get height of the given Node **including** its margins.

### Signature
```javascript
utility.outerHeightTrue( target );
```

### Parameters
#### target
- **target** (Node) - The DOM node to measure.
```

--------------------------------

### Category Configuration with Classes

Source: https://standards.aviva.com/ion/component-library/components/predictive-search

Example of configuring the `categories` setting for predictive search. This demonstrates how to include a class name for each category to apply specific styling, such as icons.

```javascript
categories : {
	area : [ 'Cities/Areas', 'm-predictive-search-results__category--areas' ],
	places : [ 'Places/Landmarks', 'm-predictive-search-results__category--places' ],
	garages : [ 'Garages', 'm-predictive-search-results__category--garages' ]
}
```

--------------------------------

### parents

Source: https://standards.aviva.com/ion/component-library/components/utility-javascript

Get array of matching parent Nodes for the given Node.

```APIDOC
## parents

### Description
Get array of matching parent Nodes for the given Node.

### Signature
```javascript
utility.parents( target, selector );
```

### Parameters
#### target
- **target** (Node) - The DOM node to find parents for.
#### selector
- **selector** (string) - A CSS selector to filter the parent nodes.
```

--------------------------------

### offset

Source: https://standards.aviva.com/ion/component-library/components/utility-javascript

Get the offset of the current Node. Returns an object with 'top' and 'left' values.

```APIDOC
## offset

### Description
Get the offset of the current Node. Returns an object with 'top' and 'left' values.

### Signature
```javascript
utility.offset( target );
```

### Parameters
#### target
- **target** (Node) - The DOM node to get the offset from.
```
Tokens:
Raw