Styles

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