HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Card
An api and set of styles for creating cards
Examples

HTML

<div id="card-container"></div>

JavaScript

function titleText (title, text) {
  return hx.card.section()
    .add(hx.detached('div')
      .add(hx.card.title({text: title})))
    .add(hx.detached('div')
    .add(hx.card.text({text: text})))
}

function sparkline (options) {
  return hx.card.group()
    .add(hx.card.fixed.section().add(hx.card.text({text: options.text})))
    .add(hx.card.section().add(hx.sparkline({strokeColor: options.sparklineColor, data: options.sparklineData})))
}

function random (i) {
  return {
    x: i,
    y: Math.random()
  }
}

function statusCard (name, context) {
  return hx.card()
    .add(hx.card.header.section({ context: context})
      .add(hx.card.title({text: name})))
    .add(hx.card.header.group()
      .add(titleText('Status', 'Normal'))
      .add(titleText('Uptime', '5 days'))
      .add(titleText('Memory Usage', '482 MB'))
      .add(titleText('Thread Count', '19'))
      .add(titleText('Page Hits', '2236 / s')))
    .add(hx.card.aligned()
      .add(sparkline({text: 'Memory Use', sparklineColor: hx.theme().plot.colors[0], sparklineData: hx.range(60).map(random)}))
      .add(sparkline({text: 'Thread Count', sparklineColor: hx.theme().plot.colors[1], sparklineData: hx.range(60).map(random)}))
      .add(sparkline({text: 'Page Hits', sparklineColor: hx.theme().plot.colors[2], sparklineData: hx.range(60).map(random)}))
      .add(sparkline({text: 'Messages Processed', sparklineColor: hx.theme().plot.colors[3], sparklineData: hx.range(60).map(random)})))
}

hx.select('#card-container')
  .add(statusCard('Instance 1', undefined))
  .add(statusCard('Instance 2', 'positive'))
  .add(statusCard('Instance 3', 'negative'))
Api
Change Log
Card Functions
Functions to create an element with the hx-card class applied
hx.cardSelection
Creates a detached card element wrapped in a selection
Returns
Selection
The element wrapped in a hexagon selection
hx.card.smallSelection
Creates a detached card element wrapped in a selection with the hx-card-small class applied to make the padding inside all child hx.card.section() elements smaller.
Returns
Selection
The element wrapped in a hexagon selection
Layout Blocks
Functions to create layout inside a hx-card selection
hx.card.[small | normal | slim].[fixed].[joint].[header].[vertical].groupoptionsObjectSelection
Creates a card group. Cards can be made up of multiple groups and sections.
There are multiple optional modifiers that can be used to construct a group.

small | normal | slim

These change the amount of padding for child sections by applying the hx-card-small, hx-card-normal or hx-card-slim class to the group.
normal can be used to override the padding inside a hx.card.small()
small can be used to override the padding inside a hx.card()
slim can be used to remove the padding on an element inside any card

fixed

Applies the hx-card-fixed class to the group to prevent it from expanding to take up the available space.

joint

Applies the hx-card-joint class to join the group to the next group/section

header

Applies the hx-card-header class to the group to display the group as a header
The available combinations are: 
// Default groups
hx.card.group()

hx.card.fixed.group()

hx.card.fixed.joint.group()
hx.card.fixed.vertical.group()
hx.card.fixed.header.group()
hx.card.fixed.joint.vertical.group()
hx.card.fixed.joint.header.group()
hx.card.fixed.joint.vertical.header.group()
hx.card.fixed.vertical.header.group()

hx.card.joint.group()
hx.card.joint.header.group()
hx.card.joint.vertical.group()
hx.card.joint.vertical.header.group()

hx.card.vertical.group()
hx.card.vertical.header.group()

hx.card.header.group()


// Small groups
hx.card.small.group()

hx.card.small.fixed.group()

hx.card.small.fixed.joint.group()
hx.card.small.fixed.vertical.group()
hx.card.small.fixed.header.group()
hx.card.small.fixed.joint.vertical.group()
hx.card.small.fixed.joint.header.group()
hx.card.small.fixed.joint.vertical.header.group()
hx.card.small.fixed.vertical.header.group()

