This article lists the valid values for the styling attribute supported by many App Studio markup tags.

​
Global styles

These styles can be applied to any element.

​
Flex utilities

  • stretch-content: Uses flex box to stretch the child content
    See the grid and panel examples in the gallery.
  • stretch-row: Same as stretch-content but with auto height for use with rows
  • center-content: Center child content vertically and horizontally
    See the grid and panel examples in the gallery.
  • flex-nowrap: Prevent flex wrapping
  • flex-grow: Flex grow an element

​
Width utilities

  • width-1: 100%
  • width-2-3: 66%
  • width-1-2: 50%
  • width-1-3: 33%
  • width-1-4: 25%

​
Display utilities

  • inline-center
  • block
  • inline
  • inline-block
  • pull-left: float left
    See the button example in the gallery.
  • pull-right: float right
    See the button example in the gallery.
  • floated left: float element left
  • floated right: float element right
  • border: Add 1px border to element
  • border right: Add 1px right border to element
  • border left: Add 1px left border to element
  • border bottom: Add 1px bottom border to element
  • border top: Add 1px top border to element
  • centercontent: adds padding that pushes in from page edges.
  • centercontent-inner: adds borders and box-shadows etc. - should be used inside centercontent
  • centercontent-inner-shadow: Same as centercontent but with a drop shadow
  • fade: Fades out an element, add the class in to fade back in
  • bg-stretch: Stretch a background image to the full element height and width

​
Headers

  • header header-fixed: position fixed header
  • header header-shadow: header with drop shadow
  • header header-gradient: header with gradient
  • header header-border

​
Sizes

  • xs: Make the font-size the smallest - also works for making most elements smaller
  • sm
  • md
  • lg
  • xl
  • break-text-all: Make text wrap mid word
  • break-text-normal: Text wraps at best fit

​
Border radius

  • border-radius: Adds rounded corners
  • border-radius-top-left: Adds rounder corner to top left
  • border-radius-top-right
  • border-radius-bottom-left
  • border-radius-bottom-right

​
Typography

  • text-center
  • text-right
  • text-left
  • capitalize
  • uppercase
  • lowercase

​
Colors

See these colors in the gallery.
  • bg-lgrey: Light grey background
  • bg-mgrey
  • bg-dgrey
  • bg-charcoal
  • bg-black
  • bg-white
  • text-white: White text
  • bg-lbgrey
  • bg-mbgrey
  • bg-dbgrey
  • bg-blue
  • bg-sblue
  • bg-yellow
  • bg-orange
  • bg-red
  • bg-pink
  • bg-purple
  • bg-green
  • bg-primary
  • bg-primary-light
  • bg-primary-dark
  • bg-primary-contrast
  • text-primary
  • text-primary-contrast
  • bg-secondary
  • bg-secondary-light
  • bg-secondary-dark
  • bg-secondary-contrast
  • text-secondary
  • text-secondary-light
  • text-secondary-dark
  • text-secondary-contrast
  • bg-tertiary
  • bg-tertiary-light
  • bg-tertiary-dark
  • bg-tertiary-contrast
  • text-tertiary
  • text-tertiary-light
  • text-tertiary-dark
  • text-tertiary-contrast
  • bg-raspberry
  • bg-raspberry-light
  • bg-raspberry-dark
  • text-raspberry
  • text-raspberry-light
  • text-raspberry-dark
  • bg-strawberry
  • bg-strawberry-light
  • bg-strawberry-dark
  • text-strawberry
  • text-strawberry-light
  • text-strawberry-dark
  • bg-carrot
  • bg-carrot-light
  • bg-carrot-dark
  • text-carrot
  • text-carrot-light
  • text-carrot-dark
  • bg-pumpkin
  • bg-pumpkin-light
  • bg-pumpkin-dark
  • text-pumpkin
  • text-pumpkin-light
  • text-pumpkin-dark
  • bg-sunflower-light
  • bg-sunflower
  • bg-sunflower-dark
  • text-sunflower
  • text-sunflower-light
  • text-sunflower-dark
  • bg-leaf
  • bg-leaf-light
  • bg-leaf-dark
  • text-leaf
  • text-leaf-light
  • text-leaf-dark
  • bg-grass
  • bg-grass-light
  • bg-grass-dark
  • text-grass
  • text-grass-light
  • text-grass-dark
  • bg-emerald
  • bg-emerald-light
  • bg-emerald-dark
  • text-emerald
  • text-emerald-light
  • text-emerald-dark
  • bg-mint
  • bg-mint-light
  • bg-mint-dark
  • text-mint
  • text-mint-light
  • text-mint-dark
  • bg-aqua
  • bg-aqua-light
  • bg-aqua-dark
  • text-aqua
  • text-aqua-light
  • text-aqua-dark
  • bg-sky
  • bg-sky-light
  • bg-sky-dark
  • text-sky
  • text-sky-light
  • text-sky-dark
  • bg-royal
  • bg-royal-light
  • bg-royal-dark
  • text-royal
  • text-royal-light
  • text-royal-dark
  • bg-lavender
  • bg-lavender-light
  • bg-lavender-dark
  • text-lavender
  • text-lavender-light
  • text-lavender-dark
  • bg-pink
  • bg-pink-light
  • bg-pink-dark
  • text-pink
  • text-pink-light
  • text-pink-dark
  • bg-paper
  • bg-paper-light
  • bg-paper-dark
  • text-paper
  • text-paper-light
  • text-paper-dark
  • bg-concrete
  • bg-concrete-light
  • bg-concrete-dark
  • text-concrete
  • text-concrete-light
  • text-concrete-dark
  • bg-asphalt
  • bg-asphalt-light
  • bg-asphalt-dark
  • text-asphalt
  • text-asphalt-light
  • text-asphalt-dark
  • bg-duckegg
  • bg-duckegg-light
  • bg-duckegg-dark
  • text-duckegg
  • text-duckegg-light
  • text-duckegg-dark
  • bg-depth-dblue
  • text-depth-dblue
  • bg-depth-lblue
  • text-depth-lblue

