# Parts: Markdown to ContactSocialCard (/themes/sdk/reference/content/parts-1)

```ts
import { … } from '@poltura/theme-sdk/content';
```

## `Markdown` [#markdown]

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

```ts
Markdown(props: MarkdownProps): ReactElement
```

**Props:** [`MarkdownProps`](/themes/sdk/reference/content/types-2#markdownprops)

**Example**

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

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

## `RichText` [#richtext]

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

```ts
RichText(props: RichTextProps): ReactElement | null
```

**Props:** [`RichTextProps`](/themes/sdk/reference/content/types-2#richtextprops)

**Example**

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

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

## `ArticleCard` [#articlecard]

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

```ts
ArticleCard(props: ArticleCardProps): ReactElement
```

**Props:** [`ArticleCardProps`](/themes/sdk/reference/content/types-2#articlecardprops)

**Example**

```tsx
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` [#faqaccordion]

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

```ts
FaqAccordion(props: FaqAccordionProps): ReactElement
```

**Props:** [`FaqAccordionProps`](/themes/sdk/reference/content/types-2#faqaccordionprops)

**Example**

```tsx
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` [#countdown]

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

```ts
Countdown(props: CountdownProps): ReactElement
```

**Props:** [`CountdownProps`](/themes/sdk/reference/content/types-2#countdownprops)

**Example**

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

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

## `ContentBadge` [#contentbadge]

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

```ts
ContentBadge(props: ContentBadgeProps): ReactElement | null
```

**Props:** [`ContentBadgeProps`](/themes/sdk/reference/content/types-2#contentbadgeprops)

**Example**

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

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

## `ArticleDownloads` [#articledownloads]

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

```ts
ArticleDownloads(props: ArticleDownloadsProps): ReactElement
```

**Deprecated.** Use [`FileDownloads`](/themes/sdk/reference/content/parts-1#filedownloads).

**Props:** [`ArticleDownloadsProps`](/themes/sdk/reference/content/types-3#articledownloadsprops)

**Example**

```tsx
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` [#downloadbutton]

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

```ts
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`](/themes/sdk/reference/content/types-3#downloadbuttonprops)

**Example**

```tsx
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` [#filedownloads]

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

```ts
FileDownloads(props: FileDownloadsProps): ReactElement | null
```

**Props:** [`FileDownloadsProps`](/themes/sdk/reference/content/types-3#filedownloadsprops)

**Example**

```tsx
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` [#contactinfocard]

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

```ts
ContactInfoCard(props: ContactInfoCardProps): ReactElement
```

**Props:** [`ContactInfoCardProps`](/themes/sdk/reference/content/types-3#contactinfocardprops)

**Example**

```tsx
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` [#contactsocialcard]

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

```ts
ContactSocialCard(props: ContactSocialCardProps): ReactElement | null
```

**Props:** [`ContactSocialCardProps`](/themes/sdk/reference/content/types-3#contactsocialcardprops)

**Example**

```tsx
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}
    />
  );
}
```