Портфолио
Nextra 2.x
Настройки
Компоненты
Карточки

Карточки

Пример

ВыноскиВкладкиШаги

Реализация

⚠️

Иногда реализация, предложенная в документации Nextra (opens in a new tab), не работает. Возникает сообщение об ошибке. В этом случае возможно вставить svg код иконки непосредственно в компонент Card, а не передавать ссылку на импортируемый svg файл.

Согласно документации

Markdown
import { Cards, Card } from 'nextra/components'
import { CardsIcon, OneIcon, WarningIcon } from '../../icons'
 
<Cards>
  <Card icon={<WarningIcon />} title="Callout" href="/docs/guide/built-ins/callout" />
  <Card icon={<CardsIcon />} title="Tabs" href="/docs/guide/built-ins/tabs" />
  <Card icon={<OneIcon />} title="Steps" href="/docs/guide/built-ins/steps" />
</Cards>

На практике

Markdown
import { Cards, Card } from 'nextra/components'
 
<Cards>
  <Card
    icon={
			<svg
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke-width="1.5"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
				/>
			</svg>
		}
    title="Выноски"
    href="./callout"
  />
  <Card 
		icon={
			<svg
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke-width="1.5"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"
				/>
			</svg>
		} 
		title="Вкладки" 
		href="./tabs" 
	/>
  <Card 
		icon={
			<svg
				xmlns="http://www.w3.org/2000/svg"
				fill="currentColor"
				stroke="none"
				viewBox="-1 0 19 19"
			>
				<path
					d="M16.417 9.6A7.917 7.917 0 1 1 8.5 1.683 7.917 7.917 0 0 1 16.417 9.6zM9.666 6.508H8.248L6.09 8.09l.806 1.103 1.222-.945v4.816h1.547z"
				/>
			</svg>
		}
		title="Шаги"
		href="./steps"
	/>
</Cards>
ВкладкиШаги