Components/Split

Split Cards List

A component that displays a list of cards in a row in a two-column layout. In the example it's matched with Split Content. You can simply manage position of the content by changing the order of the blocks in the Split Row.

Getting Started

Installing the template

Follow these simple steps to install the template locally with command line

Use Template
Step 1
Initialize template with Sanity CLI

Run the command in your Terminal to initialize this template on your local computer:

npm create sanity@latest -- --template serge-0v/next-js-sanity-starter

Step 2
Run the template locally

Start the development server:

pnpm dev

Step 3
Open the app and sign in to the Studio
  • Open the Next.js app at http://localhost:3000
  • Open the Studio running locally in your browser on http://localhost:3000/studio. You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI.
Step 4
Import Sample Data (Optional)

Import the demo dataset to get started with sample content:

npx sanity dataset import sample-data.tar.gz production --replace

Split

A component that displays content in a two-column layout. Includes sub-components for Split Content, Split Image, Split Cards List, Split Info List. To preview each block, head to the next component.

Split Content

A component that displays text content in a two-column layout. In the example it's matched with Split Image. You can simply manage position of the content by changing the order of the blocks in the Split Row. You can make it sticky on desktop.