Skip to main content

Create Interstitial component

This guided example show how to find a fitting, existing kickstartDS base component for one of your use cases, to repurpose it. Meaning: you start with some requirements, match an existing component, find a fitting new name for the use case, and give it a new purpose by greatly restricting and rewiring its options for the new context.

Even while using the component rather directly from kickstartDS, you'll want to find the correct set of properties for your own use case. Components in kickstartDS come equipped with properties for a wide range of possible use cases, so it makes sense to reduce those to the ones you really need... to make components easier to understand, use and reason about!

We call this type of workflow Creation. Learn more about it in our dedicated guide about it. If you're unsure about something, have a look over there. We go into more background detail there about what we're doing here.

This also means that, for this example, we'll get by without any additional styling needed. We'll live off of everything already set in place by our existing Design Token and component structure.

Overview

More concretely: what we're building up to in this example... and for the sake of imagination, assume this was what your designer cooked up:

This will be done in three simple steps:

  1. Component Definition,
  2. Component Mapping, and
  3. Component Creation

For more details about those steps, have a look at the guide about different component processes and their shared structure.

Requirements

This guide assumes that you already have a working Design System, that is based on kickstartDS, running.
If that's not the case, follow our Create your Design System guide .

Additionally you'll need access to our Content module, to use the Storytelling component this guide is based on.

kickstartDS Content Module

The perfect addition to our Open Source base

The Content Module includes seven rich components: Hero visual, Quote, Storytelling etc. — everything you need to build beautiful content experiences or to enrich your existing Design System

Interested? Contact us!

1. Component Definition

Purpose

We want to create an element that can be interjected into otherwise monotone content. To direct focus, or present alternatives, to the main body of content. We'll probably need to be able to define a title and some body content. Additionally, we want to add some flavour to the component by using noticeable design variations, not typically found in our other components.

Adding a static background image to the component could be nice touch!

Finally being able to add a link with a link target (link.target) and and link text (link.text) will be needed, but they should be optional.

Structure

This would leave us with the following properties (API) for our new component. Required fields are marked with a *:

PropertyTypeDescription
title *stringTitle to show
body *stringBody content to display
link.targetstringPage to link to
link.textstringText to use for the link

Fields that should be required are marked with a *.

While directly helping us get a better grasp on our new component, these will also be used to write our JSON Schema later!

2. Component Mapping

Next we want to search for components that could be of use in assembling this new one. This might be a single, big component that more or less directly fits our use case, or alternatively a combination of components that could serve as the basis by combining them.

This will then serve as our kickstartDS base component, which will be adjusted to fit our needs!

Matching it

From a quick glance, our Storytelling component seems like it might fit the bill quite nicely! It has options for a title (box.headline) and body (box.text), supports some RTE-like formatting for our body, and has a wide range of possible design adjustments: mainly background colors & images, an optional foreground image and a bunch of possible arrangements of those.

This would also enable us to add a nice-looking background image to the whole component by using a combination of its attributes backgroundImage and backgroundColor:

For a complete overview of the available options, take a look at the Storytelling component API here:
https://www.kickstartds.com/storybook/?path=/docs/content-storytelling--image

Adjustments

This only gives us a rough sketch, though. We still need to adjust the example code to exactly fit our needs. In the process we will hard-code a bunch of options, because we're only interested in a specific set of them. The rest can be set to default values, which don't need to become part of the component API.

Great components

Sed diam nonumy eirmod tempor invidunt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Request a guided demo
src/App.jsx
Copy

_44
import { Storytelling } from '@kickstartds/content/lib/storytelling';
_44
_44
export default function App() {
_44
return (
_44
<Storytelling
_44
box={{
_44
hAlign: 'center',
_44
headline: {
_44
align: null,
_44
content: 'Great components',
_44
level: 'h2',
_44
pageHeader: false,
_44
spaceAfter: 'minimum',
_44
styleAs: 'h2',
_44
subheadline: 'Sed diam nonumy eirmod tempor invidunt',
_44
},
_44
link: {
_44
fillAnimation: false,
_44
href: '#',
_44
iconAfter: false,
_44
iconAnimation: false,
_44
iconBefore: false,
_44
label: 'Request a guided demo',
_44
newTab: false,
_44
size: 'medium',
_44
variant: 'solid',
_44
},
_44
text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
_44
textAlign: 'left',
_44
vAlign: 'center',
_44
}}
_44
image={{
_44
hAlign: 'center',
_44
order: {
_44
desktopImageLast: true,
_44
mobileImageLast: false,
_44
},
_44
ratio: 'none',
_44
source: 'https://www.kickstartDS.com/img/recipes/toolbox.svg',
_44
vAlign: 'center',
_44
}}
_44
/>
_44
);
_44
}

