Activating the dialog

The Feedback button only becomes visible once you’ve supplied an onSubmit handler. To do that, we’ll need to shadow the FeedbackDialog component.

1. Create a new javascript file under src/gatsby-theme-carbon/components/FeedbackDialog/FeedbackDialog.js. Matching the filepath exactly is important here.

2. Copy the following snippet into your new file

import React from "react";
import ThemeFeedbackDialog from "gatsby-theme-carbon/src/components/FeedbackDialog/FeedbackDialog";

const FeedbackDialog = ({ props }) => {
  const onSubmit = (data) => {
    console.log({ ...data });
  };

  return <ThemeFeedbackDialog {...props} onSubmit={onSubmit} />;
};

export default FeedbackDialog;

Creating a handler

Next, you’ll need a place to send the data. For the Carbon website, we use a serverless function that forwards the data to a SurveyGizmo quiz. You can see that function here.

The handler can send a fetch request off to the endpoint you create. Update the onSubmit handler to send the data wherever you want. This function receives the following arguments:

• experience: “Negative”, “Positive” or “Neutral”
• comment: An optional comment
• path: the window location when the survey was submitted

const FeedbackDialog = ({ props }) => {
  const onSubmit = data => {
    fetch(process.env.API_ENDPOINT, {
      method: 'POST',
      body: JSON.stringify(data),
  });

  return <ThemeFeedbackDialog {...props} onSubmit={onSubmit} />;
};

GifPlayer

Light

Dark

Code

Place two images inside of the GifPlayer component. The first image will be used as the gif, the second image will be used as the static image on pause. Only provide two images inside the component, do not place any other children inside the component.

<Column colLg='4'>
<GifPlayer>


![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.gif) // must be gif

![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.jpg) // must be static
image

</GifPlayer>
</Column>

<Column colLg='8'>
<GifPlayer color='dark'>


![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.gif) //
must be gif

![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.jpg) //must
be static image

</GifPlayer>
</Column>

Row

The <Row> component is a wrapper that adds the bx--row class to a wrapper div. You will want to use this to define rows that you will place <Column> components inside of.

Code

<Row>
  <Column>
    Content or additional <Components />
  </Column>
</Row>

Column

The <Column> component is used to define column widths for your content, you can set the rules at different breakpoints with the props.

Example

Code

<Row>
  <Column colMd={4} colLg={4}>


![Grid Example](images/Article_05.jpg)

  </Column>
  <Column colMd={4} colLg={4}>


![Grid Example](images/Article_05.jpg)

  </Column>
  <Column colMd={4} colLg={4}>


![Grid Example](images/Article_05.jpg)

  </Column>
</Row>

<Row>
  <Column colMd={4} colLg={4} noGutterMdLeft>


![Grid Example](images/Article_05.jpg)

  </Column>
  <Column colMd={4} colLg={4} noGutterMdLeft>


![Grid Example](images/Article_05.jpg)

  </Column>
  <Column colMd={4} colLg={4} noGutterMdLeft>


![Grid Example](images/Article_05.jpg)

  </Column>
</Row>

<Row>
  <Column colMd={4} colLg={4} noGutterSm>


![Grid Example](images/Article_05.jpg)

  </Column>
  <Column colMd={4} colLg={4} noGutterSm>


![Grid Example](images/Article_05.jpg)

  </Column>
  <Column colMd={4} colLg={4} noGutterSm>


![Grid Example](images/Article_05.jpg)

  </Column>
</Row>

<Row>
  <Column colMd={4} colLg={4} offsetLg={4}>


![Grid Example](images/Article_05.jpg)

  </Column>
  <Column colMd={4} colLg={4}>


![Grid Example](images/Article_05.jpg)

  </Column>
</Row>

ImageCard

Code

<Row className="image-card-group">
  <Column colMd={4} colLg={4} noGutterSm>
    <ImageCard title="Title" subTitle="Subtitle" href="/">
      
![Square](/images/square.jpg)


    </ImageCard>
    <ImageCard
      title="Dark title"
      titleColor="dark"
      aspectRatio="1:1"
      href="/"
      actionIcon="arrowRight"
      subTitleColor="dark"
      subTitle="Dark subtitle">

![Light dark](./images/light-dark.jpg)

    </ImageCard>

  </Column>
  <Column colMd={4} colLg={4} noGutterSm>
    <ImageCard
      title="Title"
      subTitle="Subtitle"
      aspectRatio="1:2"
      href="/"
      actionIcon="download"
      titleColor="light"
      subTitleColor="light">
      
![Plane image](./images/plane.jpg)


    </ImageCard>

  </Column>
  <Column colMd={4} colLg={4} noGutterSm>
    <ImageCard aspectRatio="1:1" href="/" hoverColor="dark">
      
![color pallete array](/images/color-grid.svg)


    </ImageCard>
    <ImageCard disabled aspectRatio="1:1" href="/">

![Square](/images/square.jpg)

    </ImageCard>

  </Column>
</Row>

ImageGallery

Click on an image to open the gallery.

Code

You can use the ImageGallery component in markdown by nesting your images inside the ImageGallery component and using the ImageGalleryImage component to define the image’s location, title, alt tag, and the columns the image on the page will span at the medium and large breakpoints. There is no gallery view for mobile so the small breakpoint is not defined.

Here’s an example of how to use the ImageGallery and the ImageGalleryImage components in markdown.

<ImageGallery>
<ImageGalleryImage alt="IBM Design" title="IBM Design" col={4}>


![IBM Design](/images/IBM_Design_landing.jpg)

</ImageGalleryImage>


<ImageGalleryImage  alt="IBM Cloud Logo" title="IBM Cloud" col={4}>


![IBM Cloud Logo](/images/IBM_Cloud_Logo.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Developers" title="IBM Cloud Developers" col={4}>


![IBM Cloud Developers](/images/IBM_Cloud_Developers.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Data Center" title="IBM Cloud Data Center" col={8}>


![IBM Cloud Data Center](/images/IBM_Cloud_Data_Center.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Interconnect" title="IBM Cloud Interconnect" col={4}>


![IBM Cloud Interconnect](/images/IBM_Cloud_Interconnect.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Notebook" title="IBM Cloud Notebook" col={4}>


![IBM Cloud Notebook](/images/IBM_Cloud_Notebook.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Platform Prototype" title="IBM Cloud Platform" col={8}>


![IBM Cloud Platform Prototype](/images/IBM_Cloud_Platform_Prototype.gif)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Pictograms" title="IBM Cloud Pictograms" col={4}>


![IBM Cloud Pictograms](/images/IBM_Cloud_Pictograms.gif)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Server" title="IBM Cloud Server" col={4}>


![IBM Cloud Server](/images/IBM_Cloud_Server.jpg)

</ImageGalleryImage>
<ImageGalleryImage alt="IBM Cloud Think" title="IBM Cloud Think" col={4}>


![IBM Cloud Think](/images/IBM_Cloud_Think_Keynote.jpg)

</ImageGalleryImage>
</ImageGallery>

InlineNotification

Code

// Info

<InlineNotification>


**Lorem ipsum:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
non vel quam.

</InlineNotification>


// Error

<InlineNotification kind="error">


**Error:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
non vel quam.

</InlineNotification>


// Success

<InlineNotification kind="success">


**Success:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
non vel quam.

</InlineNotification>


// Warning

<InlineNotification kind="warning">


**Warning:** dolor sit amet,
[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
non vel quam.

</InlineNotification>

MiniCard

{” “}

When you have the mini resource card sitting aside the main content, be sure to add the gutterLg, properties to the <MiniCard>. This will ensure the MiniCard has the appropriate gutters at the approriate breakpoints.

Code

<CardGroup>
  <MiniCard title="26 characters per MiniCard" href="/demo">
    ![Github icon](/images/github-icon.png)
  </MiniCard>
  <MiniCard title="Use the default icon" href="/demo" />
  <MiniCard
    title="Choose from other icons"
    href="/demo"
    actionIcon="arrowRight"
  />
  <MiniCard title="Or bring your own" href="/demo">
    ![Github icon](/images/sketch-icon.png)
  </MiniCard>
</CardGroup>

<Row>
<Column colLg={8}>


When you have the mini resource card sitting aside the main content, be sure to
add the `gutterLg`, properties to the `<MiniCard>`. This will ensure the
MiniCard has the appropriate gutters at the approriate breakpoints.

</Column>
<MiniCard
  gutterLg
  title="By itself, as an Aside"
  href="https://gatsby-theme-carbon.now.sh"
  >


![Sketch icon](/images/sketch-icon.png)

</MiniCard>
</Row>

ResourceCard

Code

<Row className="resource-card-group">
  <Column colMd={4} colLg={4} noGutterSm>
    <ResourceCard
      subTitle="Carbon Design System"
      href="https://www.carbondesignsystem.com">


![Github icon](/images/github-icon.png)

    </ResourceCard>

  </Column>
  <Column colMd={4} colLg={4} noGutterSm>
    <ResourceCard
      subTitle="Carbon Design System"
      href="https://www.carbondesignsystem.com">


![Github icon](/images/github-icon.png)

    </ResourceCard>

  </Column>
</Row>

<Column colMd={4} colLg={4} noGutterSm>
  <ResourceCard
    subTitle="With subtitle"
    title="Title"
    aspectRatio="2:1"
    actionIcon="arrowRight"
    href="https://gatsby-theme-carbon.now.sh">


![Github icon](/images/github-icon.png)

  </ResourceCard>
</Column>

<Column colMd={4} colLg={4} noGutterSm>
  <ResourceCard
    subTitle="Only subtitle"
    actionIcon="download"
    aspectRatio="2:1"
    href="https://gatsby-theme-carbon.now.sh">


![Github icon](/images/github-icon.png)

  </ResourceCard>
</Column>

<Column colMd={4} colLg={4} noGutterSm>
  <ResourceCard
    subTitle="Alternate color"
    title="Dark"
    aspectRatio="2:1"
    color="dark"
    actionIcon="email"
    href="https://gatsby-theme-carbon.now.sh">


![Sketch icon](/images/sketch-icon.png)

  </ResourceCard>
</Column>

<Column colMd={4} colLg={4} noGutterSm>
  <ResourceCard
    title="Disabled card"
    aspectRatio="2:1"
    disabled
    href="https://gatsby-theme-carbon.now.sh"
  />
</Column>

Tabs

The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you’ll need to use our Row and Column helpers as demonstrated in the “Two images” tab.

If your content is full width, you don’t need Row and Column

Column one

Column two

Code

// Start with the wrapper component (Tabs)

<Tabs>


<Tab label="Text">


The tab component can be used for a variety of content. From text, to images, to
columns. If you want to have multiple columns, you’ll need to use our `Row` and
`Column` helpers as demonstrated in the "Two images" tab.

</Tab>

<Tab label="Single image">
  If your content is full width, you don’t need `Row` and `Column` ![color
  array](images/colors.jpg)
</Tab>

<Tab label="Two images">


<Row>
<Column colSm={6} colLg={6}>


Column one

![color array](images/colors.jpg)

</Column>
<Column colSm={6} colLg={6}>


Column two

![color array](images/colors.jpg)

</Column>
</Row>


</Tab>


// Make sure you close the wrapper component

</Tabs>