Returnless UI

Integration connection ​

The integration connection component is used to display a connection to an external service or platform. It is often used in marketing pages to highlight the key features of an integration.

Usage ​

Returnless
Adobe Commerce

Connect to Adobe Commerce

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, pariatur.

  • Retrieve order and product data

  • Create coupons and manage credit

  • Create external returns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis delectus eos exercitationem facere magni quam quasi ratione repellat ullam.

js
<script lang="ts" setup>
import {
  Separator,
  Card,
  CardSection,
  CardHeader,
  CardTitle,
  CardDescription,
  IntegrationConnection,
  Heading,
  FeatureList,
  FeatureListItem,
} from '@returnless/focus-ui';
</script>

<template>
  <Card style="width: 400px;">
    <CardSection>
      <IntegrationConnection />
    </CardSection>
    <CardHeader>
      <CardTitle>
        Connect to Adobe Commerce
      </CardTitle>
      <CardDescription>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, pariatur.</CardDescription>
    </CardHeader>
    <Separator></Separator>
    <CardSection>
      <FeatureList>
        <FeatureListItem>Retrieve order and product data</FeatureListItem>
        <FeatureListItem>Create coupons and manage credit</FeatureListItem>
        <FeatureListItem>Create external returns</FeatureListItem>
      </FeatureList>
    </CardSection>
    <CardSection>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus debitis delectus eos exercitationem facere magni quam quasi ratione repellat ullam.</p>
    </CardSection>
  </Card>
</template>