hx.card.small.joint.group()
hx.card.small.joint.header.group()
hx.card.small.joint.vertical.group()
hx.card.small.joint.vertical.header.group()

hx.card.small.vertical.group()
hx.card.small.vertical.header.group()

hx.card.small.header.group()


// Normal groups
hx.card.normal.group()

hx.card.normal.fixed.group()

hx.card.normal.fixed.joint.group()
hx.card.normal.fixed.vertical.group()
hx.card.normal.fixed.header.group()
hx.card.normal.fixed.joint.vertical.group()
hx.card.normal.fixed.joint.header.group()
hx.card.normal.fixed.joint.vertical.header.group()
hx.card.normal.fixed.vertical.header.group()

hx.card.normal.joint.group()
hx.card.normal.joint.header.group()
hx.card.normal.joint.vertical.group()
hx.card.normal.joint.vertical.header.group()

hx.card.normal.vertical.group()
hx.card.normal.vertical.header.group()

hx.card.normal.header.group()


// Slim groups
hx.card.slim.group()

hx.card.slim.fixed.group()

hx.card.slim.fixed.joint.group()
hx.card.slim.fixed.vertical.group()
hx.card.slim.fixed.header.group()
hx.card.slim.fixed.joint.vertical.group()
hx.card.slim.fixed.joint.header.group()
hx.card.slim.fixed.joint.vertical.header.group()
hx.card.slim.fixed.vertical.header.group()

hx.card.slim.joint.group()
hx.card.slim.joint.header.group()
hx.card.slim.joint.vertical.group()
hx.card.slim.joint.vertical.header.group()

hx.card.slim.vertical.group()
hx.card.slim.vertical.header.group()

