@aiconomy/aico-components

Example usage

Use the components as plain HTML tags:

<aico-news-list aico-url="<your-api-url>" aico-bearer-token="<your-api-token>"></aico-news-list>

Using these components

There are three strategies we recommend for using web components built with Stencil.

Script tag

• Put the following tags in the head of your index.html:

<link rel="stylesheet" href="https://unpkg.com/@aiconomy/aico-components@<version>/dist/aico-components/aico-components.css" />
<script type="module" src="https://unpkg.com/@aiconomy/aico-components@<version>/dist/aico-components/aico-components.esm.js"></script>
<script nomodule src="https://unpkg.com/@aiconomy/aico-components@<version>/dist/esm/aico-components.js"></script>

• Then you can use the elements anywhere in your template, JSX, html etc

Node Modules

• Run npm i @aiconomy/aico-components
• Put the following tags in the head of your index.html:

<link rel="stylesheet" href="node_modules/@aiconomy/aico-components/dist/aico-components/aico-components.css" />
<script type="module" src="node_modules/@aiconomy/aico-components/dist/aico-components/aico-components.esm.js"></script>
<script nomodule src="node_modules/@aiconomy/aico-components/dist/esm/aico-components.js"></script>

• Then you can use the elements anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm i @aiconomy/aico-components
• Add an import to the npm packages import needed-aico-component;
• Then you can use the elements anywhere in your template, JSX, html etc

Listening to element events

Please check out Stencil's documentation.

Aiconomy components

Check the docs directory.

Additional example

<aico-fetch-article-detail aico-url="<url>" aico-bearer-token="<token>" article-url-handle="<handle>" locale="de_CH"></aico-fetch-article-detail>

<br /><br /><br />

<aico-special-news-carousel aico-url="<url>" aico-bearer-token="<token>"></aico-special-news-carousel>

<br /><br /><br />

<aico-news-list aico-url="<url>" aico-bearer-token="<token>" news-channels="one,two"></aico-news-list>

<script>
  function navigateToArticle(article) {
    const url = new URL(window.location.href);
    url.pathname = `pages/news-article/${article.attributes.urlHandle}`;
    window.location.href = url.toString();
  }

  const newsList = document.querySelector('aico-news-list');
  newsList.addEventListener('articleClick', event => {
    navigateToArticle(event.detail);
  });

  const newsCarousel = document.querySelector('aico-special-news-carousel');
  newsCarousel.addEventListener('articleClicked', event => {
    navigateToArticle(event.detail);
  });
</script>

Custom styling

The components exported are using scoped styles. The following selector methods can be used:

• element selector: Every component in this library is prefixed with aico-. Thus, you can select the aico-news-list as follows:

aico-news-list-item {
  /* styles for the list item element */
}

aico-news-list-item > div {
  /* styles for all the immediate divs of the list item element */
}

• class selector: Due to the scoped component export, each child html element has a class with the following pattern sc-<component_name> (i.e., for aico-news-list-item is sc-aico-news-list-item):

div.sc-aico-news-list-item {
  /* styles for all the divs used by the list item */
}

Available components

aico-article-detail

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------- | | article (required) | -- | | { id: string; type: string; links: { self: string; }; attributes: ArticleAttributes; } | undefined | | hideCategoryAndTags | hide-category-and-tags | Determines if the article category and tags are shown or not. | boolean | false | | hideDateAndAuthor | hide-date-and-author | Determines if the article date and author are shown or not. | boolean | false | | locale | locale | The article translation that will be used to render the content. If the locale specified is not present in the article's translations, most content will not be shown. | string | 'de' |

aico-fetch-article-detail

Properties

| Property | Attribute | Description | Type | Default | | ------------------------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | | aicoBearerToken (required) | aico-bearer-token | The token used to authenticate against he Aico Api. | string | undefined | | aicoUrl (required) | aico-url | The url of the Aico Api that will be used to retrieve the article. | string | undefined | | articleId | article-id | The id will be used to fetch the article. If both the 'articleId' and 'articleUrlHandle' are provided, the latter will be used. If neither are provided, an error is thrown. | string \| undefined | undefined | | articleUrlHandle | article-url-handle | The url handle will be used to fetch the article. If both the 'articleId' and 'articleUrlHandle' are provided, the latter will be used. If neither are provided, an error is thrown. | string \| undefined | undefined | | hideCategoryAndTags | hide-category-and-tags | Determines if the article category and tags are shown or not. | boolean | false | | hideDateAndAuthor | hide-date-and-author | Determines if the article date and author are shown or not. | boolean | false | | locale | locale | The article translation that will be used to render the content. If the locale specified is not present in the article's translations, most content will not be shown. | string | 'de' |

