Initial Screen

1.0.3

A Initial Screen é um padrão que ajuda os usuários a entender o que precisam fazer ou o que precisa acontecer para começar a usar um recurso ou serviço. Combina componentes-chave da interface do usuário, como chamadas para ação, imagens e texto informativo para orientar os usuários em direção a uma interação específica. É recomendado para integrar um novo produto ou serviço onde ainda não há informações e o usuário precisa executar uma ação ou simplesmente esperar que uma condição seja atendida.

Hero

Cards

Lista e imagem

Seções

import React from "react";
import { InitialScreen } from "@nimbus-ds/patterns";
import { BagIcon, FireIcon, TagIcon, TiendanubeIcon } from "@nimbus-ds/icons";
import { Button } from "@nimbus-ds/components";


const Example: React.FC = () => (
  <InitialScreen>
    <InitialScreen.Hero
      subtitle="META"
      title="¡Vendé más con Instagram y Facebook!"
      bullets={[
        <InitialScreen.Bullet
          icon={<FireIcon />}
          text="Integración gratis y rápida"
        />,
        <InitialScreen.Bullet
          icon={<BagIcon />}
          text="Sincronización de catálogo en tiempo real"
        />,
        <InitialScreen.Bullet
          icon={<TagIcon />}
          text="Creación y seguimiento de campañas"
        />,
        <InitialScreen.Bullet
          icon={<TiendanubeIcon />}
          text="Medición de conversiones con API y píxel de Meta"
        />,
      ]}
      actions={<Button appearance="primary">Conectar cuenta</Button>}
      image={
        <img
          src="/images/initial-screen.png"
          alt="Two people giving high five"
          width="100%"
        />
      }
    />
  </InitialScreen>
);

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/initial-screen

Props

Propriedades adicionais podem ser passadas para o componente <InitialScreen>. Consulte a documentação div para obter a lista de propriedades aceitas pelo componente <InitialScreen>.

InitialScreen

Name	Type	Default	Description
children*	React.ReactNode		Content of the InitialScreen component.

InitialScreen.Bullet

Name	Type	Default	Description
icon
text*	string

InitialScreen.Card

Name	Type	Default	Description
icon
title*	string
description*	string

InitialScreen.CardLayout

Name	Type	Default	Description
children

InitialScreen.Feature

Name	Type	Default	Description
content
image

InitialScreen.FeatureItem

Name	Type	Default	Description
title*	string
description*	string
children

InitialScreen.FeatureItemSpacing

Name	Type	Default	Description

InitialScreen.Hero

Name	Type	Default	Description
title	string
subtitle	string
actions
image
description
bullets

InitialScreen.Module

Name	Type	Default	Description
title*	string
description*	string

InitialScreen.Section

Name	Type	Default	Description
title*	string