Contents

ArticleLink

The container component for creating a link to an article.

Declaration

object ArticleLink

Properties

NameTypeDescription
articleIdentifier(SupportedArticleIdentifier | PublisherArticleIdentifier)

The shareable URL or CloudKit ID of an article that is navigated to, and that is used as the default title and thumbnail. If articleIdentifier is not provided, the identifier of the article is used.

role Requiredstring

Always article_link for this component.

additions[ComponentLink]

An array of ComponentLink objects you can use to create a ComponentLink, allowing a link to anywhere in News.

additions is automatically added to the ArticleLink container.

Any link additions defined here or in any of the child components (ArticleTitle and ArticleThumbnail) have no effect.

allowAutoplacedAdsboolean

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 false.

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.

components[Component]

An array of components to display as child components. Child components are positioned and rendered relative to their parent component.

conditional(ConditionalContainer | [ConditionalContainer])

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

contentDisplay(CollectionDisplay | HorizontalStackDisplay | string("none"))

An object that defines how to position child components within this articleLink component. A HorizontalStackDisplay, for example, allows for displaying child components side by side.

In versions of News prior to iOS 11, child components are positioned as if contentDisplay were not defined.

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

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. See Anchor.

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.

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

Use the ArticleLink component to link a user to the article specified using the articleIdentifier property. If no articleIdentifier is provided, the component is assumed to be self referencing. Use ArticleThumbnail and ArticleTitle as child components instead of Image or Text to provide semantic value to the linked article. You can use these components to provide content, styling, and layout, like you do with any other Apple News Format component. Apple News automatically populates the content based on nested child elements. A ComponentAddition is automatically added to the component to allow the user to navigate to the referenced article.

Example

{
  "components": [
    {
      "role": "article_link",
      "articleIdentifier": "https://apple.news/AT6kNQslCQy6EE4bF8hpOoQ",
      "components": [
        {
          "role": "article_thumbnail",
          "aspectRatio": 1,
          "fillMode": "cover",
          "verticalAlignment": "top"
        },
        {
          "role": "article_title"
        }
      ]
    }
  ]
}

See Also

Article Structure