---
title: Components
framework: applenews
role: collectionGroup
role_heading: API Collection
path: applenews/components
---

# Components

Understand the types of components that can make up an article.

## Overview

Overview Components are some of the main objects you use to build your article, along with layouts and styles. Components hold the content of your article and are always in an array called components. Each component in your article has a function that is expressed by a property called role. For example, the value of the role property might be title, body, pullquote, or heading. A component’s role determines what type of component it is. That is, when a component’s role is body, that type of component is referred to as a body component.  See JSON Concepts and Article Structure. The following table gives you an overview of the components you can use to create an article in Apple News Format.  |   |   |   |   |   |   |   |   |   |   |  note: Choosing the component role that best describes your content is important for better voice-over and for facilitating Siri suggestions. For example, instead of styling text in a body component to make it look like a heading, use a heading component for that text instead.

## Topics

### First Steps

- [Adding Components](applenews/adding-components.md)
- [Component](applenewsformat/component.md)

### Text

- [Using HTML with Apple News Format](applenews/using-html-with-apple-news-format.md)
- [Using Markdown with Apple News Format](applenews/using-markdown-with-apple-news-format.md)
- [Body](applenewsformat/body.md)
- [Title](applenewsformat/title.md)
- [Heading](applenewsformat/heading.md)
- [Intro](applenewsformat/intro.md)
- [Caption](applenewsformat/caption.md)
- [Author](applenewsformat/author.md)
- [Byline](applenewsformat/byline.md)
- [Illustrator](applenewsformat/illustrator.md)
- [Photographer](applenewsformat/photographer.md)
- [Quote](applenewsformat/quote.md)
- [PullQuote](applenewsformat/pullquote.md)
- [Text](applenewsformat/text.md)

### Images

- [Image](applenewsformat/image.md)
- [Photo](applenewsformat/photo.md)
- [Figure](applenewsformat/figure.md)
- [Portrait](applenewsformat/portrait.md)
- [Logo](applenewsformat/logo.md)
- [ReplicaAdvertisement](applenewsformat/replicaadvertisement.md)
- [CaptionDescriptor](applenewsformat/captiondescriptor.md)

### Galleries and Mosaics

- [Gallery](applenewsformat/gallery.md)
- [Mosaic](applenewsformat/mosaic.md)
- [GalleryItem](applenewsformat/galleryitem.md)

### Audio and Video

- [Audio](applenewsformat/audio.md)
- [Music](applenewsformat/music.md)
- [Podcast](applenewsformat/podcast.md)
- [Video](applenewsformat/video.md)
- [EmbedWebVideo](applenewsformat/embedwebvideo.md)

### Location

- [Map](applenewsformat/map.md)
- [MapItem](applenewsformat/mapitem.md)
- [MapSpan](applenewsformat/mapspan.md)
- [Place](applenewsformat/place.md)

### Social Media

- [Instagram](applenewsformat/instagram.md)
- [FacebookPost](applenewsformat/facebookpost.md)
- [TikTok](applenewsformat/tiktok.md)
- [Tweet](applenewsformat/tweet.md)

### Augmented Reality

- [ARKit](applenewsformat/arkit.md)

### Tables

- [Tables in an Article](applenews/tables-in-an-article.md)

### Advertisements

- [BannerAdvertisement](applenewsformat/banneradvertisement.md)
- [MediumRectangleAdvertisement](applenewsformat/mediumrectangleadvertisement.md)

### Article Structure

- [Nesting Components in an Article](applenews/nesting-components-in-an-article.md)
- [Adding a Scene to a Chapter or a Section Header](applenews/adding-a-scene-to-a-chapter-or-a-section-header.md)
- [Creating an Article Link](applenews/creating-an-article-link.md)
- [Displaying Components Side By Side](applenews/displaying-components-side-by-side.md)
- [Header](applenewsformat/header.md)
- [Container](applenewsformat/container.md)
- [Section](applenewsformat/section.md)
- [Chapter](applenewsformat/chapter.md)
- [Aside](applenewsformat/aside.md)
- [CollectionDisplay](applenewsformat/collectiondisplay.md)
- [HorizontalStackDisplay](applenewsformat/horizontalstackdisplay.md)
- [FlexibleSpacer](applenewsformat/flexiblespacer.md)
- [Divider](applenewsformat/divider.md)
- [ArticleLink](applenewsformat/articlelink.md)
- [SupportedArticleIdentifier](applenewsformat/supportedarticleidentifier.md)
- [PublisherArticleIdentifier](applenewsformat/publisherarticleidentifier.md)
- [ArticleTitle](applenewsformat/articletitle.md)
- [ArticleThumbnail](applenewsformat/articlethumbnail.md)
- [LinkButton](applenewsformat/linkbutton.md)

### Animations

- [About Component Animations](applenews/about-component-animations.md)
- [ComponentAnimation](applenewsformat/componentanimation.md)
- [AppearAnimation](applenewsformat/appearanimation.md)
- [FadeInAnimation](applenewsformat/fadeinanimation.md)
- [MoveInAnimation](applenewsformat/moveinanimation.md)
- [ScaleFadeAnimation](applenewsformat/scalefadeanimation.md)

### Behaviors

- [About Component Behaviors](applenews/about-component-behaviors.md)
- [Behavior](applenewsformat/behavior.md)
- [BackgroundMotion](applenewsformat/backgroundmotion.md)
- [BackgroundParallax](applenewsformat/backgroundparallax.md)
- [Motion](applenewsformat/motion.md)
- [Parallax](applenewsformat/parallax.md)
- [Springy](applenewsformat/springy.md)

### Links

- [LinkAddition](applenewsformat/linkaddition.md)
- [ComponentLink](applenewsformat/componentlink.md)
- [Addition](applenewsformat/addition.md)
- [ComponentAddition](applenewsformat/componentaddition.md)
- [SupportedURLs](applenewsformat/supportedurls.md)
- [SupportedInternalURLs](applenewsformat/supportedinternalurls.md)