Docs - Kitchen Sink (Component Overview)

Animate

Animate one or more elements.

BandcampTrack

Embed a track from bandcamp.com

Box

A <Box /> has a defined size of width and height.

It will be displayed within a <Boxes /> grid, can have background images and can be colored.

BoxCarousel

Creates a carousel within a Box. Must contain <BoxCarouselSlide /> components.

BoxCarouselSlide

Creates a carousel slide for. Must be within a <BoxCarousel /> component.

Boxes

Creates a 48 column grid layout.

BoxVideo

Creates a box with a embedded video play.

Can be used as visual element or as fully blown video player.

Claim

Very bold version of

Supports all features of the <TextBlock /> component.

Font

Icon

Renders an icon from entypo. Only a subset of all entypo icons are available due to performance reasons.

List

ListItem

Renders a list with an optional title and customizable bullet points.

ResponsiveTextBlock

A regular text block but font size and line height depend on the users view port.

Supports all features of the <TextBlock /> component.

TextBlock

Card

Creates a common Card element. Should be within a <Grid/>, ` or similar.

ContactForm

Creates a contact form with spam protection.

Image

Renders an image from an internal or external source.

InstagramFeed

A gallery of all imported instagram posts.

Needs: https://www.gatsbyjs.org/packages/gatsby-source-instagram/

InstagramPost

Display an Instagram post.

Center

Centers anything inside of it to the horizontal center of the screen.

Column

Column to be placed in a <Columns /> element.

Columns

Display content next to each other.

Note:

If you need to use multiple elements within a column or want control over colors, you should use the <Column/> element to wrap a single column.

FloatingImage

Renders an image next to the given content.

The image will span from the edge of the screen to the content center.

The content will span from the content center to the edge of the content column.

The image might be cut off by default. You can change this with the fit attribute.

Gap

Creates a vertical gap between content.

Grid

Renders a grid with a dynamic number of columns.

The column width and count depends on a given minimum and maximum column width.

This is a powerful but complex Component. Usually <Columns /> should be the choice.

NarrowSection

Reduces the width of the content column to a given value. Centers the content by default.

Section

Sections are content seperators and serve multiple purposes:

  • Ensures the given content is rendered within the content column
  • Adds a gap between multiple sections
  • They can be colored and supports background images

Viewport

A viewport is always as big as the browser window of the user.

By default, given content will be centered vertically and horizontally.

Supports background images.

CTA

Renders a Link styled as a call to action button.

Link

Link either an internal or external page.

Title will be automatically set for internal pages

MediaGallery

Display (m)any different content types within a Gallery with full screen and multi touch support.

Current can display:

  • Images (<Image />)
  • Youtube Videos (<YoutubeVideo />)
  • Instagram Posts (<InstagramPost />)

Timeline

Creates a timeline element

TimelineEntry

Creates an entry for a <Timeline/> component.

Video

Renders an internal video. For external videos use <YoutubeVideo /> or similar.

Autoplay will enforce audio mute due to browser limitations.

YoutubeFeed

A gallery of all imported YouTube videos.

Needs: https://www.gatsbyjs.org/packages/gatsby-source-youtube/

YoutubeVideo

Renders a video from YouTube. For internal videos use <Video />.