ame-miniapp-components-web v0.11.0

Ame Mini-App Components Web

Tokens

Bordas

Alguns componentes experimentam o uso de bordas. Você poderá alterar propriedades básicas de borda como espessura ou cor.

borderWidth

Os valores abaixo indicam espessuras de borda, começando da mais fina para a mais grossa:

borderRadius

Abaixo os valores aceitos para arredondamento das bordas

borderColor

Veja aqui quais os tokens de corque você pode utilizar no borderColor

Cores

Os padrões de design estabelem que apenas as cores abaixo podem ser utilizadas. As cores são inseridas através dos tokens em componentes que possuem tais propriedades como: borderColor, color, backgroundColor e etc.

Primary

Secondary

Neutral

Feedback

Extras

Espaçamento

Em determinados momentos você precisará de uso de margem, para isso você poderá usar as propriedades descritas abaixo em componentes que aceitam todas ou algumas dessas propriedades.

Valores para propriedades de Margin e Padding

Flex

As propriedades abaixo afetam como os nós internos de um componente são ajustados ao seu conteúdo. São muito parecidas com as propriedades flex do CSS. Veja abaixo quais são:

Propriedades e Valores

Tipografia

Propriedades e Valores

Target

Opacidade

Em determinados momentos você pode sentir a necessidade de tornar um elemento um pouco translúcido.

Para isto você deve verificar se o componente presente aceita a propriedade opacity.

opacity

Sombras

Tokens e valores

Componentes Simples

Accordion

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente accordion para exibição de textos no estilo FAQ.

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Exemplo

