<>
  <Timeline title="Timeline Future" variant="future" subTitle="Second line">
    <LightText>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </LightText>
  </Timeline>
  <Timeline title="Timeline Done" variant="done">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </Timeline>
  <Timeline title="Timeline Active" variant="active">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </Timeline>
  <Timeline title="Timeline Warning" variant="warning">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </Timeline>
  <Timeline title="Timeline Error" variant="error">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </Timeline>
  <Timeline title="Timeline Past" variant="past">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </Timeline>
  <Timeline title="Timeline Problem" variant="problem">
    <p>
      This is where you can add a description of the timeline step. It can also
      be a component with design that satisfies your use case.
    </p>
    <Button variant="primary">Click me</Button>
  </Timeline>
</>;