Start with an existing Storytelling component variant

We'll start by copying the JSX code for the Image variant of our Storytelling component, from here:
https://www.kickstartds.com/storybook/?path=/docs/content-storytelling--image

Remove all of the unneeded stuff

There are a bunch of properties that are completely optional, mainly those having their values undefined or null in the copied JSX, or ones which just state the default value of that property anyway. Those can be freely removed.
We'll also not be utilizing the image, at least for now!

src/App.jsx
Copy

_21
import { Storytelling } from '@kickstartds/content';
_21
_21
export default function App() {
_21
return (
_21
<Storytelling
_21
box={{
_21
headline: {
_21
content: 'Great components',
_21
level: 'h2',
_21
styleAs: 'h2',
_21
subheadline: 'Sed diam nonumy eirmod tempor invidunt',
_21
},
_21
link: {
_21
href: '#',
_21
label: 'Request a guided demo',
_21
variant: 'solid',
_21
},
_21
}}
_21
/>
_21
);
_21
}

Great components

Sed diam nonumy eirmod tempor invidunt

Request a guided demo

Hard-code static, required properties

We add nice values for backgroundColor and backgroundImage, invert everything with ks-inverted to make it pop, and change some alignments for the box, as well as make the headline "louder" by styling it as a h1.

src/App.jsx
Copy

_25
import { Storytelling } from '@kickstartds/content';
_25
_25
export default function App() {
_25
return (
_25
<Storytelling
_25
backgroundColor="#06566A"
_25
backgroundImage="https://www.kickstartDS.com/img/recipes/graphics--bg.svg"
_25
ks-inverted="true"
_25
box={{
_25
hAlign: 'left',
_25
headline: {
_25
content: 'Great components',
_25
level: 'h2',
_25
styleAs: 'h1',
_25
subheadline: 'Sed diam nonumy eirmod tempor invidunt',
_25
},
_25
link: {
_25
href: '#',
_25
label: 'Request a guided demo',
_25
variant: 'solid',
_25
},
_25
}}
_25
/>
_25
);
_25
}

Great components

Sed diam nonumy eirmod tempor invidunt

Request a guided demo

Add some demo content

Now we just need to enter some "real" content, and we've successfully recreated what we set out to do in the start. At least for the markup part!

src/App.jsx
Copy

_26
import { Storytelling } from '@kickstartds/content';
_26
_26
export default function App() {
_26
return (
_26
<Storytelling
_26
backgroundColor="#06566A"
_26
backgroundImage="https://www.kickstartDS.com/img/recipes/graphics--bg.svg"
_26
ks-inverted="true"
_26
box={{
_26
hAlign: 'left',
_26
headline: {
_26
content: 'Dont know where to start?',
_26
level: 'h2',
_26
styleAs: 'h1',
_26
subheadline:
_26
'Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis.',
_26
},
_26
link: {
_26
href: '#',
_26
label: 'Get in touch',
_26
variant: 'solid',
_26
},
_26
}}
_26
/>
_26
);
_26
}

Dont know where to start?

Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis.

Get in touch

Start with an existing Storytelling component variant

We'll start by copying the JSX code for the Image variant of our Storytelling component, from here:
https://www.kickstartds.com/storybook/?path=/docs/content-storytelling--image

Remove all of the unneeded stuff

There are a bunch of properties that are completely optional, mainly those having their values undefined or null in the copied JSX, or ones which just state the default value of that property anyway. Those can be freely removed.
We'll also not be utilizing the image, at least for now!

Hard-code static, required properties

We add nice values for backgroundColor and backgroundImage, invert everything with ks-inverted to make it pop, and change some alignments for the box, as well as make the headline "louder" by styling it as a h1.

Add some demo content

Now we just need to enter some "real" content, and we've successfully recreated what we set out to do in the start. At least for the markup part!

src/App.jsx
CopyExpandClose

