Common Widget Properties

These options are generic to many widgets. You will see different combinations of these fields:

• Element
  • Background Color - Select a color from the list to display behind the widget
  • Padding
    • This includes the Units option to pick how the padding is rendered.
    • Available options are:
      • None - no padding at all
      • px
      • %
      • em
      • rem
      • vw
      • vh
      • vmin
      • vmax

  (Be aware that changing the Unit can greatly change how your widget padding is interpreted by the browser. 5 pixels is not the same as 5 em units.)

• Background Image to render underneath the widget. The image will show through padding and underneath text if there is no color set for these areas.
• Background Image Focal Point. The options are top left, top middle, top right, center left, center middle, center right, bottom left, bottom middle and bottom right.
  • If the image is large, this setting determines which part of the picture is displayed.
• Columns For Device - Choose how many columns you want for each of 5 display sizes. Options are 1 to 4 columns.
• Gutter Width - the space in pixels between objects. The options are: none, 15px, 30px, 45px or 60px

The Card Properties tab is shared by several widgets::

• Icon Textblock
• Icon Counter
• Image Textblock 
• Image Textblock Carousel
• Video Textblock
• Hero Carousel
• Split Carousel

They control the general container (or 'card') properties for each item.  The diagram below shows the various controllable properties of a card.

See the Live Demo pages for each Widget for specific examples of each.

The Card properties may have some or all of these options:

• Card Style
  • Align - applies to the Icon, Title, Subtitle and Description
    • left
    • center
    • right
    • inherit
  • Border Size in pixels - defines how thick the border is
  • Background Color - many colors to choose from, including 'not set' and 'inherit'
  • Border Color - many colors to choose from, including 'not set'
  • Style - options to define features of the card
    • small shadow
    • medium shadow
    • bottom shadow
    • full shadow
    • left edge turned up
    • right edge turned up
    • button edges turned up
    • none
  • Padding
    • Units - pick the web unit you wish to use to render the padding information.
      • px
      • %
      • em
      • rem
      • vw
      • vmin
      • vmax
      • none
    • Top - The padding value around the edge of the card as defined by your Units selection above.
    • Right - the value for each of these locations relative to the content inside the card
    • Bottom
    • Left
• Text Padding - Same as Padding above but between the text and the edge of the card.
• Space Between - Specify the number pixels between card slides.
• Image Height (percentage) - Determines the percentage of width for the image height. For example, 100 will render a square image, 75 will render an image whose height is 75% of its width.
• Image Effect - Controls what the image does when the cursor is over the image. The options are:
  • none
  • slide right
  • slide down
  • zoom in
  • zoom out
  • zoom out and slide right
  • resize in

Widgets that have the ability to control how the content is rendered on different device sizes will have options to set the number of columns of data for each of 5 screen sizes.

The options are 1, 2, 3 or 4 Columns.

Widgets that have Images may have some or all of the following fields to customize the image.

• Image Height - The appropriate field is exposed when percentage or fixed is selected.
  • auto - The height is automatically calculated based on the width. No additional field is required.
  • percentage of width - Enter a number between 1 and 100
  • fixed height - Enter a number (in pixels) that will be used to define the height of the image.
• Image Height (Percentage of Width) - Enter an integer representing the percentage of the video width to defin the height.  For example, a value of  50 would make the video half as high as it is wide.
• Image Movement - the action taken when the cursor is over the image to draw attention to the image
  • none
  • slide right
  • slide down
  • zoom in
  • zoom out
  • zoom out & slide right
  • resize in
• Initial Shading and Rollover Shading - The shading over the image when the cursor is not hovering or upon rollover is defined with these two settings. If no color is set, neither Style nor Opacity will have an affect.
  • Color - includes the standard color set plus 'not set' and 'Inherit'.
  • Style - How the shading is applied to the image. Options are:
    • solid - the image will appear as the color chosen in the Color field.
    • horizontal gradient (left to right)
    • horizontal gradient (right to left)
    • vertical gradient (bottom to top)
    • vertical gradient (top to bottom)
    • diagonal gradient
  • Opacity - the opacity of the color overlay from the Color and Style selections
    • none
    • light
    • medium
    • dark
    • full

Options for each of the text elements within the widget may include some or all of these options for Title, Subtitle, Line and Description text.

• Show - Determines whether this item will render or not. Options are yes or no. Choosing 'no' hides the rest of these fields.
• Tag - the type of html tag to enclose the content
• Align - The options are left, center, right or inherit (from parent).
• Size - Approximately a dozen sizes to choose from
• Font Settings:
  • Bold, Italic, Underline (choose one or more)
  • Initial Case, Title Case Upper Case or Lower Case (choose one)
• Color - Pick from the standard list of 3 dozen colors including 'not set' and 'inherit'