Dialog - contextual

import { Dialog, DialogContextual, DialogConstants } from 'trinidad-ui'; import {
  AnimateInView
} from '@components/animate-in-view';

const _contextual = new DialogContextual({
  area: DialogConstants.area.CONTEXTUAL,
  branding: DialogConstants.branding.SPORT,
  attachTo: document.querySelector('.js-contextual-example-1'),
  title: '',
  message: [
    {
      type: DialogConstants.message.TEXT,
      text:
        'Simple contextual has no buttons and closes on click.'
    }
  ]
  })

const dialog = new Dialog();
dialog.add(_contextual);

//-----------------------------
// For Trinidad users
//-----------------------------
// In the world of Trinidad you can't use import, so you need to add
// a dependency to 'dialog' in your controller.
// Replace all 'DialogConstants' with svs.ui.dialog.
// Replace new DialogContextual with new svs.ui.dialog.Contextual({...
// Replace dialog.add(_contextual) with svs.ui.dialog.api.add(_contextual);

Read more about WCAG 2.1 AA.