_44
import { Storytelling } from '@kickstartds/content/lib/storytelling';
_44
_44
export default function App() {
_44
return (
_44
<Storytelling
_44
box={{
_44
hAlign: 'center',
_44
headline: {
_44
align: null,
_44
content: 'Great components',
_44
level: 'h2',
_44
pageHeader: false,
_44
spaceAfter: 'minimum',
_44
styleAs: 'h2',
_44
subheadline: 'Sed diam nonumy eirmod tempor invidunt',
_44
},
_44
link: {
_44
fillAnimation: false,
_44
href: '#',
_44
iconAfter: false,
_44
iconAnimation: false,
_44
iconBefore: false,
_44
label: 'Request a guided demo',
_44
newTab: false,
_44
size: 'medium',
_44
variant: 'solid',
_44
},
_44
text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
_44
textAlign: 'left',
_44
vAlign: 'center',
_44
}}
_44
image={{
_44
hAlign: 'center',
_44
order: {
_44
desktopImageLast: true,
_44
mobileImageLast: false,
_44
},
_44
ratio: 'none',
_44
source: 'https://www.kickstartDS.com/img/recipes/toolbox.svg',
_44
vAlign: 'center',
_44
}}
_44
/>
_44
);
_44
}

Great components

Sed diam nonumy eirmod tempor invidunt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Request a guided demo

With our small component API in place, and this rough sketch for the markup in mind, we can start actually implementing our component!

3. Component Creation

We like to colocate components. This means to have all involved files next to each other in the same folder; the template (.jsx / .tsx), potential CSS / SASS (.css / .scss), JavaScript (.js / .ts), our JSON Schema component definition (.schema.json), and so on.

So we start by creating the directory src/components/interstitial, from our Design System repository root:


_1
mkdir -p src/components/interstitial

This is the folder we'll add new files to in the coming few paragraphs.

JSON Schema definition

First file we'll create is the JSON Schema definition, encoding the structure we've defined for our component before:

Finished JSON Schema

We'll work our way up to this JSON Schema definition.

src/components/interstitial/interstitial.schema.json
Copy

_42
{
_42
"$schema": "http://json-schema.org/draft-07/schema#",
_42
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_42
"title": "Interstitial",
_42
"description": "Component used to interject prominent call-to-action into content",
_42
"type": "object",
_42
"properties": {
_42
"title": {
_42
"type": "string",
_42
"title": "Title",
_42
"description": "Title for interstitial",
_42
"format": "markdown",
_42
"default": "Dont know where to start?"
_42
},
_42
"body": {
_42
"type": "string",
_42
"title": "Body",
_42
"description": "Text content to display inside the interstitial",
_42
"format": "markdown",
_42
"default": "Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis."
_42
},
_42
"link": {
_42
"type": "object",
_42
"title": "Link",
_42
"description": "Link added to the interstitial",
_42
"properties": {
_42
"target": {
_42
"type": "string",
_42
"title": "Target (href)",
_42
"description": "URL / href for the link to point to"
_42
},
_42
"text": {
_42
"type": "string",
_42
"title": "Label",
_42
"description": "Label to use for the link",
_42
"default": "Get in touch"
_42
}
_42
}
_42
}
_42
},
_42
"required": ["title", "body"]
_42
}

Start with just the boilerplate for a component definition

This includes all necessarily required values for a valid component definition in kickstartDS.

To learn more about our use of JSON Schema, read our Foundations page about it.

src/components/interstitial/interstitial.schema.json
Copy

_8
{
_8
"$schema": "http://json-schema.org/draft-07/schema#",
_8
"$id": "",
_8
"title": "",
_8
"description": "",
_8
"type": "object",
_8
"properties": {}
_8
}

Add basic info describing component

We start by adding a title, description and $id attribute. The correct $id depends on your Design System configuration. We'll assume you've created components before, living under the schema prefix http://schema.mydesignsystem.com.

src/components/interstitial/interstitial.schema.json
Copy

_8
{
_8
"$schema": "http://json-schema.org/draft-07/schema#",
_8
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_8
"title": "Interstitial",
_8
"description": "Component used to interject prominent call-to-action into content",
_8
"type": "object",
_8
"properties": {}
_8
}

Create title and body fields...

Both fields are straight-forward string type properties, so we just document them a bit!
We do mark them by setting format to markdown, though, which enables light RTE functionality in its rendering later on.

src/components/interstitial/interstitial.schema.json
Copy

