1. Communication Service
  2. Configuring Styles
  3. Style Attributes in Communication Cloud Service

Style Attributes in Communication Cloud Service

Communication Cloud Service provides a wide range of style attributes for designing contents, layouts and documents that you want to create.

The following table lists the style categories and the attributes that you can configure:

Table 2-1 Style Attributes in Communication Cloud Service

Category Style Attribute
Accessibility Ignore Content lets you configure to ignore content such as barcode, images etc. by reader tools.
Additional Set the Collapse space property to define collapsing extra space either Horizontally or Vertically or None.
Background Background Color property specifies the background color of the window. Color is specified by its RGB value and can be selected in the user interface with a color wheel.

You can associate a Background image with the style.
Border
  • Border

    Border sets the style, color and width of all the four borders of the document.

  • Border-style

    Border style property sets the style of the border (Dashed, Dotted, Double, Groove, Hidden, Inset, None, Outset, Ridge, Solid).

  • Border-color

    Border color property sets the color of the border.

  • Border-bottom

    Border bottom property sets the bottom border style.

  • Border-bottom-color

    Border-bottom-color property sets the color for bottom border.

  • Border-bottom-style

    Border-bottom-style property sets the style of the bottom border.

  • Border-bottom-width

    Border-bottom-width attribute sets the width of the bottom border.

  • Border-top

    Border-top property sets the style of the top border.

  • Border-top-color

    Border-top-color style property sets the color of the top border.

  • Border-top-style

    Border-top-style property sets the style of the top border.

  • Border-top-width

    Border-top sets the style, color and width of the top border.

  • Border-right

    Border-right property sets the style of the right-side border.

  • Border-right-color

    Border-right-color property sets the color of the right-side border.

  • Border-right-style

    Border-right-style property sets the style of the right-side border.

  • Border-right-width

    Border-right-width sets the width of the right border.

  • Border-left

    Border-left property sets the style of the left-side border.

  • Border-left-color

    Border-left-color property sets the color of the left-side border.

  • Border-left-style

    Border-left-style property sets the style of the left-side border.

  • Border-left-width

    Border-left-width sets the width of the left border.

  • Border-radius

    Border Radius can be implemented on Content, Layout and Document. The Border Radius attribute is dependent on the Border Style attribute. After you specify the radius, it is applied to all the corners. You can configure the following types of border styles:

    • Solid
    • Dashed
    • Dotted
    • Double
    • Ridge
    • Groove
    • Inset
    • Outset
    • Hidden
    • None

    To know more about the behavior of border radius across different border styles in HTML and PDF outputs, refer to the Table 2-2.

  • Border-top-left-radius

    The Border-top-left-radius property rounds the top-left corner by the specified radius.

  • Border-top-right-radius

    The Border-top-right-radius property rounds the top-right corner by the specified radius.

  • Border-bottom-right-radius

    The Border-bottom-right-radius property rounds the bottom-right corner by the specified radius.

  • Border-bottom-left-radius

    The Border-bottom-left-radius property rounds the bottom-left corner by the specified radius.

Read more about Border radius in the following table:

Border

Grid Grid-template-areas defines the rows of named areas that define the grid pattern.

Using the named grid items, you can define and preview the grid area structure by specifying how to display the rows and columns. If you repeat the name of a grid area, it results in spanning of content in those cells.

The Column-gap attribute sets the space between columns.

The Row-gap attribute sets the space between rows.

List
  • List-level

    The List-level property sets the level of the list element.

  • List-style-type

    The List-style-type property sets the style type for the list element.

  • List-style-position

    The List-style-position property sets the position for the list element.

  • List-text-prefix

    The List-text-prefix sets the string to place before the marker (circle, square, etc.) of a list item.

Note:

The default indent for a list is set to 40px.
Margin
  • Margin

    Margin attribute lets you set the margin size and unit around the document.

  • Margin-bottom

    The Margin-bottom sets the margin area on the bottom. Margin is the space around an item outside of its border.

  • Margin-left

    The Margin-left sets the margin area on the left. Margin is the space around an item outside of its border.

  • Margin-right

    The Margin-right sets the margin area on the left. Margin is the space around an item outside of its border.

  • Margin-top

    The Margin-top sets the margin area on the top. Margin is the space around an item outside of its border.
Padding
  • Padding

    Padding sets the Padding area of the specified size and unit around the document.

  • Padding-bottom

    The Padding-bottom sets the Padding area on the bottom. Padding is the space around an item inside its border.

  • Padding-left

    The Padding-left sets the Padding area on the left. Padding is the space around an item inside its border.

  • Padding-right

    The Padding-right sets the Padding area on the left. Padding is the space around an item inside its border.

  • Padding-top

    The Padding-top sets the Padding area on the top. Padding is the space around an item inside its border.

Note:

Default Table cell padding is set to 12px (left side and right side).
Page The Page-size sets the size and orientation of the box which is used to represent a page. This size corresponds to the target size of the printed page if applicable.
Text
  • Font-family

    Font Family is a set of fonts that have a common design. This property is used to specify the Font Family. Available Font Families are based on the fonts imported as Font Configuration

  • Font-size

    Font Size property sets the size of the text.

  • Font-style

    Font Style property specifies the style for text (Regular, Italic, Bold or Bold Italic). Available Font Styles are based on the fonts imported as Font Configuration.

  • Font-weight

    Font weight property sets how thick or thin characters in text should be displayed.

Note:

The default font size is set to 10pt.
See Managing a Font.
Transform Scale

Lets you resize the image, and barcode content.

Size

  • Width

    Sets the object width. If no Width is specified, the Width is set to the original.

  • Height

    Sets the object height.

  • Min-width

    Sets the minimum width of the object.

  • Min-height

    Sets the minimum height of the object.

  • Max-width

    Sets the maximum width of the object.

  • Max-height

    Sets the maximum height of the object.
Elements Paragraph

You can either select (All, First, Last, Odd or Even) and/or enter paragraph number and/or paragraphs range with hyphen as a delimiter.

For example: 3-10

Table

You can select how you want to implement styling for a table. This can include styling table header, row header, a cell, table rows, or table columns.
  • Table

    Select All if you want to apply styling to all the table.

  • Table Row

    You can either select (All, First, Last, Odd or Even) or can specify table row number(s) and/or range(s). For example: 3-10.

  • Table Column

    You can either select (All, First, Last, Odd or Even) or can specify table column number(s) and/or range(s). For example: 3-10.

  • Table Cell

    Enter a cell number or a range of cells with comma as a delimiter. For example: 2,4 or 3-10,2-5 or 3-9,2 or 3,5-12.

  • Table Header Row

    Select All if you want to apply styling to all the table header rows.

  • Table Header Column

    Select All if you want to apply styling to all the table header columns.

Note:

For email distribution, do consider the best practices and workarounds mentioned in the Email Configuration Matrix topic.
The following table lists the behavior of border radius across different border styles in HTML and PDF output:

Table 2-2 Border Radius across different border styles in HTML and PDF output

Border Style HTML PDF
Solid Border is displayed with radius. Border is displayed with radius.
Dashed Border is displayed with radius. Border is displayed with radius.
Dotted Border is displayed with radius. Border is displayed with radius.
Double Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Groove Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Inset Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Outset Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Ridge Border is displayed with radius. Border is displayed leaving an empty space in the place of radius.
Hidden Border is not displayed. Border is not displayed.
None Border is not displayed. Border is not displayed.