<PopOutContent>
![](/_next/static/media/cross.059f776e.png)
![](/_next/static/media/button.da0a4bf5.png)
![](/_next/static/media/chevron-blur.7e0a6d48.png)
![](/_next/static/media/chevron.cf51b92f.png)
![](/_next/static/media/text-box.e3543c84.png)
![](/_next/static/media/radio.3314dc02.png)
![](/_next/static/media/checkbox-blur.ecf73f80.png)
Displays content in a modal. Useful for displaying a lot of text.
Use of <PopOutContent>
<PopOutContentid="myPopOutContent"buttonTextHtml={{en: 'Read <abbr title="terms and conditions">T&Cs</abbr>',}}modalHeadingHtml={{ en: 'Terms and conditions' }}modalContentHtml={{ en: '<p>A lot of text</p> ... ' }}/>
<PopOutContent>
's props
Prop | About | Type |
---|---|---|
buttonTextHtml | Localisable HTML: popup button content E.g.
| LocalisedHtml |
modalContentHtml | Localisable HTML: popup modal body content E.g.
| LocalisedHtml |
modalHeadingHtml | Localisable HTML: popup modal heading content. E.g.
| LocalisedHtml |
id | Component Id. Must be unique within the form. | string |
meta | Arbitrary metadata on this node. This is useful when developing custom controls as it allows you to pass down metadata/extensions. | string |
hasChildrenById | Non-editable. Used to indicate that this component doesn't have children. | false |
hasTagsById | Non-editable. Used to indicate that this component isn't a form field with tags by id. | false |
isFormField | Non-editable. Used to indicate that this component isn't a form field. | false |
isMultichoice | Non-editable. Used to indicate that this component isn't a multichoice form field like | false |
type | Non-editable. Type of component of | "PopOutContent" |