Utilização

 state = {
    lorem: `Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Reprehenderit doloribus quis magni possimus! Architecto rem
    veritatis est quaerat, ab inventore quidem eaque maxime? Eius
    dolore quod totam vero mollitia saepe! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Ipsam ex itaque sint aliquid quae
    vel ea ratione dolores quia blanditiis dolor nihil, in hic
    praesentium temporibus? Iste porro distinctio nisi! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Fugit sed atque ab ex
    qui ea ullam nisi nemo magni ut maiores mollitia libero corrupti
    cupiditate unde dignissimos, est soluta nesciunt! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Quo, voluptate et
    dignissimos adipisci sit voluptas vero repellendus accusantium,
    nostrum voluptatum maiores totam quidem ipsum ipsam eius ad
    deserunt facere non!`,
  };
  render() {
    return (
      <View padding='nano'>
        <View direction='column' align='center'>
          <Text fontSize='medium' fontWeight='bold'>
            Componente{' '}
            <Text color='primary' fontSize='medium' fontWeight='bold'>
              Accordion
            </Text>
          </Text>
        </View>
        <Accordion>
          <AccordionItem title='Seguro Celular'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Seguro Casa'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Seguro Pet'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Novos Seguros'>
            <Accordion>
              <AccordionItem title='Seguro Celular'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
              <AccordionItem title='Seguro Casa'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
              <AccordionItem title='Seguro Pet'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
            </Accordion>
          </AccordionItem>
        </Accordion>
      </View>

Propriedades Accordion

Propriedades AccordionItem

Ads

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente Ads para renderização de anuncios.

Utilização

<Ads
  path='/12345678912/circulo_3'
  size={['fluid', [76, 76]]}
  id={'div-gpt-ad-1234567891234-0'}
/>

Propriedades

Animator

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Utilize este componente para exibir animações.

As animações são aceitas no formato JSON (Lottie).

Animações gratuitas podem ser encontradas no site LottieFiles.

Infelizmente, em alguns casos raros, as animações podem não ser renderizadas, isto se dá por falta de compatibilidade ou versão das bibliotecas utilizadas. Estamos investigado para que tudo seja renderizado com eficiência.

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Exemplo

Utilização

<Window>
  <Animator animationData={myAnimationJSON}/>
</Window>

Propriedades

Button

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Exibe um botão na tela. Nesta versão temos apenas um Componente Button para trabalhar.

Exemplo

Utilização

 <Window>
    <View direction='column' align='center'>
      <Text fontSize='medium' fontWeight='bold'>
        Componente Button
      </Text>

      <View>
        <View marginTop='nano' direction='column' align='center'>
          <Button
            display={false}
            dataCy='button-primary'
            onPress={() =>
              this.setState({ buttonPressText: 'Primary Normal Medium' })
            }
            label="Botão padrão"
            size="medium"
        />
        </View>
      </View>
    </View>
  </Window>

Propriedades

Exemplos

Abaixo, alguns tipos de botões:

  <Window>
        <View
          direction="column"
          align="center"
          justify="center"
          marginTop="large"
        >
          <View
            align="center"
            justify="center"
            width="780px"
            backgroundColor="neutral-300"
            padding="large"
            borderRadius="small"
            shadow="level-2"
            direction="column"
          >
            <Text fontSize="medium" textAlign="center">
              Exemplo do componente [b]Button[/b]
            </Text>
            <View
              margin="small"
              width="500px"
              direction="column"
              justify="center"
            >
              <Text fontSize="medium">[b]Primary:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button onClick={() => console.log("click")} label="Button" />
                <Button
                  onClick={() => console.log("click")}
                  label="Button"
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Secondary:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="secondary"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                />

                <Button
                  variant="secondary"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Global:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="global"
                  label="Button Global"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="global"
                  label="Button Global"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Text:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="text"
                  label="Button Text"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="text"
                  label="Button Text"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Danger:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="danger"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="danger"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
            </View>
          </View>
        </View>
      </Window>

Carousel

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente auxiliar para mostrar conteúdos dentro de um carrossel. Os conteúdos podem ser qualquer estrutura de componente (View, Banner, Card) propriedades.

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Exemplo

Utilização

Defina uma lista de componentes a serem exibidos, nesse caso colocamos o Text, mas você pode inserir qualquer componente.

<Carousel autoplay>
  <Text>Slide 1</Text>
  <Text>Slide 2</Text>
</Carousel>

Propriedades

Chart

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

O grupo de componentes Chart permitem exibir alguns tipos de dados plotados na tela.

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Chart.Bar

Utilizado para mostrar dados em um gráfico de barras.

Exemplo

Utilização

 state = {
       labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
       dataOptions:[
        {
            label:"Prata",
            data: [10, 20, 30, 40, 30, 15],
            color: '#c0c0c0',
          },
          {
            label:"Ouro",
            data: [90, 70, 30, 30, 40, 80],
            color :'#ffd700'
          },
       ],
    }
 <Chart.Bar
     data={this.state.dataOptions}
     labels={this.state.labels}
     title="Gráfico em Barra"
  />

Propriedades

Chart.Line

Utilizado para a exibição de dados em um gráfico de linhas.

Exemplo

Utilização

state= {
       labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
       dataOptions:[
        {
            label:"Prata",
            data: [7, 2, 6,10,100,4],
            lineColor: 'blue',
            color: 'blue'
          },
          {
            label:"Ouro",
            data: [10, 20, 10, 40,10,10],
            lineColor: 'orange',
            color: 'orange'
          },
       ],
      }
<Chart.Line
    data={this.state.dataOptions}
    labels={this.state.labels}
    title="Gráfico em Linha"
/>

Propriedades

Chart.Pie

Utilizado para mostrar dados em formato de gráfico de pizza.

Exemplo

Utilização

 state= {
       labels:['Javascript', 'Java', 'Typescript'],
       dataPieOptions:{
        label: 'Linguagens de programação',
        data: [120, 60, 80],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 162, 235)',
          'rgb(255, 206, 86)',
        ],
        borderColor: [
          '#444',
          '#444',
          '#444',
        ],
        borderWidth: 1,
      }
    }
