Zero State

Zero State component outputs image, title, content and actions(only buttons).

Simple example

Create a zero state by passing in some text.

<template>
  <ci-zero-state>
    Send multiple emails to help nurture your audience and keep customers engaged.
  </ci-zero-state>
</template>

Titles

You can pass in a title via the title prop.

<template>
  <ci-zero-state title="No Email Blasts yet">
    Send multiple emails to help nurture your audience and keep customers engaged.
  </ci-zero-state>
</template>

Media

You can add media to your zero state with the img slot or prop.

<template>
  <ci-zero-state
    title="No Email Blasts yet"
    img="https://randomuser.me/api/portraits/men/85.jpg"
  >
    <img
      slot="img"
      src="https://randomuser.me/api/portraits/men/85.jpg"
    />
    Send multiple emails to help nurture your audience and keep customers engaged.
  </ci-zero-state>
</template>

Variant

Use variant prop to change the style.

<template>
  <DemoGrid>
    <ci-zero-state
      title="No Email Blasts yet"
      img="https://randomuser.me/api/portraits/men/85.jpg"
      variant="default"
    >
      Send multiple emails to help nurture your audience and keep customers engaged.
    </ci-zero-state>
        <ci-zero-state
      title="No Email Blasts yet"
      img="https://randomuser.me/api/portraits/men/85.jpg"
      variant="muted"
    >
      Send multiple emails to help nurture your audience and keep customers engaged.
    </ci-zero-state>
  </DemoGrid>
</template>

Actions

ZeroState has an actions slot which only accept CiButton components. The zero state will automatically stack them vertically and space them out.

<template>
  <ci-zero-state
    title="No Email Blasts yet"
    img="https://randomuser.me/api/portraits/men/85.jpg"
  >
    Send multiple emails to help nurture your audience and keep customers engaged.
    <template #actions>
      <ci-button status="primary">
        Create an email blast
      </ci-button>
      <ci-button>
        Learn More
      </ci-button>
    </template>
  </ci-zero-state>
</template>