​PageObject: Border

This PageObject is used for inserting border lines to the content. Borders are rendered as <div> tag, not as <hr> tag. This means the visual appearance is completely up to the template developer's CSS. If no CSS is provided, the PageObject will not have any effect.

Editors have to select a top and a bottom margin when using a PageObject Border. The options are referred as S, M, L and XL. The selected option will be inserted as attribute to the <div> tag. Once again: you have to define the visual appearance of these margins in your CSS.

Options for top margin (option name: HTML attribute)

  • S: fx_margin_top_25
  • M: fx_margin_top_50
  • L: fx_margin_top_75
  • XL: fx_margin_top_100

Options for bottom margin

  • S: fx_margin_bottom_25
  • M: fx_margin_bottom_50
  • L: fx_margin_bottom_75
  • XL: fx_margin_bottom_100

HTML example (system generated)

<div class="fx_po_border fx_margin_top_25 fx_margin_bottom_100"></div>

​CSS example (boilerplate)

div.fx_po_border {
    border-top: 1px solid #000;
}
div.fx_po_border.fx_margin_top_25 {
    margin-top: 25px;
}
div.fx_po_border.fx_margin_top_50 {
    margin-top: 50px;
}
div.fx_po_border.fx_margin_top_75 {
    margin-top: 100px;
}
div.fx_po_border.fx_margin_top_100 {
    margin-top: 175px;
}
div.fx_po_border.fx_margin_bottom_25 {
    margin-bottom: 25px;
}
div.fx_po_border.fx_margin_bottom_50 {
    margin-bottom: 50px;
}
div.fx_po_border.fx_margin_bottom_75 {
    margin-bottom: 100px;
}
div.fx_po_border.fx_margin_bottom_100 {
    margin-bottom: 175px;
}
​This PageObject renders as block element.

​Demo content

Available parameters:

  • marginTop: [string] Height of the top margin. Allowed values are “s”, “m” “l” and “xl”.  Optional, default is “m”.
  • marginBottom: [string] Height of the bottom margin. Allowed values are “s”, “m” “l” and “xl”. Optional, default is “m”.

Configuration example

{{ fx_page.slot("SLOT_NAME", _context, {"content": {
   1: {"type": "border", "config": {"marginTop": "s", "marginBottom": "xl"}}
} }) }}
​For more details how to implement demo content please refer to the Demo Content Documentation.