Modals

These are handy to create popup content that doesn't interfere with the main pages. Tab through and you'll notice the modals have automatic modal trappings, also like all our components it is fully accessible, having the appropriate aria attributes.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam aliquid distinctio accusantium ut explicabo ea harum repellat consequatur, facilis consequuntur minima ex magnam aliquam totam necessitatibus reprehenderit veniam, blanditiis rerum. 

<modal>
   <modal-trigger class="btn">
      Show dialog
   </modal-trigger>
   <modal-content>
      <modal-header>
         <modal-title>Edit profile</modal-title>
         <modal-description>
            Make changes to your profile here. Click save when you're done.
         </modal-description>
      </modal-header>
      <div>test</div>
   </modal-content>
</modal>

Note this requires javascript (Vuejs 2.0)