> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styles

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[localhost link]: http://localhost:3000/docs/5/app-studio/reference/styling

[mintlify link]: https://doc.lucidworks.com/docs/5/app-studio/reference/styling

[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/998

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

<LwTemplate />

## 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`](/docs/5/fusion/dev-portal/appkit/reference/gallery/grid) and [`panel`](/docs/5/fusion/dev-portal/appkit/reference/gallery/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`](/docs/5/fusion/dev-portal/appkit/reference/gallery/grid) and [`panel`](/docs/5/fusion/dev-portal/appkit/reference/gallery/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`](/docs/5/fusion/dev-portal/appkit/reference/gallery/button) example in the gallery.
* `pull-right`: float right\
  See the [`button`](/docs/5/fusion/dev-portal/appkit/reference/gallery/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](/docs/5/fusion/dev-portal/appkit/reference/gallery/color) 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:

```html wrap  theme={"dark"}
<input type="checkbox" styling="checkbox-switch">
<label>Switch Label</label>
```

* `checkbox-switch`: Default switch\
  Add styles to label:

  ```html theme={"dark"}
  <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`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchField) tag:

* `title`
* `url`
* `label-left`
* `label-left-always`
* `label-inline`
* `label-above`
* `description`
* `image-top`

### Image

Styles for the [`media:image`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.mediaImage) tag:

* `square-crop`
* `circle-crop`

### Facet

This style can be applied to the [`search:facet`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchFacet) 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`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchFacetList) tag:

* `shadow`
* `shadow-far`
* `recessed`
* `step`
* `simple`
* `wrappedheader`
* `hidemetadata`
* `indented`

### Search tabs and nav bars

These styles are for the [`search:tabs`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchTabs) 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`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchPagination) tag.

* `pagination-wrapper-left`: Align left
* `pagination-wrapper-center`
* `pagination-wrapper-right`

### Alert box

Styles for [`search:alert`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchAlert) 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`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.blockInterruptor) tag.

* `interruptor`: Style element as an attention grabber\
  See the [`message`](/docs/5/fusion/dev-portal/appkit/reference/gallery/message) example in the gallery.

### Scroll to

Styles for the [`widget:scroll-to`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.widgetScrollTo) 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`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.toggleControls).

* `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`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchResultList) add the card styling in the following format:

```
cards-{size}-{numberPerRow}
```

For example:

```xml wrap  theme={"dark"}
<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`](/docs/5/fusion/dev-portal/appkit/reference/tags/lightning.directive.searchResult) 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`