Note - ZUI Documentation

Summary

The note pattern can be used to add sticky notes to places on a website. One binds a sticky note to an HTML element based on a CSS class or XPath query.

Name	Description	Default Value
`data-zui-note-timeout`	When this attribute is set, it will close the note after the given timeout. The value is in milliseconds. No values have been documented for this attribute.
`data-zui-note-fade-speed`	When the data-zui-note-fade-speed attribute is set, it will be used as the fadeout speed. The value is in milliseconds. No values have been documented for this attribute.
`data-zui-note-selector`	The selector of the element to which the note should be bound. No values have been documented for this attribute.
`data-zui-note-offset-x`	An additional horizontal offset to add to the note. No values have been documented for this attribute.
`data-zui-note-offset-y`	An additional vertical offset to add to the note. No values have been documented for this attribute.

Name	Description
`zui-note`	The zui-note class identifies an HTML element as a note.
`zui-note-title`	The zui-note-title class identifies an HTML element as the title part of a note.
`zui-note-content`	The zui-note-content class identifies an HTML that contains the content of a note.

Name	Description
`zui-note-closed`	The event that is triggered once a note is closed.

Name	Description
`zui-note-background`	The background color of a note.
`zui-note-border`	The border of a note.
`zui-note-border-radius`	The border radius of a note.
`zui-note-max-width`	The maximum width of a note.
`zui-note-padding`	The padding used within a note.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus risus arcu, ultricies euismod ornare vitae, molestie in diam. Donec a libero sed erat efficitur gravida. Curabitur vitae pellentesque augue. Integer vitae commodo libero, at porta justo. Mauris interdum libero eu faucibus sodales. Proin aliquet turpis neque, eu suscipit diam maximus vel. Phasellus viverra vel nibh at auctor. Nullam ac euismod dolor. Maecenas tincidunt, diam et rhoncus finibus, massa purus luctus leo, id blandit quam eros molestie massa. Mauris vehicula tempus faucibus. Donec tempus egestas tellus a tempor. Fusce a lacus ultrices, vestibulum augue id, feugiat metus. Nunc fermentum lorem ac accumsan pulvinar. Nunc tincidunt lobortis tincidunt.

Aliquam erat volutpat. Duis vestibulum tellus nulla, sit amet mollis mauris sagittis vel. Mauris hendrerit, ex eget pellentesque auctor, dui quam bibendum nunc, vitae aliquet metus dui in leo. Maecenas eget erat ac lacus ultricies fringilla eu eget orci. Sed mauris diam, dictum eget egestas in, semper quis tortor. Nullam aliquet convallis arcu quis gravida. Integer ac molestie tortor, ornare consequat augue. Praesent porttitor pellentesque blandit. Fusce porttitor metus metus, vel tempus dolor mattis vitae.

Vivamus ornare mauris odio, vel scelerisque dolor consequat et. Proin sit amet massa odio. Pellentesque pulvinar posuere justo, a maximus dolor viverra ac. Donec et dignissim dui, sed auctor eros. Etiam id purus id orci ornare sollicitudin. Vestibulum at varius nibh. Nunc varius, felis nec euismod facilisis, nisi metus imperdiet velit, id placerat justo velit sit amet libero. Pellentesque lacinia elit sed sapien commodo ultrices vitae non sapien. Fusce nunc quam, ullamcorper in convallis vitae, molestie sodales ipsum. Vivamus fermentum pulvinar sem quis sollicitudin. Sed in placerat neque, id congue diam. Nam nec rhoncus nulla. Nullam pellentesque fermentum leo, ut lacinia nisi scelerisque sit amet. Nulla viverra ligula eu dui mattis pellentesque.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales nisl pharetra, cursus massa quis, vehicula nibh. Donec vestibulum hendrerit nunc, vel viverra nulla auctor in. Mauris dapibus diam lacus, ac accumsan tellus posuere ultrices. Sed tincidunt erat nunc. Sed dignissim neque vitae risus sollicitudin tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis eu tincidunt ex, commodo hendrerit mi. Nullam eget sapien vehicula, eleifend lorem at, cursus nisi. Donec rutrum aliquam rhoncus. Maecenas non laoreet felis, nec aliquam nulla. Cras sit amet lacus ornare, venenatis orci varius, egestas lectus. Ut justo eros, sagittis eget est sit amet, ultricies iaculis enim. Vivamus laoreet faucibus nunc ac feugiat. Mauris id tincidunt orci.

Vivamus sem diam, aliquet ac ex non, consequat fermentum massa. Ut auctor pretium ligula, ac sagittis eros feugiat eu. Sed at dui lobortis, hendrerit tortor vel, convallis turpis. Cras venenatis nunc sit amet justo cursus dapibus. Phasellus tincidunt est et justo consectetur aliquet. Morbi viverra, ipsum eu ultrices aliquam, arcu nisi mollis lacus, quis ornare urna erat id ipsum. Phasellus laoreet ante urna, non cursus tortor condimentum nec. Proin lacinia vehicula nisi, eu tristique metus iaculis sit amet. Curabitur dui odio, pretium non sem non, venenatis tincidunt ligula. Proin condimentum dolor nec risus finibus mattis. Integer finibus bibendum convallis. Mauris hendrerit vitae dolor in feugiat. Curabitur et accumsan ipsum.

Content Box

This is such a cool content box!!

Markup

<div class="zui-note">
    <div class="zui-note-title">Profile Menu</div>

    <div class="zui-note-content">
        The profile menu is located in a sidebar. This makes it possible to extend the menu via a plugin.
        Maybe one would like to connect social networks here? It would be possible via plugin.
    </div>

    <span class="zui-icon zui-icon-x" role="button" tabindex="0"></span>
</div>