API
<previewbox-article>
Attributes
| Name | Description | Type | Default |
| hideReadMoreBtn | If attribute is present, the read more button will not be shown. | string | undefined | |
| readMoreBtnText | The text for the read more button.
Default: 'Read more' | string | 'Read more' |
| url |
If the href is not provided, the url will be used to fetch the link preview data. | string | null | null |
| title | A manually set title for the link preview. | string | '' |
| description | A manually set description for the link preview. | string | null | null |
| author | A manually set author for the link preview. | string | null | null |
| imageUrl | A manually set image URL for the link preview. | string | null | null |
| imageAlt | A manually set image alt text for the link preview. | string | null | null |
| faviconUrl | A manually set favicon URL for the link preview.
If not provided, a fallback favicon will be used. | string | null | null |
| date | A manually set date for the link preview. | string | null | null |
| hidePoweredBy | If set to true, the Powered by Previewbox info will not be shown. | string | undefined | undefined |
| apiUrl | The URL of the API to fetch the link preview data from.
Defaults to the Previewbox API. | string | |
| dark | If set to true, the components will always be in dark mode. | string | undefined | undefined |
| light | If set to true, the components will always be in light mode. | string | undefined | undefined |
| href | The URL to fetch the meta data from. E.g. https://web-highlights.com/.
Reads the open graph data from the provided URL. | string | '' |
| target | The target attribute for the a-element. E.g. '_blank'. | string | '_blank' |
| rel | The rel attribute for the a-element. E.g. 'noopener noreferrer'. | string | '' |
Properties
| Name | Attribute | Description | Type | Default |
| hideReadMoreBtn | hideReadMoreBtn | If attribute is present, the read more button will not be shown. | string | undefined | |
| readMoreBtnText | readMoreBtnText | The text for the read more button.
Default: 'Read more' | string | 'Read more' |
| url | url |
If the href is not provided, the url will be used to fetch the link preview data. | string | null | null |
| title | title | A manually set title for the link preview. | string | '' |
| description | description | A manually set description for the link preview. | string | null | null |
| author | author | A manually set author for the link preview. | string | null | null |
| imageUrl | imageUrl | A manually set image URL for the link preview. | string | null | null |
| imageAlt | imageAlt | A manually set image alt text for the link preview. | string | null | null |
| faviconUrl | faviconUrl | A manually set favicon URL for the link preview.
If not provided, a fallback favicon will be used. | string | null | null |
| date | date | A manually set date for the link preview. | string | null | null |
| hidePoweredBy | hidePoweredBy | If set to true, the Powered by Previewbox info will not be shown. | string | undefined | undefined |
| apiUrl | apiUrl | The URL of the API to fetch the link preview data from.
Defaults to the Previewbox API. | string | |
| dark | dark | If set to true, the components will always be in dark mode. | string | undefined | undefined |
| light | light | If set to true, the components will always be in light mode. | string | undefined | undefined |
| fetchedLinkPreviewData | | | LinkPreviewData | null | null |
| _isLoading | | | boolean | false |
| _isError | | | boolean | false |
| _apiError | | | ApiError | null | null |
| linkData | | | LinkPreviewData | |
| href | href | The URL to fetch the meta data from. E.g. https://web-highlights.com/.
Reads the open graph data from the provided URL. | string | '' |
| target | target | The target attribute for the a-element. E.g. '_blank'. | string | '_blank' |
| rel | rel | The rel attribute for the a-element. E.g. 'noopener noreferrer'. | string | '' |
CSS Shadow Parts
| Name | Description |
| link | The a-element that contains the link |
| container | The container element that contains the anchor element |
| thumbnail | The thumbnail element that contains the image |
<previewbox-link>
Attributes
| Name | Description | Type | Default |
| url |
If the href is not provided, the url will be used to fetch the link preview data. | string | null | null |
| title | A manually set title for the link preview. | string | '' |
| description | A manually set description for the link preview. | string | null | null |
| author | A manually set author for the link preview. | string | null | null |
| imageUrl | A manually set image URL for the link preview. | string | null | null |
| imageAlt | A manually set image alt text for the link preview. | string | null | null |
| faviconUrl | A manually set favicon URL for the link preview.
If not provided, a fallback favicon will be used. | string | null | null |
| date | A manually set date for the link preview. | string | null | null |
| hidePoweredBy | If set to true, the Powered by Previewbox info will not be shown. | string | undefined | undefined |
| apiUrl | The URL of the API to fetch the link preview data from.
Defaults to the Previewbox API. | string | |
| dark | If set to true, the components will always be in dark mode. | string | undefined | undefined |
| light | If set to true, the components will always be in light mode. | string | undefined | undefined |
| href | The URL to fetch the meta data from. E.g. https://web-highlights.com/.
Reads the open graph data from the provided URL. | string | '' |
| target | The target attribute for the a-element. E.g. '_blank'. | string | '_blank' |
| rel | The rel attribute for the a-element. E.g. 'noopener noreferrer'. | string | '' |
Properties
| Name | Attribute | Description | Type | Default |
| url | url |
If the href is not provided, the url will be used to fetch the link preview data. | string | null | null |
| title | title | A manually set title for the link preview. | string | '' |
| description | description | A manually set description for the link preview. | string | null | null |
| author | author | A manually set author for the link preview. | string | null | null |
| imageUrl | imageUrl | A manually set image URL for the link preview. | string | null | null |
| imageAlt | imageAlt | A manually set image alt text for the link preview. | string | null | null |
| faviconUrl | faviconUrl | A manually set favicon URL for the link preview.
If not provided, a fallback favicon will be used. | string | null | null |
| date | date | A manually set date for the link preview. | string | null | null |
| hidePoweredBy | hidePoweredBy | If set to true, the Powered by Previewbox info will not be shown. | string | undefined | undefined |
| apiUrl | apiUrl | The URL of the API to fetch the link preview data from.
Defaults to the Previewbox API. | string | |
| dark | dark | If set to true, the components will always be in dark mode. | string | undefined | undefined |
| light | light | If set to true, the components will always be in light mode. | string | undefined | undefined |
| fetchedLinkPreviewData | | | LinkPreviewData | null | null |
| _isLoading | | | boolean | false |
| _isError | | | boolean | false |
| _apiError | | | ApiError | null | null |
| linkData | | | LinkPreviewData | |
| href | href | The URL to fetch the meta data from. E.g. https://web-highlights.com/.
Reads the open graph data from the provided URL. | string | '' |
| target | target | The target attribute for the a-element. E.g. '_blank'. | string | '_blank' |
| rel | rel | The rel attribute for the a-element. E.g. 'noopener noreferrer'. | string | '' |
CSS Shadow Parts
| Name | Description |
| link | The a-element that contains the link |
| container | The container element that contains the anchor element |
<undefined>
Attributes
| Name | Description | Type | Default |
| faviconUrl | | string | null | null |
Properties
| Name | Attribute | Description | Type | Default |
| faviconUrl | faviconUrl | | string | null | null |
| isFaviconError | | | boolean | false |
<undefined>
Attributes
| Name | Description | Type | Default |
| imageUrl | | string | null | null |
| imageAlt | | string | null | null |
| isLoading | | boolean | true |
Properties
| Name | Attribute | Description | Type | Default |
| imageUrl | imageUrl | | string | null | null |
| imageAlt | imageAlt | | string | null | null |
| isLoading | isLoading | | boolean | true |
| isImageError | | | boolean | false |
<undefined>
<undefined>
<undefined>
Attributes
| Name | Description | Type | Default |
| width | | number | string | '100%' |
| height | | number | string | '16px' |
Properties
| Name | Attribute | Description | Type | Default |
| width | width | | number | string | '100%' |
| height | height | | number | string | '16px' |
<undefined>
A base directive that contains the natural properties of an anchor element.
Attributes
| Name | Description | Type | Default |
| href | The URL to fetch the meta data from. E.g. https://web-highlights.com/.
Reads the open graph data from the provided URL. | string | '' |
| target | The target attribute for the a-element. E.g. '_blank'. | string | '_blank' |
| rel | The rel attribute for the a-element. E.g. 'noopener noreferrer'. | string | '' |
Properties
| Name | Attribute | Description | Type | Default |
| href | href | The URL to fetch the meta data from. E.g. https://web-highlights.com/.
Reads the open graph data from the provided URL. | string | '' |
| target | target | The target attribute for the a-element. E.g. '_blank'. | string | '_blank' |
| rel | rel | The rel attribute for the a-element. E.g. 'noopener noreferrer'. | string | '' |