aico-news-list-item

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------- | | article (required) | -- | | { id: string; type: string; links: { self: string; }; attributes: ArticleAttributes; } | undefined | | articleIndex | article-index | | number | 0 | | locale | locale | The article translation that will be used to render the content. If the locale specified is not present in the article's translations, most content will not be shown. | string | 'de' |

Events

| Event | Description | Type | | -------------- | ----------- | ----------------------------------------------------------------------------------------------------- | | articleClick | | CustomEvent<{ id: string; type: string; links: { self: string; }; attributes: ArticleAttributes; }> |

aico-news-list

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------ | | aicoBearerToken | aico-bearer-token | The token used to authenticate against he Aico Api. | string | '' | | aicoUrl (required) | aico-url | The url of the Aico Api that will be used to retrieve the article. | string | undefined | | allBrands | all-brands | Determines wheter we show brand specific or general latest news | boolean | false | | hideSpecialArticles | hide-special-articles | Determines wheter special articles will be included in the list or not. | boolean | false | | hideTopArticles | hide-top-articles | Determines wheter top articles will be included in the list or not. | boolean | true | | latestNews | latest-news | Determines wheter special articles will be included in the list or not. | boolean | false | | locale | locale | The article translation that will be used to render the content. If the locale specified is not present in the article's translations, most content will not be shown. | string | 'de' | | newsBrandIds | news-brand-ids | Brand ids as a comma separated list used to filter the results. | string | '' | | newsChannels | news-channels | Channel names as a comma separated list used to filter the results. | string | '' | | newsLanguageLocales | news-language-locales | Language locales as a comma separated list used to filter the results. | string | '' | | newsSellerIds | news-seller-ids | Seller ids as a comma separated list used to filter the results. | string | '' | | nextButtonText | next-button-text | The text used by the next button in the pagination component. | string | 'Next' | | pageSize | page-size | The page size. Prefer this number to be even. | number | 16 | | previousButtonText | previous-button-text | The text used by the previous button in the pagination component. | string | 'Previous' | | userAccessToken | user-access-token | The user access token | string | '' |

Events

| Event | Description | Type | | -------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | articleClick | Event emitted when a user clicks an article. The handler receives the entire Article entity. | CustomEvent<{ id: string; type: string; links: { self: string; }; attributes: ArticleAttributes; }> |

aico-special-news-carousel

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | | aicoBearerToken | aico-bearer-token | The token used to authenticate against he Aico Api. | string | '' | | aicoUrl (required) | aico-url | The url of the Aico Api that will be used to retrieve the article. | string | undefined | | locale | locale | The article translation that will be used to render the content. If the locale specified is not present in the article's translations, most content will not be shown. | string | 'de' | | newsBrandIds | news-brand-ids | Brand ids as a comma separated list used to filter the results. | string | '' | | newsChannels | news-channels | Channel names as a comma separated list used to filter the results. | string | '' | | newsLanguageLocales | news-language-locales | Language locales as a comma separated list used to filter the results. | string | '' | | newsSellerIds | news-seller-ids | Seller ids as a comma separated list used to filter the results. | string | '' | | numberOfArticles | number-of-articles | The number of articles shown in the carousel. Prefer this number to be small. | number | 6 | | userAccessToken | user-access-token | The user access token | string | '' |

Events

| Event | Description | Type | | ---------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | articleClicked | Event emitted when a user clicks an article title. The handler receives the entire Article entity. | CustomEvent<{ id: string; type: string; links: { self: string; }; attributes: ArticleAttributes; }> |