<Chart.Pie
    data={this.state.dataPieOptions}
    labels={this.state.labels}
    title='Gráfico Pie'
/>

Propriedades

Checkbox

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Caixa de seleção que permite que o usuário selecione um ou mais itens de um conjunto.

Exemplo

Utilização

 state = {
    checked: false
  };

  <Checkbox
    dataCy='checkbox-test'
    id='3124129'
    value='teste'
    checked={this.state.checked}
    onChange={e => {
      this.setState({ checked: e.checked });
    }}
  >
    Seu texto
  </Checkbox>

Propriedades

Chip

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Exemplo

Utilização

 state = {
    data: [
      {
        id: 1,
        label: 'label 1',
        value: 'chip-7',
      },
      {
        id: 2,
        label: 'label 2',
        value: 'chip-8',
        icon: '',
      },
      {
        id: 3,
        label: 'label 3',
        value: 'chip-9',
        icon: '',
      },
    ],
  };

  <Window>
    <View>
      <Text textAlign='center' fontSize='lg'>
        Chip
      </Text>
    </View>
    <View padding='nano'>
      <View
        marginBottom='quark'
        flexWrap='wrap'
        padding='quark'
        backgroundColor='none'>
        <View margin='quark' width='auto'>
          <Chip
            value='chip-1'
            icon='feedback-success'
            label='Label'
            onChange={(e) => console.log(e)}
          />
        </View>
        <View margin='quark' width='auto'>
          <Chip label='Label' value='chip-2' />
        </View>
        <View margin='quark' width='auto'>
          <Chip label='Label' value='chip-3' />
        </View>
      </View>
      <View flexWrap='wrap' padding='quark' backgroundColor='secondary'>
        {this.state.data.map((item, index) => {
          return (
            <View key={index} margin='quark' width='auto'>
              <Chip
                icon={item.icon}
                label={item.label}
                value={item.value}
                index={index}
                data={this.state.data}
                onChange={(e) => console.log(e)}
                dataChange={(e) => this.setState({ data: e })}
              />
            </View>
          );
        })}
      </View>
    </View>
  </Window>

Propriedades

CurrencyInput

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Exibe uma entrada de valor monetário na tela.

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Exemplo

Utilização

<CurrencyInput
    maxLength={8}
    prefix={€}
    value={459}
    onChange={value => { ... }}
/>

Propriedades

DataTable

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Insere um datatable para exibição de dados

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Componente feito apartir de da biblioteca react-data-table-component.

Documentação da Biblioteca: https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--page

Exemplo

Utilização

<View>
  <DataTable
    title="Exemplo de DataTable"
    data={this.state.data}
    columns={this.state.columns}
  />
</View>

DatePicker

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente usado para seleção de data. Essa seleção pode ser aplicada por meio de um input de texto ou selecionando num calendário interativo.

Exemplo

Utilização

<DatePicker
    value={new Date()}
    onChange={e => this.onDateChange(e)}
    placeholder="Data de Nascimento"
    minDate={new Date(1930, 0, 1)}
    maxDate={new Date(2022, 11, 18)}
/>

Propriedades

Grid

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Utilize este componente em conjunto com o Col para organização de elementos.

Exemplo

Utilização

<View>
  <Grid>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="negative-300">
        <Text>Coluna 1</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: "hidden", lg: 3 }}>
      <View backgroundColor="positive-300">
        <Text>Coluna 2</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="warning-700">
        <Text>Coluna 3</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="support-01">
        <Text>Coluna 4</Text>
      </View>
    </Col>
  </Grid>
</View>

Como visto do exemplo acima, o componente Col, é usado como children do componente Grid para determinar cada coluna do grid.

Propriedades

Propriedades Col

Hint

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente para exibir alertas em formulários

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Exemplo

Utilização

  <Hint
    status='success'
    text='Retorno de sucesso'
    show={true}
  />

Propriedades

Icon

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente que exibe um Ícone.

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade ou até deixar de existir.