hx.card.slim.header.group()
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
Component
api
This api can be obtained like this 
var group = hx.card.group()
var api = group.component()
Properties
contextString
Gets the context of the group
Returns
String
The context of the group (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
contextcontextStringObject
Sets the context of the group
Arguments
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
Returns
Object
Returns this api object.
Returns
Selection
Returns a selection containing the detached element
hx.card.[small | normal | slim].[fixed].[joint].[header].sectionoptionsObjectSelection
Creates a card section. Cards can be made up of multiple sections and groups.
There are multiple optional modifiers that can be used to construct a section.

small | normal | slim

These change the amount of padding by applying the hx-card-small hx-card-normal or hx-card-slim class to the section.
normal can be used to override the padding inside a hx.card.small()
small can be used to override the padding inside a hx.card()
slim can be used to remove the padding on an element inside any card

fixed

Applies the hx-card-fixed class to the section to prevent it from expanding to take up the available space.

joint

Applies the hx-card-joint class to join the section to the next group/section

header

Applies the hx-card-header class to the section to display the section as a header
The available combinations are: 
// Default sections
hx.card.section()

hx.card.fixed.section()
hx.card.fixed.joint.section()
hx.card.fixed.header.section()
hx.card.fixed.joint.header.section()

hx.card.joint.section()
hx.card.joint.header.section()

hx.card.header.section()


// Small Sections
hx.card.small.section()

hx.card.small.fixed.section()
hx.card.small.fixed.joint.section()
hx.card.small.fixed.header.section()
hx.card.small.fixed.joint.header.section()

hx.card.small.joint.section()
hx.card.small.joint.header.section()

hx.card.small.header.section()


// Normal Sections
hx.card.normal.section()

hx.card.normal.fixed.section()
hx.card.normal.fixed.joint.section()
hx.card.normal.fixed.header.section()
hx.card.normal.fixed.joint.header.section()

hx.card.normal.joint.section()
hx.card.normal.joint.header.section()

hx.card.normal.header.section()


// Slim Sections
hx.card.slim.section()

hx.card.slim.fixed.section()
hx.card.slim.fixed.joint.section()
hx.card.slim.fixed.header.section()
hx.card.slim.fixed.joint.header.section()

hx.card.slim.joint.section()
hx.card.slim.joint.header.section()

hx.card.slim.header.section()
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
Component
api
This api can be obtained like this 
var section = hx.card.section()
var api = section.component()
Properties
contextString
Gets the context of the section
Returns
String
The context of the section (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
contextcontextStringObject
Sets the context of the section
Arguments
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
Returns
Object
Returns this api object.
Returns
Selection
Returns a selection containing the detached element
hx.card.alignedSelection
Creates a container that aligns sections inside groups. This should contain groups that contain sections in order to work.
The structure should look something like this 
hx.card.aligned()
  .add(hx.card.group()
    .add(hx.card.section())
    .add(hx.card.section())
    .add(hx.card.section()))
  .add(hx.card.group()
    .add(hx.card.section())
    .add(hx.card.section())
    .add(hx.card.section()))
  .add(hx.card.group()
    .add(hx.card.section())
    .add(hx.card.section())
    .add(hx.card.section()))
Returns
Selection
The container wrapped in a selection
Building Blocks
Functions to create elements inside hx-card-section elements
hx.card.[small | large].iconoptionsObjectSelection
Creates an icon

HTML

<div id="icon-example"></div>

JavaScript

hx.select('#icon-example')
  .add(hx.card()
    .add(hx.card.section()
      .add(hx.card.icon({ icon: 'hx-icon hx-icon-check' })))
    .add(hx.card.section()
      .add(hx.card.small.icon({ icon: 'hx-icon hx-icon-check' })))
    .add(hx.card.section()
      .add(hx.card.large.icon({ icon: 'hx-icon hx-icon-check' })))
    .add(hx.card.section()
      .add(hx.card.icon({ icon: 'hx-icon hx-icon-check', context: 'negative'}))))
Arguments
options
Properties
iconString
The icon class to set
Component
api
This api can be obtained like this 
var icon = hx.card.icon()
var api = icon.component()
Properties
contextString
Gets the context of the text component
Returns
String
The context of the text component (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
contextcontextStringObject
Sets the context of the text component
Arguments
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
Returns
Object
Returns this api object.
iconString
Gets the icon class
Returns
String
The icon class
iconiconStringObject
Sets the icon class
Arguments
iconString
The icon class to set
Returns
Object
Returns this api object.
Returns
Selection
Returns a selection containing the detached element
hx.card.[small | large].textoptionsObjectSelection
Creates an element for entering text.

HTML

<div id="text-example"></div>

JavaScript

hx.select('#text-example')
  .add(hx.card()
    .add(hx.card.section()
      .add(hx.card.text({ text: 'Normal Text' })))
    .add(hx.card.section()
      .add(hx.card.small.text({ text: 'Small Text' })))
    .add(hx.card.section()
      .add(hx.card.large.text({ text: 'Large Text' })))
    .add(hx.card.section()
      .add(hx.card.text({ text: 'Positive Text', context: 'positive' }))))
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
textString
The text to add
Component
api
This api can be obtained like this 
var text = hx.card.text()
var api = text.component()
Properties
contextString
Gets the context of the text component
Returns
String
The context of the text component (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
contextcontextStringObject
Sets the context of the text component
Arguments
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
Returns
Object
Returns this api object.
textString
Gets the text of the text component
Returns
String
The text of the text component
texttextStringObject
Sets the text of the text component
Arguments
textString
The text to set
Returns
Object
Returns this api object.
Returns
Selection
Returns a selection containing the detached element
hx.card.[small | large].titleoptionsObjectSelection
Creates an element for entering title.

HTML

<div id="title-example"></div>

JavaScript

hx.select('#title-example')
  .add(hx.card()
    .add(hx.card.section()
      .add(hx.card.title({ text: 'Normal title' })))
    .add(hx.card.section()
      .add(hx.card.small.title({ text: 'Small title' })))
    .add(hx.card.section()
      .add(hx.card.large.title({ text: 'Large title' })))
    .add(hx.card.section()
      .add(hx.card.title({ text: 'Positive title', context: 'positive' }))))
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
textString
The title to add
Component
api
This api can be obtained like this 
var title = hx.card.title()
var api = title.component()
Properties
contextString
Gets the context of the text component
Returns
String
The context of the text component (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
contextcontextStringObject
Sets the context of the text component
Arguments
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
Returns
Object
Returns this api object.
titleString
Gets the title of the title component
Returns
String
The title of the title component
titletitleStringObject
Sets the title of the title component
Arguments
titleString
The title to set
Returns
Object
Returns this api object.
Returns
Selection
Returns a selection containing the detached element
Prebuilt Sections
Ready made sections, that just need configuring
hx.card.action.icon.sectionoptionsObjectSelection
Creates an action section with an icon after the text. Action sections are for defining links/buttons within cards.
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
iconString
The class of the icon
textString
The text of the action section
Returns
Selection
Returns a selection containing the detached element
hx.card.icon.action.sectionoptionsObjectSelection
Creates an action section with an icon before the text. Action sections are for defining links/buttons within cards.
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
iconString
The class of the icon
textString
The text of the action section
Returns
Selection
Returns a selection containing the detached element
hx.card.action.sectionoptionsObjectSelection
Creates an action section without an icon. Action sections are for defining links/buttons within cards.
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
textString
The text of the action section
Returns
Selection
Returns a selection containing the detached element
Prebuilt Cards
Ready made cards, that just need configuring
hx.card.noticeoptionsObjectSelection
Creates a notice card with a header and a message
Arguments
options
Properties
contextString
The context to set (can be one of the standard hexagon contexts - 'positive', 'negative', 'warning', 'info', 'action', etc)
messageString
The message in the notice
titleString
The title of the notice
Returns
Selection
The selection containing the card
Classes
The CSS classes for building cards
hx-card
The class to give to a card. A card should only have .hx-card-section or .hx-card-group as direct children.
All content inside a card should be inside a .hx-card-section
Classes
hx-card-aligned
A container that aligns sections inside groups. This should contain groups that contain sections in order to work.
hx-card-group
The class to give to elements to create a group of .hx-card-section or .hx-card-group elements.
By default, the group will be displayed horizontally and card sections within a group will be stretched to fill the available space, depending on their content.
Depending on the content and the available space in a card, children of a card group may be displayed on top of each other.
Extra Classes
hx-card-fixed
A class that can be given to a .hx-card-section or .hx-card-group element within a .hx-card-group to prevent it from stretching to fill the available space.
hx-card-header
A class for styling a .hx-card-section or .hx-card-group as a card header.
hx-card-joint
A class for joining a .hx-card-section or .hx-card-group with the next .hx-card-section or .hx-card-group element and removing the border between them.
hx-card-normal
A class that can be given to .hx-card-section or .hx-card-group elements to make them have the default padding.
hx-card-small
A class that can be given to .hx-card-section or .hx-card-group elements to make them have less padding.
hx-card-vertical
The class used to turn a .hx-card-group into a vertical group.
Children will be displayed stacked on top of each other instead of next to each other.
hx-card-section
The class to give to elements within a card that will contain content, such as text or icons. All content within a card must be within a .hx-card-section
Extra Classes
hx-card-fixed
A class that can be given to a .hx-card-section or .hx-card-group element within a .hx-card-group to prevent it from stretching to fill the available space.
hx-card-header
A class for styling a .hx-card-section or .hx-card-group as a card header.
hx-card-joint
A class for joining a .hx-card-section or .hx-card-group with the next .hx-card-section or .hx-card-group element and removing the border between them.
hx-card-normal
A class that can be given to .hx-card-section or .hx-card-group elements to make them have the default padding.
hx-card-small
A class that can be given to .hx-card-section or .hx-card-group elements to make them have less padding.
Extra Classes
hx-card-small
A class given to a .hx-card to make all child .hx-card-section elements have less padding.
This can be overriden for individual .hx-card-section or .hx-card-group elements by giving them the .hx-card-normal (or .hx-card-slim) class.