Looking for the old docs site? You can still view it for a limited time here.

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 colours

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 colour

  • 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 colour

  • 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>
  ...
  • 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