_23
{
_23
"$schema": "http://json-schema.org/draft-07/schema#",
_23
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_23
"title": "Interstitial",
_23
"description": "Component used to interject prominent call-to-action into content",
_23
"type": "object",
_23
"properties": {
_23
"title": {
_23
"type": "string",
_23
"title": "Title",
_23
"description": "Title for interstitial",
_23
"format": "markdown",
_23
"default": "Dont know where to start?"
_23
},
_23
"body": {
_23
"type": "string",
_23
"title": "Body",
_23
"description": "Text content to display inside the interstitial",
_23
"format": "markdown",
_23
"default": "Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis."
_23
}
_23
}
_23
}

... and make them required

We declare both properties as required!

src/components/interstitial/interstitial.schema.json
Copy

_24
{
_24
"$schema": "http://json-schema.org/draft-07/schema#",
_24
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_24
"title": "Interstitial",
_24
"description": "Component used to interject prominent call-to-action into content",
_24
"type": "object",
_24
"properties": {
_24
"title": {
_24
"type": "string",
_24
"title": "Title",
_24
"description": "Title for interstitial",
_24
"format": "markdown",
_24
"default": "Dont know where to start?"
_24
},
_24
"body": {
_24
"type": "string",
_24
"title": "Body",
_24
"description": "Text content to display inside the interstitial",
_24
"format": "markdown",
_24
"default": "Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis."
_24
}
_24
},
_24
"required": ["title", "body"]
_24
}

This will hold our properties target and text. We add them to their own object to indicate that they're used to be together, thus hinting at their combined usage.

src/components/interstitial/interstitial.schema.json
Copy

_30
{
_30
"$schema": "http://json-schema.org/draft-07/schema#",
_30
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_30
"title": "Interstitial",
_30
"description": "Component used to interject prominent call-to-action into content",
_30
"type": "object",
_30
"properties": {
_30
"title": {
_30
"type": "string",
_30
"title": "Title",
_30
"description": "Title for interstitial",
_30
"format": "markdown",
_30
"default": "Dont know where to start?"
_30
},
_30
"body": {
_30
"type": "string",
_30
"title": "Body",
_30
"description": "Text content to display inside the interstitial",
_30
"format": "markdown",
_30
"default": "Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis."
_30
},
_30
"link": {
_30
"type": "object",
_30
"title": "Link",
_30
"description": "Link added to the interstitial",
_30
"properties": {}
_30
}
_30
},
_30
"required": ["title", "body"]
_30
}

Finalizing our JSON Schema, we add the two last link sub properties target and link, both again simple string types.

src/components/interstitial/interstitial.schema.json
Copy

_42
{
_42
"$schema": "http://json-schema.org/draft-07/schema#",
_42
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_42
"title": "Interstitial",
_42
"description": "Component used to interject prominent call-to-action into content",
_42
"type": "object",
_42
"properties": {
_42
"title": {
_42
"type": "string",
_42
"title": "Title",
_42
"description": "Title for interstitial",
_42
"format": "markdown",
_42
"default": "Dont know where to start?"
_42
},
_42
"body": {
_42
"type": "string",
_42
"title": "Body",
_42
"description": "Text content to display inside the interstitial",
_42
"format": "markdown",
_42
"default": "Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis."
_42
},
_42
"link": {
_42
"type": "object",
_42
"title": "Link",
_42
"description": "Link added to the interstitial",
_42
"properties": {
_42
"target": {
_42
"type": "string",
_42
"title": "Target (href)",
_42
"description": "URL / href for the link to point to"
_42
},
_42
"text": {
_42
"type": "string",
_42
"title": "Label",
_42
"description": "Label to use for the link",
_42
"default": "Get in touch"
_42
}
_42
}
_42
}
_42
},
_42
"required": ["title", "body"]
_42
}

Finished JSON Schema

Let's have a look at our completed JSON Schema definition.

src/components/interstitial/interstitial.schema.json
Copy

_42
{
_42
"$schema": "http://json-schema.org/draft-07/schema#",
_42
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_42
"title": "Interstitial",
_42
"description": "Component used to interject prominent call-to-action into content",
_42
"type": "object",
_42
"properties": {
_42
"title": {
_42
"type": "string",
_42
"title": "Title",
_42
"description": "Title for interstitial",
_42
"format": "markdown",
_42
"default": "Dont know where to start?"
_42
},
_42
"body": {
_42
"type": "string",
_42
"title": "Body",
_42
"description": "Text content to display inside the interstitial",
_42
"format": "markdown",
_42
"default": "Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis."
_42
},
_42
"link": {
_42
"type": "object",
_42
"title": "Link",
_42
"description": "Link added to the interstitial",
_42
"properties": {
_42
"target": {
_42
"type": "string",
_42
"title": "Target (href)",
_42
"description": "URL / href for the link to point to"
_42
},
_42
"text": {
_42
"type": "string",
_42
"title": "Label",
_42
"description": "Label to use for the link",
_42
"default": "Get in touch"
_42
}
_42
}
_42
}
_42
},
_42
"required": ["title", "body"]
_42
}

