Card

Cards are versatile content blocks for displaying concise information with optional actions. They typically include a title, description, image, and action.

Schema Configuration

Sanity Schema

// In your feature descriptor
import { FeatureDescriptor } from '@vyuh/sanity-schema-core';
import { CardDescriptor } from '@vyuh/sanity-schema-system';

export const myFeature = new FeatureDescriptor({
  name: 'myFeature',
  title: 'My Feature',

  contents: [
    new CardDescriptor({
      // Optional: Define available layouts
      layouts: [defaultCardLayout, buttonCardLayout, listItemCardLayout],
    }),
  ],
});

Content Structure

// Card content object structure
interface Card {
  _type: 'vyuh.card';
  title: string;
  description?: string;
  image?: {
    _ref: string;
  };
  action?: {
    _type: string;
    // Action-specific properties
  };
  layout?: {
    _type: string;
    // Layout-specific properties
  };
}

Tip

Cards can have different layouts like default, button, or list item. The same card content can be displayed differently by changing its layout.

Note

When adding custom layouts to a content block, always make sure to include them in the corresponding descriptor’s layouts property as shown in the schema configuration example above.

Extensibility

Schema Descriptors

The CardDescriptor in the schema system provides the following extensibility points:

• layouts: Register custom card layouts that define how the card is presented
• actions: Define custom actions that can be performed on the card

// Schema-side descriptor
new CardDescriptor({
  layouts: [featuredCardLayout, 'vyuh.card.layout.default'],
  actions: [customCardAction]
})

React Descriptors

In the React system, card content is configured using the CardDescriptor:

// React-side registration
import { CardDescriptor } from '@vyuh/react-feature-system';
import { ContentExtensionDescriptor } from '@vyuh/react-extension-content';
import { FeatureDescriptor } from '@vyuh/react-core';

new FeatureDescriptor({
  name: 'myFeature',
  extensions: [
    new ContentExtensionDescriptor({
      contents: [
        new CardDescriptor({
          layouts: [FeaturedCardLayout.typeDescriptor],
        }),
      ],
      actions: [MyCustomAction.typeDescriptor],
    }),
  ],
});