aico-top-news-carousel

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | | aicoBearerToken | aico-bearer-token | The token used to authenticate against he Aico Api. | string | '' | | aicoUrl (required) | aico-url | The url of the Aico Api that will be used to retrieve the article. | string | undefined | | locale | locale | The article translation that will be used to render the content. If the locale specified is not present in the article's translations, most content will not be shown. | string | 'de' | | newsBrandIds | news-brand-ids | Brand ids as a comma separated list used to filter the results. | string | '' | | newsChannels | news-channels | Channel names as a comma separated list used to filter the results. | string | '' | | newsLanguageLocales | news-language-locales | Language locales as a comma separated list used to filter the results. | string | '' | | newsSellerIds | news-seller-ids | Seller ids as a comma separated list used to filter the results. | string | '' | | numberOfArticles | number-of-articles | The number of articles shown in the carousel. Prefer this number to be small. | number | 6 | | userAccessToken | user-access-token | The user access token | string | '' |

Events

| Event | Description | Type | | ---------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | articleClicked | Event emitted when a user clicks an article title. The handler receives the entire Article entity. | CustomEvent<{ id: string; type: string; links: { self: string; }; attributes: ArticleAttributes; }> |

aico-album-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { textColor?: string \| undefined; buttonBackgroundColor?: string \| undefined; backgroundColor?: string \| undefined; buttonHoverColor?: string \| undefined; buttonTextColor?: string \| undefined; borderColor?: string \| undefined; album: { id: string \| number; createdAt: Date; updatedAt: Date; } & { name?: string \| undefined; images: ({ id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; } & { name?: string \| undefined; alternativeText?: string \| undefined; caption?: string \| undefined; description?: string \| undefined; alternative_text?: string \| undefined; })[]; url?: string \| undefined; type?: string \| undefined; order?: number \| undefined; optimizedImage?: string \| undefined; })[]; }; } | undefined |

aico-asking-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; asking: { id: string \| number; createdAt: Date; updatedAt: Date; translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; }[]; isActive: boolean; startsAt: Date; startTime: Date; location?: string \| null \| undefined; description?: string \| null \| undefined; endTime?: Date \| null \| undefined; meetingPoint?: string \| null \| undefined; recipents?: string \| null \| undefined; clothingEquipment?: string \| null \| undefined; coaching?: string \| null \| undefined; catering?: string \| null \| undefined; furtherInfo?: string \| null \| undefined; }; } | undefined | | locale | locale | | string | 'de' |

aico-asking-list-content

aico-block-quote-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; } & { quoteText: string; quoteAuthorLine: string; })[]; textColor?: string \| undefined; quotesColor?: string \| undefined; authorColor?: string \| undefined; } | undefined | | locale | locale | | string | 'de' |

aico-bullet-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; }[]; sort: number; titleSize?: string \| undefined; fontSize?: string \| undefined; fontFamily?: string \| undefined; bulletBullets: BulletBullet[]; } | undefined | | locale | locale | | string | 'de' |

aico-carousel-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | ------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; }[]; arrowsBackground?: string \| undefined; contentCarouselImages: CarouselImage[]; } | undefined | | hasArrows | has-arrows | | boolean | true | | locale | locale | | string | 'de' |

aico-collection-content

aico-content-card-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; } & { linkText?: string \| undefined; })[]; picture?: string \| undefined; link?: string \| undefined; titleSize?: string \| undefined; } | undefined | | locale | locale | | string | 'de' |

aico-divider-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; } & { isOnlyMargin: boolean; })[]; isOnlyMargin: boolean; } | undefined | | locale | locale | | string | 'de' |

aico-document-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; } & { document?: string \| undefined; picture?: string \| undefined; })[]; document: null; picture: null; title: null; link?: string \| undefined; isDocumentDisplayedAsButton: boolean; buttonBackgroundColor?: string \| undefined; buttonTextColor?: string \| undefined; buttonHoverColor?: string \| undefined; buttonBorderColor?: string \| undefined; fontSize?: string \| undefined; fontFamily?: string \| undefined; } | undefined | | locale | locale | | string | 'de' |

aico-faq-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; faqItems: { id: string \| number; createdAt: Date; updatedAt: Date; translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; question?: string \| null \| undefined; answer?: string \| null \| undefined; }[]; }[]; } | undefined | | locale | locale | | string | 'de' |

aico-heading-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; } & { description?: string \| undefined; })[]; picture?: string \| undefined; titleSize?: string \| undefined; textColor?: string \| undefined; textBackgroundColor: string; isImageHeightHalfSize: boolean; isHeadingAlignedWithText: boolean; isTextAtMiddleOfImage: boolean; fontFamily?: string \| undefined; fontSize?: number \| undefined; } | undefined | | locale | locale | | string | 'de' |