Finished JSON Schema

We'll work our way up to this JSON Schema definition.

Start with just the boilerplate for a component definition

This includes all necessarily required values for a valid component definition in kickstartDS.

To learn more about our use of JSON Schema, read our Foundations page about it.

Add basic info describing component

We start by adding a title, description and $id attribute. The correct $id depends on your Design System configuration. We'll assume you've created components before, living under the schema prefix http://schema.mydesignsystem.com.

Create title and body fields...

Both fields are straight-forward string type properties, so we just document them a bit!
We do mark them by setting format to markdown, though, which enables light RTE functionality in its rendering later on.

... and make them required

We declare both properties as required!

This will hold our properties target and text. We add them to their own object to indicate that they're used to be together, thus hinting at their combined usage.

Finalizing our JSON Schema, we add the two last link sub properties target and link, both again simple string types.

Finished JSON Schema

Let's have a look at our completed JSON Schema definition.

src/components/interstitial/interstitial.schema.json
CopyExpandClose

_42
{
_42
"$schema": "http://json-schema.org/draft-07/schema#",
_42
"$id": "http://schema.mydesignsystem.com/interstitial.schema.json",
_42
"title": "Interstitial",
_42
"description": "Component used to interject prominent call-to-action into content",
_42
"type": "object",
_42
"properties": {
_42
"title": {
_42
"type": "string",
_42
"title": "Title",
_42
"description": "Title for interstitial",
_42
"format": "markdown",
_42
"default": "Dont know where to start?"
_42
},
_42
"body": {
_42
"type": "string",
_42
"title": "Body",
_42
"description": "Text content to display inside the interstitial",
_42
"format": "markdown",
_42
"default": "Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis."
_42
},
_42
"link": {
_42
"type": "object",
_42
"title": "Link",
_42
"description": "Link added to the interstitial",
_42
"properties": {
_42
"target": {
_42
"type": "string",
_42
"title": "Target (href)",
_42
"description": "URL / href for the link to point to"
_42
},
_42
"text": {
_42
"type": "string",
_42
"title": "Label",
_42
"description": "Label to use for the link",
_42
"default": "Get in touch"
_42
}
_42
}
_42
}
_42
},
_42
"required": ["title", "body"]
_42
}

This concludes creating the JSON Schema. When running the schema generation in our Design System again, we should now automatically end up with a corresponding type definition to be used in creation of the template in the next step:

src/components/interstitial/InterstitialProps.ts
src/components/interstitial/interstitial.schema.json
Copy

_43
/* eslint-disable */
_43
/**
_43
* This file was automatically generated by json-schema-to-typescript.
_43
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
_43
* and run `yarn run schema` to regenerate this file.
_43
*/
_43
_43
/\*\*
_43
_43
- Title for interstitial
_43
\*/
_43
export type Title = string;
_43
/\*\*
_43
- Text content to display inside the interstitial
_43
\*/
_43
export type Body = string;
_43
/\*\*
_43
- URL / href for the link to point to
_43
\*/
_43
export type TargetHref = string;
_43
/\*\*
_43
- Label to use for the link
_43
\*/
_43
export type Label = string;
_43
_43
/\*\*
_43
_43
- Component used to interject prominent call-to-action into content
_43
\*/
_43
export interface InterstitialProps {
_43
title: Title;
_43
body: Body;
_43
link?: Link;
_43
[k: string]: unknown;
_43
}
_43
/\*\*
_43
- Link added to the interstitial
_43
\*/
_43
export interface Link {
_43
target?: TargetHref;
_43
text?: Label;
_43
[k: string]: unknown;
_43
}

How your schema generation is started might change depending on your setup. If you've followed our "Create your Design System" guide before, or want to add it like we do, follow this section of it closely.

React Template

As the final step for this example, we'll add the template. This will be a purely functional React component, mapping our component structure (as defined in the JSON Schema) to the original component we're basing our work off of; the kickstartDS Storytelling component.

