Styles

This topic 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