Contents

Divider

The component for defining a horizontal line to visually divide parts of your article.

Declaration

object Divider

Properties

NameTypeDescription
role Requiredstring

Always divider for this component.

anchorAnchor

An object that defines vertical alignment with another component.

animation(ComponentAnimation | string("none"))

An object that defines an animation you apply to the component.

Use the none value for conditional design elements. Adding it here has no effect.

behavior(Behavior | string("none"))

An object that defines behavior for a component, like Parallax or Springy.

The none value is used for conditional design elements. Adding it here has no effect.

conditional(ConditionalDivider | [ConditionalDivider])

An instance or array of component properties that can be applied conditionally, and the conditions that cause Apple News Format to apply them.

hiddenboolean

A Boolean value that determines whether the component is hidden.

identifierstring

An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.

layout(ComponentLayout | string)

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.

If layout is not defined, size and position are based on various factors, such as the device type, the length of the content, and the role of this component.

stroke(StrokeStyle | string("none"))

The stroke properties to apply to the horizontal line.

The none value is used for conditional design elements. Adding it here has no effect.

style(ComponentStyle | string | string("none"))

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.

The none value is used for conditional design elements. Adding it here has no effect.

Mentioned in

Discussion

A divider component appears as a horizontal line to create a visual division. The divider component can be used to separate title components and section components, and so on.

Example

{
  "components": [
    {
      "role": "heading1",
      "text": "Heading"
    },
    {
      "role": "divider",
      "stroke": {
        "width": 3,
        "color": "#D5B327"
      }
    }
  ]
}

See Also

Related Documentation

Article Structure