Previewbox Article

Our previewbox-article component is perfect for showing a preview of an article. Simply pass the URL of the article and we will fetch the data for you.

Demo

If you like to play around with the component, you can check out this CodePen demo.

To use the <previewbox-article> component, you can either set the href attribute to fetch article data automatically or manually set the attributes for a custom preview.

Automatically Fetched Data

<previewbox-article href="https://web-highlights.com"></previewbox-article>

Learn more about the automatic data fetching in our hosting guide.

Manually Set Data

<previewbox-article
  url="https://example.org"
  title="This Title Was Manually Passed"
  description="This description was manually passed. The data was not fetched from the URL because no href was provided."
  imageUrl="https://picsum.photos/1200/630"
  imageAlt="Lorem Ipsum Image"
></previewbox-article>

You can find all available properties in the API documentation.

Customize Read More Button Text

You can customize the read more button text by setting the readMoreBtnText attribute.

<previewbox-article
  readMoreBtnText="Custom Read More"
  href="https://web-highlights.com"
></previewbox-article>

Hide Read More Button

You can hide the read more button by setting the showReadMoreButton attribute to false.

<previewbox-article
  hideReadMoreBtn
  href="https://web-highlights.com"
></previewbox-article>

CSS Customization

The <previewbox-article> component supports CSS customization through custom properties. You can define these properties in your stylesheet or directly in the HTML using the style attribute. Here's an example:

<previewbox-article
  style="--pb-background-color: #595959; --pb-background-color-hover: #4a4a4a; --pb-text-color: white; --pb-text-color-light: #ffffff;"
  href="https://web-highlights.com/about"
></previewbox-article>

Learn more about this in our CSS Variables documentation.

CSS Custom Properties

The <previewbox-article> component supports the following CSS custom properties for styling:

Property Name	Description	Default Value
--pb-background-color	Background color of the article card	#ffffff
--pb-dark-background-color	Background color in dark mode	#121212
--pb-text-color	Text color of the article card	#000000
--pb-dark-text-color	Text color in dark mode	#e0e0e0
--pb-text-color-light	Color of the metadata text like description and author	rgba(0, 0, 0, 0.7)
--pb-dark-text-color-light	Metadata text color in dark mode	rgba(255, 255, 255, 0.8)
--pb-border-color	Border color of the article card	rgb(124 139 154 / 25%)
--pb-dark-border-color	Border color in dark mode	#8080803a
--pb-skeleton-color	Color of the loading skeleton	rgb(229, 231, 235)
--pb-dark-skeleton-color	Skeleton color in dark mode	rgb(55, 65, 81)
--pb-fallback-img-color	Color of the fallback image	hsl(220, 13%, 80%)
--pb-dark-fallback-img-color	Fallback image color in dark mode	hsl(220, 13%, 40%)
--pb-fallback-img-background	Background of the fallback image	rgb(229, 231, 235)
--pb-dark-fallback-img-background	Fallback image background in dark mode	rgb(55, 65, 81)

These properties allow you to customize the appearance of the article preview to match your website's design.