Card container

A grouping block with elevation and rounded corners, visually distinct from the surrounding form.

A Card wraps a group of fields in a panel with a subtle shadow and rounded corners. Use it to draw attention to a self-contained section of the form, billing details on an order form, an emergency-contact block, an opt-in offer.

The Card holds no value, it's a layout container. Drop fields inside it; the chrome (shadow, padding, background, radius) wraps whatever rows you place.

Properties

PropertyDescription
title
string
default: Card
Heading shown at the top of the card.
containerPaddingX
number (px)
default: 12
Horizontal padding inside the card.
containerPaddingY
number (px)
default: 12
Vertical padding inside the card.
containerShadow
'none' | 'sm' | 'md' | 'lg'
Shadow preset (Bootstrap shadow-*).
containerBg
'none' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'white' | 'transparent' | 'custom'
Background colour preset (Bootstrap bg-*). custom falls through to the colour-picker value.
borderColor
string (CSS colour)
Border colour. Stacks with the border width / style box controls.
borderRadius
number (px)
Corner rounding.

JavaScript recipes

A Card isn't addressable via f365.control() (only components with an SP internal name are), drive it by toggling the fields placed inside it.

Show the card's fields only when a flag is set

f365.events.onChange((e) => {
  if (e.fieldKey !== 'HasBillingInfo') return;
  const show = Boolean(e.newValue);
  f365.field('CardNumber').visible = show;
  f365.field('Expiry').visible = show;
  f365.field('CVV').visible = show;
});

Hide the whole block on the display form

f365.events.onLoad(() => {
  if (f365.context.displayMode === 'display') {
    f365.field('PromoOptIn').hidden = true;
  }
});

Update the card title from another field

f365.events.onChange((e) => {
  if (e.fieldKey !== 'Customer') return;
  const heading = f365.field('SummaryHeading');
  heading.value = e.newValue ? `Order for ${e.newValue}` : 'Order';
});

Related articles

  • Section container

    A grouping block that visually separates related fields with a heading and optional collapse behaviour.

  • Panel container

    A bordered container with an optional toolbar, heavier visual weight than a Card.