Notice

Examples

Notice

Body Content

Positive Notice

Body Content

Action Notice

Body Content

Warning Notice

Body Content

Negative Notice

Body Content

Info Notice

Body Content

Compliment Notice

Body Content

Contrast Notice

Body Content

Notice with icon

Body Content

HTML

<div class="hx-notice">
  <div class="hx-notice-head">Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice hx-positive">
  <div class="hx-notice-head">Positive Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice hx-action">
  <div class="hx-notice-head">Action Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice hx-warning">
  <div class="hx-notice-head">Warning Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice hx-negative">
  <div class="hx-notice-head">Negative Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice hx-info">
  <div class="hx-notice-head">Info Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice hx-compliment">
  <div class="hx-notice-head">Compliment Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice hx-contrast">
  <div class="hx-notice-head">Contrast Notice</div>
  <div class="hx-notice-body">Body Content</div>
</div>

<div class="hx-notice">
  <span class="hx-notice-head hx-group hx-horizontal hx-no-margin">
    <div class="hx-section hx-no-margin">Notice with icon</div>
    <div>
      <i class="fa fa-rocket"></i>
    </div>
  </span>
  <div class="hx-notice-body">Body Content</div>
</div>

Api

Change Log

Functions

hx.notice.bodySelectiondeprecated

Deprecated

Replaced by hx.noticeBody

Creates a detached div, classed with hx-notice-body, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.notice.headSelectiondeprecated

Deprecated

Replaced by hx.noticeHead

Creates a detached div, classed with hx-notice-head, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.noticeSelection

Creates a detached div, classed with hx-notice, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.noticeBodySelection

Creates a detached div, classed with hx-notice-body, wrapped in a selection

Returns

Selection

The selection containing the new element

hx.noticeHeadSelection

Creates a detached div, classed with hx-notice-head, wrapped in a selection

Returns

Selection

The selection containing the new element

Classes

hx-notice

Styles a div to show a notice

Classes

hx-notice-headerdeprecated

Deprecated

This class will be replaced by hx-notice-head

The header section of the notice

hx-notice-body

The body section of the notice

hx-notice-head

The header section of the Notice

Extra Classes

hx-action

Styles the notice with action colors

hx-complement

Styles the notice with complement colors

hx-contrast

Styles the notice with contrast colors

hx-info

Styles the notice to indicate that clicking it will lead to some form of documentation / information.

hx-negative

Adds styling indicative of failure, danger or something negative

hx-positive

Adds styling indicative of success, confirmation or something positive

hx-warning

Adds styling indicative of warning, to suggest the user should use caution