Finished React template

We'll work our way up to this React template.

src/components/interstitial/InterstitialComponent.tsx
Copy

_32
import React, { FunctionComponent, HTMLAttributes } from 'react';
_32
_32
import { Storytelling } from '@kickstartds/content';
_32
_32
import { InterstitialProps } from './InterstitialProps';
_32
_32
export const Interstitial: FunctionComponent<
_32
InterstitialProps & HTMLAttributes<HTMLDivElement>
_32
> = ({ title, body, link, ...props }) => (
_32
<Storytelling
_32
backgroundColor="#06566A"
_32
backgroundImage="https://www.kickstartDS.com/img/recipes/graphics--bg.svg"
_32
ks-inverted="true"
_32
box={{
_32
hAlign: 'left',
_32
headline: {
_32
content: title,
_32
level: 'h2',
_32
styleAs: 'h1',
_32
subheadline: body,
_32
},
_32
link: link
_32
? {
_32
href: link.target,
_32
label: link.text,
_32
variant: 'solid',
_32
}
_32
: {},
_32
}}
_32
{...props}
_32
/>
_32
);

Start with a boilerplate

Again we'll start with a very basic skeleton for our React component. We're using TypeScript here (.tsx), but it works the same with plain JSX (.jsx).

src/components/interstitial/InterstitialComponent.tsx
Copy

_5
import React, { FunctionComponent, HTMLAttributes } from 'react';
_5
_5
export const Interstitial: FunctionComponent<HTMLAttributes<HTMLDivElement>> = (
_5
props
_5
) => <div {...props}>Lorem ipsum</div>;

Add correct typings

Import and add generated props from InterstitialProps.ts. Generated by our JSON Schema, these guarantee you're matching your expected component structure while implementing. In combination with TypeScript this enables auto-complete and auto-fix for even better DX! (see here, at the very end of that section, for more details)

src/components/interstitial/InterstitialComponent.tsx
Copy

_7
import React, { FunctionComponent, HTMLAttributes } from 'react';
_7
_7
import { InterstitialProps } from './InterstitialProps';
_7
_7
export const Interstitial: FunctionComponent<
_7
InterstitialProps & HTMLAttributes<HTMLDivElement>
_7
> = (props) => <div {...props}>Lorem ipsum</div>;

Destructure props

We also need to add our own properties, so we'll destructure props. We'll just pass through everything HTMLDivElement related!
While at it, some dummy markup for our properties is added.

src/components/interstitial/InterstitialComponent.tsx
Copy

_13
import React, { FunctionComponent, HTMLAttributes } from 'react';
_13
_13
import { InterstitialProps } from './InterstitialProps';
_13
_13
export const Interstitial: FunctionComponent<
_13
InterstitialProps & HTMLAttributes<HTMLDivElement>
_13
> = ({ title, body, link, ...props }) => (
_13
<div {...props}>
_13
<span>{title}</span>
_13
<span>{body}</span>
_13
{link && <a href={link.target}>{link.text}</a>}
_13
</div>
_13
);

Add Storytelling component

Now we'll import the kickstartDS Storytelling component. To start, we'll use the exact markup we've generated before.

src/components/interstitial/InterstitialComponent.tsx
Copy

_30
import React, { FunctionComponent, HTMLAttributes } from 'react';
_30
_30
import { Storytelling } from '@kickstartds/content';
_30
_30
import { InterstitialProps } from './InterstitialProps';
_30
_30
export const Interstitial: FunctionComponent<
_30
InterstitialProps & HTMLAttributes<HTMLDivElement>
_30
> = ({ title, body, link, ...props }) => (
_30
<Storytelling
_30
backgroundColor="#06566A"
_30
backgroundImage="https://www.kickstartDS.com/img/recipes/graphics--bg.svg"
_30
ks-inverted="true"
_30
box={{
_30
hAlign: 'left',
_30
headline: {
_30
content: 'Dont know where to start?',
_30
level: 'h2',
_30
styleAs: 'h1',
_30
subheadline:
_30
'Autem voluptas quis facere et qui voluptate earum. Dolorum totam animi perferendis.',
_30
},
_30
link: {
_30
href: '#',
_30
label: 'Get in touch',
_30
variant: 'solid',
_30
},
_30
}}
_30
/>
_30
);

Connect props