​
Switches

Usage: 
<input type="checkbox" styling="checkbox-switch">
<label>Switch Label</label>
  • checkbox-switch: Default switch
    Add styles to label:     
    <input type="checkbox" styling="checkbox-switch">
<label styling="square">Switch Label</label>
  • square
  • flat

​
Switch colors

Also added to the label
  • positive
  • negative
  • warning
  • info
  • secondary
  • tertiary

​
Right-hand-side panel

Adds a wikipedia-esque smart panel
  • rhspanel
  • rhspanel-shadow

​
Tooltips

  • tooltip: Adds a tooltip using the aria-label attribute for the tooltip content
  • tooltip-top-left: Position tooltip
  • tooltip-top-right
  • tooltip-top
  • tooltip-bottom-left
  • tooltip-bottom-right
  • tooltip-bottom
  • tooltip-left
  • tooltip-right
  • tooltip-top
  • tooltip-small
  • tooltip-medium
  • tooltip-large
  • tooltip-error
  • tooltip-warning
  • tooltip-info
  • tooltip-success
  • tooltip-always: The tooltip is always shown
  • tooltip-rounded: Rounded corners
  • tooltip-no-animate
  • tooltip-bounce

​
Hero banner

This style is useful for landing pages.
  • hero-banner

​
Label

  • label

​
Buttons

  • button: Default button
  • button-hover: Hover state always active
  • button-secondary: Secondary color
  • button-green
  • button-blue
  • button-white
  • button-disabled
  • button-hidden
  • block: Full width

​
Forms

  • checkbox
  • radio
  • input-rounded: Applies only to inputs
  • group: Form input group
  • form-stacked: Stacked form - should be applied to the form
  • form-aligned
  • labelled-input: Labelled input e.g. an input with a dollar sign attached as a prefix
  • labelled-input label-right: Labelled input e.g. an input with a percentage sign attached as a suffix
  • styled-checkbox: CSS checkbox - should be applied to a checkbox input with a label as the next sibling

​
Lists

These styles can be applied to ordered (ol) or unordered (ul) HTML elements.
  • striped
  • lined

​
Grid utilities

  • hide-xs: Hide on XS size screens
  • show-xs: Show on XS size screens
  • show-sm
  • show-md
  • show-lg
  • show-xl
  • show-xs
  • hide-xs
  • hide-sm
  • show-sm
  • hide-md
  • show-md
  • hide-lg
  • show-lg
  • hide-xl
  • show-xl

​
Component styles

These styles can be applied to specific tags.

​
Field styles

Styles for the search:field tag:
  • title
  • url
  • label-left
  • label-left-always
  • label-inline
  • label-above
  • description
  • image-top

​
Image

Styles for the media:image tag:
  • square-crop
  • circle-crop

​
Facet

This style can be applied to the search:facet tag:
  • switches: Render switches instead of checkboxes.
    Unlike the default checkboxes, only one switch can be selected at a time.

​
Facet list

Styles for search:facet-list tag:
  • shadow
  • shadow-far
  • recessed
  • step
  • simple
  • wrappedheader
  • hidemetadata
  • indented

​
Search tabs and nav bars

These styles are for the search:tabs tag.
  • navbar: Navbar style
  • navbar navbar-shadow
  • navbar navbar-centered
  • navbar navbar-tabs: Tab style of navbar
  • navbar navbar-light: Light version
  • tabs: Tabs style

​
Comment list

Styles for the collaborate:comment-list tag:
  • hide-avatars: Hides the comment avatars

​
Pagination

Styles for search:pagination tag.
  • pagination-wrapper-left: Align left
  • pagination-wrapper-center
  • pagination-wrapper-right

​
Alert box

Styles for search:alert tag.
  • alertbox: Style element as an alert box
  • alertbox-secondary: Secondary color
  • alertbox-positive
  • alertbox-negative
  • alertbox-warning
  • alertbox-info

​
Interruptors

Apply to any element or use the block:interruptor tag.
  • interruptor: Style element as an attention grabber
    See the message example in the gallery.

​
Scroll to

Styles for the widget:scroll-to tag:
  • bottom-left: Position bottom left of the page
  • bottom-right
  • bottom-center

​
Toggle panes

Styles to be used like: 
<toggle:controls labels="Pane 1, Pane 2, Pane 3" panes="pills" styling="pill"></toggle:controls>
<toggle:panes id="pills">
  <toggle:pane>
  ...
See toggle:controls.
  • tabs-shadow: Adds shadow to tabs
  • collapsible: Allows tabs to be collapsed by clicking the active tab
  • pill: Pill style
  • line
  • simple
  • bordered

​
Cards

  • basic-card: Basic card style
  • card: Default card style

​
Card results

The card widths are auto-generated. By default a maximum of 6 result cards can be shown on one row. By setting @maxCardsPerRow this can be increased or decreased. On a search:result-list add the card styling in the following format: 
cards-{size}-{numberPerRow}
For example: 
<search:result-list styling="cards-sm-2 cards-lg-4">
This will show 2 cards per row on small screens, 4 on large screens.

​
Card styles

Styles for the search:result tag:
  • card-emphasis
  • card-shadow
  • card-step

​
Popover

Styles for widget:popover tag:
  • popover-wrapper: Popover style
  • popover-large: Large popover
  • popover-medium
  • popover-small