HexagonJS
Edit Page
Notice
Provides the hx-notice class for styled containers.
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
Functions
hx.noticeBodySelectionadded
Creates a detached div, classed with hx-notice-body, wrapped in a selection
Returns
Selection
The selection containing the new element
hx.noticeHeadSelectionadded
Creates a detached div, classed with hx-notice-head, wrapped in a selection
Returns
Selection
The selection containing the new element
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
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