Developers
Start building
Themes/Theme SDK/Modules/content/Parts: Markdown to ContactSocialCard

Parts: Markdown to ContactSocialCard

The parts of @poltura/theme-sdk/content, Markdown to ContactSocialCard.

On this page
import { … } from '@poltura/theme-sdk/content';

Markdown

Merchant Markdown drawn as the store's typography, with headings, tables, images and alignment.

Markdown(props: MarkdownProps): ReactElement

Props: MarkdownProps

Example

import { Markdown } from '@poltura/theme-sdk/content';

export function Notice() {
  return <Markdown source="**Free shipping** over 50 EUR." density="compact" />;
}

RichText

Merchant rich text, such as a product or category description, drawn as the store's typography.

RichText(props: RichTextProps): ReactElement | null

Props: RichTextProps

Example

import { RichText, type RichTextValue } from '@poltura/theme-sdk/content';

export function Description({ value }: { value: RichTextValue | null }) {
  return <RichText value={value} />;
}

ArticleCard

A blog post card: cover image, category, date, title, excerpt and the read link.

ArticleCard(props: ArticleCardProps): ReactElement

Props: ArticleCardProps

Example

import { ArticleCard, useArticle } from '@poltura/theme-sdk/content';

export function ReadNext() {
  const article = useArticle();
  return (
    <div>
      {article?.related.map((post) => (
        <ArticleCard key={post.id} article={post} readLabel="Read article" />
      ))}
    </div>
  );
}

FaqAccordion

Questions that open one at a time to show their Markdown answers.

FaqAccordion(props: FaqAccordionProps): ReactElement

Props: FaqAccordionProps

Example

import { FaqAccordion } from '@poltura/theme-sdk/content';

export function ShippingQuestions() {
  return (
    <FaqAccordion
      items={[{ id: 'ship', question: 'How fast do you ship?', answer: 'Within **two** days.' }]}
    />
  );
}

Countdown

A ticking hh:mm:ss timer with a clock icon, for sales and offers.

Countdown(props: CountdownProps): ReactElement

Props: CountdownProps

Example

import { Countdown } from '@poltura/theme-sdk/content';

export function LastHour() {
  return <Countdown hours={0} minutes={59} seconds={30} />;
}

ContentBadge

A small rounded label, such as a category on a cover image; nothing without an icon or label.

ContentBadge(props: ContentBadgeProps): ReactElement | null

Props: ContentBadgeProps

Example

import { ContentBadge } from '@poltura/theme-sdk/content';

export function NewBadge() {
  return <ContentBadge label="New" variant="muted" />;
}

ArticleDownloads

The downloads box of a guide: each file or link with its icon, version, platform and size.

ArticleDownloads(props: ArticleDownloadsProps): ReactElement

Deprecated. Use FileDownloads.

Props: ArticleDownloadsProps

Example

import { ArticleDownloads, useGuide } from '@poltura/theme-sdk/content';

export function GuideFiles() {
  const guide = useGuide();
  if (guide === null || guide.attachments.length === 0) return null;
  return <ArticleDownloads attachments={guide.attachments} title="Downloads" checksumLabel="SHA-256" />;
}

DownloadButton

One guide file, link or purchase file as a download button.

DownloadButton(props: DownloadButtonProps): ReactElement

Its icon and name come first, then its size, version and language as separate muted facts, the platform and architecture when set, and the SHA-256 checksum on hover. A link shows the external-link icon and no size; a locked file shows a lock and "Available after purchase" in place of a link.

Props: DownloadButtonProps

Example

import { DownloadButton } from '@poltura/theme-sdk/content';
import { useProductPage } from '@poltura/theme-sdk/product';

export function FirstPurchaseFile() {
  const [file] = useProductPage().files;
  return file ? <DownloadButton file={file} locked /> : null;
}

FileDownloads

Every file and link of a guide and the product's purchase files as download buttons; nothing when there are none.

FileDownloads(props: FileDownloadsProps): ReactElement | null

Props: FileDownloadsProps

Example

import { FileDownloads, useGuide } from '@poltura/theme-sdk/content';

export function GuideFiles() {
  const guide = useGuide();
  if (guide === null) return null;
  return <FileDownloads attachments={guide.attachments} title="Downloads" />;
}

ContactInfoCard

One contact channel as a card: icon, name, what it is for and the link to it.

ContactInfoCard(props: ContactInfoCardProps): ReactElement

Props: ContactInfoCardProps

Example

import { ContactInfoCard } from '@poltura/theme-sdk/content';

export function SupportCard() {
  return (
    <ContactInfoCard
      icon={<span aria-hidden>@</span>}
      title="Customer service"
      description="Questions about orders and products."
      actionLabel="help@example.com"
      actionHref="mailto:help@example.com"
    />
  );
}

ContactSocialCard

The store's social profiles as a card of icon tiles; nothing without profiles.

ContactSocialCard(props: ContactSocialCardProps): ReactElement | null

Props: ContactSocialCardProps

Example

import { ContactSocialCard, useContactPage } from '@poltura/theme-sdk/content';

export function FollowUs() {
  const contact = useContactPage();
  if (contact === null) return null;
  return (
    <ContactSocialCard
      heading={contact.texts.followUs}
      description={contact.texts.followUsDescription}
      links={contact.socialLinks}
    />
  );
}
Last updated