+
+ )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/KeepRatio/index.ts b/packages/logos-docusaurus-theme/src/client/components/KeepRatio/index.ts
new file mode 100644
index 00000000..9a7d0c24
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/KeepRatio/index.ts
@@ -0,0 +1 @@
+export * from './KeepRatio'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.scss
new file mode 100644
index 00000000..67261ab5
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.scss
@@ -0,0 +1,70 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-asset-card {
+ width: 216px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ border: 1px solid rgb(var(--lsd-border-primary));
+ border-bottom: none;
+ text-decoration: none !important;
+ min-height: 144px;
+}
+
+.mdx-asset-card__inner {
+ width: 100%;
+ padding: 16px 16px 32px 16px;
+}
+
+.mdx-asset-card__title {
+ margin-bottom: 16px;
+}
+
+.mdx-asset-card__image {
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ object-position: center center;
+ }
+}
+
+.mdx-asset-card__downloadables {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ justify-content: stretch;
+
+ & > * {
+ flex-grow: 1;
+ font-size: 12px;
+ text-decoration: none !important;
+ text-underline-offset: unset !important;
+
+ button {
+ width: 100%;
+ justify-content: space-between;
+ text-decoration: none;
+ }
+
+ &:first-child button {
+ border-left: none;
+ }
+
+ &:last-child button {
+ border-right: none;
+ }
+
+ &:not(:last-child) button {
+ border-right: none;
+ }
+ }
+}
+
+.mdx-asset-card:not(.mdx-asset-card--downloadable) {
+ .mdx-asset-card__inner {
+ border-bottom: 1px solid rgb(var(--lsd-border-primary));
+ }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx
new file mode 100644
index 00000000..4b3a279c
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/AssetCard.tsx
@@ -0,0 +1,77 @@
+import { Button, Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import { KeepRatio } from '../../KeepRatio'
+import './AssetCard.scss'
+import { IconDownload } from '../../Icon'
+
+export type AssetCardProps = Omit
+ {children}
+
+ {keep && (
+
+ )}
+
+
+ )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/index.ts
new file mode 100644
index 00000000..4d47f52f
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/AssetCard/index.ts
@@ -0,0 +1 @@
+export * from './AssetCard'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.scss
new file mode 100644
index 00000000..1f0c440c
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.scss
@@ -0,0 +1,90 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-erc {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ border: 1px solid rgb(var(--lsd-border-primary));
+ text-decoration: none !important;
+ min-height: 144px;
+}
+
+.mdx-erc__icon {
+ padding: 16px 16px 16px 8px;
+}
+
+.mdx-erc__inner {
+ flex-grow: 1;
+ padding: 16px;
+}
+
+.mdx-erc:hover {
+ .mdx-erc__title {
+ text-decoration: underline !important;
+ }
+}
+
+.mdx-erc__logo {
+ width: 32px !important;
+ height: 32px !important;
+
+ svg {
+ width: 32px !important;
+ height: 32px !important;
+ }
+}
+
+.mdx-erc__title {
+ margin-top: 32px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ max-height: calc(2 * var(--lsd-body1-lineHeight));
+}
+
+.mdx-erc__description {
+ margin-top: 8px;
+}
+
+.mdx-erc--with-preview {
+ display: flex;
+ flex-direction: column;
+
+ .mdx-erc__preview-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-bottom: 1px solid rgb(var(--lsd-border-primary));
+ }
+
+ .mdx-erc__icon {
+ display: none;
+ }
+
+ .mdx-erc__inner {
+ padding: 16px;
+ display: grid;
+ gap: 0 16px;
+ grid-template-columns: 32px auto;
+ grid-template-rows: auto auto;
+ }
+
+ .mdx-erc__logo {
+ grid-column: 1;
+ grid-row: 1 / span 2;
+ align-self: center;
+ }
+
+ .mdx-erc__title {
+ margin-top: 0;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ max-height: calc(1 * var(--lsd-body1-lineHeight));
+ }
+
+ .mdx-erc__description {
+ margin-top: 4px;
+ }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.tsx
new file mode 100644
index 00000000..2fdaa2b0
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/ExternalResourceCard.tsx
@@ -0,0 +1,83 @@
+import { Typography } from '@acid-info/lsd-react'
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import React from 'react'
+import { IconExternalLink } from '../../Icon'
+import './ExternalResourceCard.scss'
+import { KeepRatio } from '../../KeepRatio'
+
+export type ExternalResourceCardProps = Omit<
+ React.HTMLProps
+ {title && (
+
+ {title}
+
+ )}
+
+ 
+
+
+ {
+ // TODO: use LSD ButtonGroup
+ }
+ {isDownloadable && (
+
+ {downloadable.map((downloadable, index) => (
+
+ }
+ >
+ {downloadable.title}
+
+
+ ))}
+
+ )}
+
+ {(logoSrc || logoSrcDark) && (
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+
+ )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/index.ts
new file mode 100644
index 00000000..da291d3d
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ExternalResourceCard/index.ts
@@ -0,0 +1 @@
+export * from './ExternalResourceCard'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
index 0e8796e9..24e703e5 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
@@ -1,8 +1,10 @@
export * from './AppCard'
+export * from './AssetCard'
export * from './Box'
export * from './CallToActionButton'
export * from './CallToActionSection'
export * from './DocMetadata'
+export * from './ExternalResourceCard'
export * from './FeatureList'
export * from './Grid'
export * from './Hero'
diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/download.svg b/packages/logos-docusaurus-theme/src/client/static/icons/download.svg
new file mode 100644
index 00000000..35f433bf
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/static/icons/download.svg
@@ -0,0 +1,3 @@
+