aico-html-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; }[]; } | undefined | | locale | locale | | string | 'de' |

aico-link-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; } & { translations: ({ id: string \| number; createdAt: Date; updatedAt: Date; locale: string; title?: string \| null \| undefined; text?: string \| null \| undefined; } & { link?: string \| undefined; linkText?: string \| undefined; imageUrl?: string \| undefined; })[]; link?: string \| undefined; linkText?: string \| undefined; title?: string \| undefined; imageUrl?: string \| undefined; pictureSize: string; picturePosition?: string \| undefined; isButtonLink: boolean; isImageFullSize: boolean; isImageLink?: boolean \| undefined; backgroundButtonColor?: string \| undefined; textButtonColor?: string \| undefined; hoverColor?: string \| undefined; fontSize?: number \| undefined; fontFamily?: string \| undefined; } | undefined | | locale | locale | | string | 'de' |

aico-news-content

Properties

| Property | Attribute | Description | Type | Default | | ---------------------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | content (required) | -- | | { id: string \| number; createdAt: Date; updatedAt: Date; titleSize: string; maxPerRow: number; maxToDisplay: number; aicoShopNews: { id: string \| number; translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; shouldShowTranslation: boolean; name?: string \| null \| undefined; title?: string \| null \| undefined; image?: string \| null \| undefined; text?: string \| null \| undefined; description?: string \| null \| undefined; optimizedImage?: string \| null \| undefined; excerpt?: string \| null \| undefined; portraitImage?: string \| null \| undefined; optimizedPortraitImage?: string \| null \| undefined; optimizedListImage?: string \| null \| undefined; }[]; isActive: boolean; isSpecialArticle: boolean; brandIds: (string \| number)[]; sellerIds: (string \| number)[]; newsCategory: { id: string \| number; createdAt: Date; updatedAt: Date; translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; name?: string \| null \| undefined; title?: string \| null \| undefined; text?: string \| null \| undefined; description?: string \| null \| undefined; webName?: string \| null \| undefined; smallDescription?: string \| null \| undefined; }[]; isActive: boolean; sortingNumber: number; sorting_number: number; is_active: boolean; image?: string \| null \| undefined; }; newsTags: { id: string \| number; createdAt: Date; updatedAt: Date; translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; name?: string \| null \| undefined; title?: string \| null \| undefined; text?: string \| null \| undefined; webName?: string \| null \| undefined; }; }[]; album: { id: string \| number; createdAt: Date; updatedAt: Date; images: { id: string \| number; createdAt: Date; updatedAt: Date; translations: { id: string \| number; createdAt: Date; updatedAt: Date; locale: string; name?: string \| null \| undefined; caption?: string \| null \| undefined; title?: string \| null \| undefined; text?: string \| null \| undefined; description?: string \| null \| undefined; alternativeText?: string \| null \| undefined; alternative_text?: string \| null \| undefined; }[]; type?: string \| null \| undefined; order?: number \| null \| undefined; url?: string \| null \| undefined; optimizedImage?: string \| null \| undefined; }[]; name?: string \| null \| undefined; }; name?: string \| null \| undefined; image?: string \| null \| undefined; description?: string \| null \| undefined; optimizedImage?: string \| null \| undefined; excerpt?: string \| null \| undefined; portraitImage?: string \| null \| undefined; optimizedPortraitImage?: string \| null \| undefined; optimizedListImage?: string \| null \| undefined; pageTitle?: string \| null \| undefined; metaDescription?: string \| null \| undefined; urlHandle?: string \| null \| undefined; publishDate?: Date \| null \| undefined; author?: string \| null \| undefined; videoUrl?: string \| null \| undefined; headlineImage?: string \| null \| undefined; contentBuilder?: any; }[]; title?: string \| null \| undefined; text?: string \| null \| undefined; landscapePicture?: string \| null \| undefined; portraitPicture?: string \| null \| undefined; textColor?: string \| null \| undefined; textBackgroundColor?: string \| null \| undefined; textHoverColor?: string \| null \| undefined; IMPORTANT?: string \| null \| undefined; text_hover_color?: string \| null \| undefined; } | undefined |

Events

| Event | Description | Type | | -------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------