Exemplo

Utilização

<Icon icon="ame-outline"/>
<Icon icon="ame-outline"/>

Propriedades

Segue abaixo a lista de ícones:

• accounts-outline
• accounts-solid
• adress-outline
• adress-solid
• agenda-outline
• agenda-solid
• alert-outline
• alert-solid
• ame-banking
• ame-outline
• ame-solid
• attach
• bank-outline
• bank-solid
• bar-code
• barbecue-outline
• barbecue-solid
• bell-notification-outline
• bell-notification-solid
• bestcb
• best-deals-outline
• bikeitau
• bus-outline
• bus-solid
• cabify
• caixa
• calendar-outline
• calendar-solid
• camera-outline
• camera-solid
• card-ame-outline
• card-ame-solid
• carimbo
• cart-outline
• cart-solid
• cashback
• cat
• chat-mail-outline
• chat-mail-solid
• chat-message-outline
• chat-message-solid
• chat-sms-outline
• chat-sms-solid
• chat-whatsapp-outline
• chat-whatsapp-solid
• cinema-outline
• cinema-solid
• clock-outline
• clock-solid
• close
• clothing-tshirt-outline
• clothing-tshirt-solid
• colapse
• configuration-outline
• configuration-solid
• conversion
• copy-outline
• copy-solid
• cracha
• credit-card-ame
• credit-card-outline
• credit-card-solid
• cupom-outline
• cupom-solid
• curiosities-outline
• curiosities-solid
• dashboard-outline
• dashboard-solid
• delivery-outline
• delivery-solid
• deposit-outline
• deposit-solid
• deslike-no-outline
• deslike-no-solid
• details
• diarista-outline
• diarista-solid
• divide
• documents-cpf
• documents-id-outline
• documents-id-solid
• donation-art
• donation-autonomous
• donation-communities
• donation-coronavirus
• donation-environement
• donation-fomezero
• donation-girlpower
• donation-healthcare
• donation-kids
• donation-planet
• donation-rainbow
• donation-sambarj
• donation-sambasalvador
• donation-sambasp
• donation-seniors
• donations-education
• donations
• down
• drconsulta
• edit-outline
• edit-solid
• electrician
• emprestimo-loan-outline
• emprestimo-loan-solid
• emprestimopj-loan
• ensure
• equal
• events-outline
• events-solid
• expand
• extended-warranty
• extrato-outline
• extrato-solid
• eye-hide
• eye-show
• faces-et-outline
• faces-happy-outline
• faces-happy-solid
• faces-medium
• faces-normal-outline
• faces-normal-solid
• faces-sad-outline
• faces-sad-solid
• faces-veryhappy
• fav-outline
• fav-solid
• feature-bazar-outline
• feature-bazar-solid
• feature-br-petrobras
• feature-news
• feature-scanandgo
• feature-shell-box
• feature-taggy
• feature-voucher-future
• feedback-error
• feedback-success
• filter-outline
• filter-solid
• fire
• flash-active
• flash-disabled
• food-convenience
• gamerzone
• games-outline
• games-solid
• general-services-outline
• general-services-solid
• ghost
• gift-card-outline
• gift-card-solid
• gift-outline
• gift-solid
• glutenfree
• gym-outline
• gym-solid
• hand-easy
• hands
• handshake
• health-outline
• health-solid
• heart-outline
• heart-solid
• help-outline
• help-solid
• home-outline
• home-solid
• house-outline
• house-solid
• image-album-outline
• image-album-solid
• image-outline
• image-solid
• incoming
• insurances
• investments
• keyboard-numbers-outline
• keyboard-numbers-solid
• lamp-outline
• lamp-solid
• lavanderia
• lazer-recreation-outline
• lazer-recreation-solid
• left-previous
• like-ok-outline
• like-ok-solid
• limit
• list-items-outline
• list-items-solid
• loan-consignado
• location-outline
• (..