Object

ArticleTitle

The component for displaying an article title in the ArticleLink component.

Properties

role
string
(Required)

Always article_title for this object.

Value: article_title
additions
[Addition]

Ignored for all children of ArticleLink.

anchor
Anchor

An object that defines vertical alignment with another component.

animation
*

An object that defines an animation to be applied to the component.

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

Possible types: ComponentAnimation, string("none")
Possible types: ComponentAnimation, string("none")
behavior
*

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.

Possible types: Behavior, string("none")
Possible types: Behavior, string("none")
conditional
*

An instance or array of text properties that can be applied conditionally, and the conditions that cause them to be applied.

Possible types: ConditionalText, [ConditionalText]
Possible types: ConditionalText, [ConditionalText]
format
string

The formatting or markup method applied to the text.

Valid values:

Inline styling and additions with ranges (using inlineTextStyles and additions properties) are only supported when format is none.

Default: none
Possible values: markdown, html, none
hidden
boolean

A Boolean value that determines whether the component is hidden.

Default: false
identifier
string

A unique identifier for this component. If used, the identifier must be unique across the entire document. An identifier is required if you want to anchor other components to this component. See Anchor.

inlineTextStyles
*

An array of InlineTextStyle objects you can use to apply different text styles to ranges of text. For each InlineTextStyle object, supply rangeStart and rangeLength values, and either a TextStyle object or the identifier of a text style that is defined at the top level of the document.

Inline text styles are ignored when the format is set to markdown or html.

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

Possible types: [InlineTextStyle], string("none")
Possible types: [InlineTextStyle], string("none")
layout
*

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

Possible types: ComponentLayout, string
Possible types: ComponentLayout, string
style
*

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.

Possible types: ComponentStyle, string, string("none")
Possible types: ComponentStyle, string, string("none")
text
string

The text, styled according to the textStyle definition. You can also use a subset of HTML syntax by setting format to html. See Using HTML with Apple News Format.

textStyle
*

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

Possible types: ComponentTextStyle, string
Possible types: ComponentTextStyle, string

Discussion

Use the ArticleTitle object to display the title of the linked article. ArticleTitle is used in combination with the ArticleLink component and is used by VoiceOver for iOS and VoiceOver for macOS to make content more accessible.

Example

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

Relationships

Inherits From

See Also

Article Structure

Nesting Components in an Article

Use container components to create the component hierarchies you need for special article designs.

Adding a Scene to a Chapter or a Section Header

Add a scene to your article to create special effects.

Creating an Article Link

Link to an article by using the article-linking container component.

Displaying Components Side By Side

Configure a side-by-side, horizontal arrangement of components for your article.

object Header

The component for defining the top area of an article, chapter, or section.

object Container

Properties shared by all container types.

object Section

The component for organizing an article into sections.

object Chapter

The component for organizing an article into chapters.

object Aside

The component for setting apart content that is not directly related to the article, such as promotional content.

object CollectionDisplay

An object used in any container component type to define how the collection of child components is presented.

object HorizontalStackDisplay

The object for displaying components side by side in a Container component.

object FlexibleSpacer

The component for redistributing empty space inside a horizontal stack collection.

object Divider

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

object ArticleLink

The container component for creating a link to an article.

type SupportedArticleIdentifier

The patterns supported for article identifiers in UUID format.

object ArticleThumbnail

The component for displaying a thumbnail image with an article link.

object LinkButton

The component for opening a link in a button.