---
title: ConditionalSection
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/conditionalsection
---

# ConditionalSection

The object for defining conditional properties for a section component, and when the conditional properties are in effect.

## Declaration

```data
object ConditionalSection
```

## Properties

conditions: An instance or array of conditions that, when met, cause the conditional section component properties to take effect. allowAutoplacedAds: A Boolean value that allows the placement of ad banners between components. Nested components inherit the value of the outermost container that explicitly sets allowAutoplacedAds. The default value is true. anchor: An object that defines vertical alignment with another component. animation: An object that defines an animation to apply to the component. To remove a previously set condition, use none. behavior: An object that defines behavior for a component, like Parallax or Springy. To remove a previously set condition, use none. contentDisplay: An object that defines how to position child components within this ConditionalSection component. A HorizontalStackDisplay, for example, allows for displaying child components side by side. To remove a previously set condition, use none. hidden: A Boolean value that determines whether the component is hidden. layout: An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that you define at the top level of the document. If you don’t define layout, Apple News bases the size and position  on various factors, such as the device type, the length of the content, and the role of this component. scene: A set of animations applied to any header component that’s a child of this section. To remove a previously set condition, use none. style: An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that you define at the top level of the document. To remove a previously set condition, use none.

## Discussion

Discussion Use the ConditionalSection object to define an array of conditional section properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalSection overrides the value of the same property if defined in the parent Section component. See Section. Example {   "components": [     {       "role": "section",       "components": [         {           "role": "photo",           "URL": "bundle://header.jpg"         },         {           "role": "title",           "text": "Section Title Beneath Image"         }       ],       "hidden": true,       "conditional": [         {           "hidden": false,           "conditions": [             {               "maxViewportWidth": 415             }           ]         }       ]     },     {       "role": "section",       "components": [         {           "role": "header",           "style": {             "fill": {               "type": "image",               "URL": "bundle://header.jpg"             }           },           "layout": {             "minimumHeight": "75cw"           },           "components": [             {               "role": "title",               "text": "Section Title Overlay",               "anchor": {                 "targetAnchorPosition": "center"               }             }           ]         }       ],       "hidden": true,       "conditional": [         {           "hidden": false,           "conditions": [             {               "minViewportWidth": 416             }           ]         }       ]     }   ] }

## Relationships

### Inherits From

- [ConditionalContainer](applenewsformat/conditionalcontainer.md)

## See Also

### Conditional Design Elements

- [Condition](applenewsformat/condition.md)
- [ConditionalComponent](applenewsformat/conditionalcomponent.md)
- [ConditionalComponentLayout](applenewsformat/conditionalcomponentlayout.md)
- [ConditionalAutoPlacement](applenewsformat/conditionalautoplacement.md)
- [ConditionalDocumentStyle](applenewsformat/conditionaldocumentstyle.md)
- [ConditionalText](applenewsformat/conditionaltext.md)
- [ConditionalTextStyle](applenewsformat/conditionaltextstyle.md)
- [ConditionalComponentTextStyle](applenewsformat/conditionalcomponenttextstyle.md)
- [ConditionalComponentStyle](applenewsformat/conditionalcomponentstyle.md)
- [ConditionalContainer](applenewsformat/conditionalcontainer.md)
- [ConditionalDivider](applenewsformat/conditionaldivider.md)
- [ConditionalButton](applenewsformat/conditionalbutton.md)