Experience Components

overview a component is the fundamental building block of a purple experience view every visible element — a list of articles, a navigation bar, a button, an image — is a component components are declared as json objects inside views json and are identified by a type field they all share a common set of base configuration properties ( id , class , template , sticky , etc ) and can be conditionally shown or hidden at runtime when to use this read this page to understand how any component is configured the properties documented here apply to every component type — list , section , html , swiper , subscription , content , and all others type specific properties are documented on each component's own page basic example { "type" "html", "template" "headline", "id" "page title", "class" "text primary", "content" \[{ "type" "html", "tag" "h1", "text" "latest news" }] } this renders an html component using the headline template, assigns the element id="page title" and css class text primary the template value is also set as an html attribute ( template="headline" ) so css selectors like html component\[template="headline"] can target it configuration all components inherit base configuration these properties apply to every component type property type default description type string — required identifies which component to render (e g list , section , html , swiper ) template string — template variant to use controls layout; also set as an html attribute for css targeting id string — sets the html id attribute on the element also used as the tracking key supports conditional values class string | array — css class(es) to assign accepts a string, an array of strings, or conditional values sticky boolean false makes the element css sticky islazy boolean — when true, the component is only initialised when it enters the viewport skipssr boolean false skip server side rendering for this component — renders only on the client attributes object — custom html attributes — see attributes below condition object — condition that must be true for the component to render — see conditions class with conditional values the class property supports conditional values, making it possible to apply css classes based on runtime context { "type" "html", "class" { "value" "highlight", "condition" { "value" "$context issue purchased", "operation" "equals", "comparevalue" "true" }, "fallback" "locked" } } multiple classes can be combined using an array, where each entry can be a plain string or a conditional value { "type" "html", "class" \[ "base card", { "value" "is new", "condition" { "value" "$context issue isnew", "operation" "equals", "comparevalue" "true" } } ] } attributes the attributes property adds html attributes to the component element { "type" "html", "attributes" { "aria" { "label" "close dialog", "expanded" "false" }, "data" { "tracking id" "hero banner" }, "html" { "role" "button", "popover" "auto" } } } sub property description aria adds aria attributes keys are automatically prefixed with aria if not already data adds data attributes keys are automatically prefixed with data if not already html arbitrary html attributes ( role , popover ) condition the condition property controls whether the component is rendered at all when the condition evaluates to false, the component is completely removed from the dom — it is not hidden with css, it is not mounted { "type" "subscription", "condition" { "value" "$context platform", "operation" "equals not", "comparevalue" "web" } } for more details, see todo insert link to conditions advanced features islazy lazy components are not initialised until they scroll into view this is useful for heavy below the fold components to improve initial load performance the component renders ghost placeholders until it enters the viewport skipssr when true, the component is completely skipped during server side rendering this is useful for components that depend on browser apis or user specific state that is not available on the server (e g , ads or components that read from localstorage ) template targeting in css the template value is set as both an angular class binding and an html attribute this lets you use attribute selectors in css my component\[template='card'] { display grid; } my component\[template='list item'] { display flex; } component types available type description section wraps other components — primary layout container list renders a repeated component for each item in a data source swiper horizontally scrollable list based on swiper js html renders an html element with a given tag content displays a single catalog content item (article, issue) publication displays a single publication subscription displays a subscription plan search field text input for full text search search result displays a single search result login login form using purple entitlement dropdown dropdown select element toggle toggle switch switch conditional component switcher bookmark bookmark button for content toolbar toolbar with action buttons menu navigation menu from the catalog api widget embeds an external widget action executor runs actions on component init ad displays a single ad slot testing notes / edge cases condition false = not mounted a component with a false condition is fully removed from the dom data sources inside it are not initialised if you are checking whether a list loaded data, first confirm its condition is true class conditional with no fallback if the condition is false and no fallback is set, the class is not applied and no error is thrown the element will have no class at all from that entry id uniqueness if multiple instances of the same component appear (e g inside a list), avoid setting a static id — it will produce duplicate html ids template attribute the template attribute is set as a string on the host element css selectors using it are case sensitive related topics todo insert link to using components data sources overview docid\ fumbuabweon oto5wfevf todo insert link to context system todo insert link to views json