Finally we connect our props to the Storytelling component accordingly.

src/components/interstitial/InterstitialComponent.tsx
Copy

_32
import React, { FunctionComponent, HTMLAttributes } from 'react';
_32
_32
import { Storytelling } from '@kickstartds/content';
_32
_32
import { InterstitialProps } from './InterstitialProps';
_32
_32
export const Interstitial: FunctionComponent<
_32
InterstitialProps & HTMLAttributes<HTMLDivElement>
_32
> = ({ title, body, link, ...props }) => (
_32
<Storytelling
_32
backgroundColor="#06566A"
_32
backgroundImage="https://www.kickstartDS.com/img/recipes/graphics--bg.svg"
_32
ks-inverted="true"
_32
box={{
_32
hAlign: 'left',
_32
headline: {
_32
content: title,
_32
level: 'h2',
_32
styleAs: 'h1',
_32
subheadline: body,
_32
},
_32
link: link
_32
? {
_32
href: link.target,
_32
label: link.text,
_32
variant: 'solid',
_32
}
_32
: {},
_32
}}
_32
{...props}
_32
/>
_32
);

Finished React template

Let's have a look at our completed React template.

src/components/interstitial/InterstitialComponent.tsx
Copy

_32
import React, { FunctionComponent, HTMLAttributes } from 'react';
_32
_32
import { Storytelling } from '@kickstartds/content';
_32
_32
import { InterstitialProps } from './InterstitialProps';
_32
_32
export const Interstitial: FunctionComponent<
_32
InterstitialProps & HTMLAttributes<HTMLDivElement>
_32
> = ({ title, body, link, ...props }) => (
_32
<Storytelling
_32
backgroundColor="#06566A"
_32
backgroundImage="https://www.kickstartDS.com/img/recipes/graphics--bg.svg"
_32
ks-inverted="true"
_32
box={{
_32
hAlign: 'left',
_32
headline: {
_32
content: title,
_32
level: 'h2',
_32
styleAs: 'h1',
_32
subheadline: body,
_32
},
_32
link: link
_32
? {
_32
href: link.target,
_32
label: link.text,
_32
variant: 'solid',
_32
}
_32
: {},
_32
}}
_32
{...props}
_32
/>
_32
);

Finished React template

We'll work our way up to this React template.

Start with a boilerplate

Again we'll start with a very basic skeleton for our React component. We're using TypeScript here (.tsx), but it works the same with plain JSX (.jsx).

Add correct typings

Import and add generated props from InterstitialProps.ts. Generated by our JSON Schema, these guarantee you're matching your expected component structure while implementing. In combination with TypeScript this enables auto-complete and auto-fix for even better DX! (see here, at the very end of that section, for more details)

Destructure props

We also need to add our own properties, so we'll destructure props. We'll just pass through everything HTMLDivElement related!
While at it, some dummy markup for our properties is added.

Add Storytelling component

Now we'll import the kickstartDS Storytelling component. To start, we'll use the exact markup we've generated before.

Connect props

Finally we connect our props to the Storytelling component accordingly.

Finished React template

Let's have a look at our completed React template.

src/components/interstitial/InterstitialComponent.tsx
CopyExpandClose

_32
import React, { FunctionComponent, HTMLAttributes } from 'react';
_32
_32
import { Storytelling } from '@kickstartds/content';
_32
_32
import { InterstitialProps } from './InterstitialProps';
_32
_32
export const Interstitial: FunctionComponent<
_32
InterstitialProps & HTMLAttributes<HTMLDivElement>
_32
> = ({ title, body, link, ...props }) => (
_32
<Storytelling
_32
backgroundColor="#06566A"
_32
backgroundImage="https://www.kickstartDS.com/img/recipes/graphics--bg.svg"
_32
ks-inverted="true"
_32
box={{
_32
hAlign: 'left',
_32
headline: {
_32
content: title,
_32
level: 'h2',
_32
styleAs: 'h1',
_32
subheadline: body,
_32
},
_32
link: link
_32
? {
_32
href: link.target,
_32
label: link.text,
_32
variant: 'solid',
_32
}
_32
: {},
_32
}}
_32
{...props}
_32
/>
_32
);

This concludes the creation of our new Interstitial component. It's now ready to be used inside your Design System, and available to your down stream consumers... hopefully efficiently closing a gap for them!

Finished Code Sandbox

Play around with your new component directly in a Code Sandbox below: