Card

Basic Card

import {
  Card,
  Grid,
  BlockStack,
  Heading,
  Text,
  TextBlock,
  View,
  Icon,
  InlineLayout,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension(
  'customer-account.page.render',
  () => <App />,
);

function App() {
  return (
    <Card padding>
      <Grid
        columns={['fill', 'auto']}
        spacing="base"
        minInlineSize="fill"
        blockAlignment="start"
      >
        <BlockStack spacing="loose">
          <Heading>Addresses</Heading>
          <BlockStack spacing="base">
            <Text appearance="subdued">
              Default address
            </Text>
            <BlockStack spacing="extraTight">
              <TextBlock>
                Kristin Watson
              </TextBlock>
              <TextBlock>
                1655 Island Pkwy
              </TextBlock>
              <TextBlock>
                Kamloops BC M7G 672
              </TextBlock>
              <TextBlock>Canada</TextBlock>
            </BlockStack>
          </BlockStack>
        </BlockStack>
        <BlockStack spacing="loose">
          <InlineLayout blockAlignment="center">
            <Icon
              source="plus"
              size="small"
              appearance="accent"
            />
            <Text appearance="accent">Add</Text>
          </InlineLayout>
          <View inlineAlignment="end">
            <Icon
              source="pen"
              size="small"
              appearance="accent"
            />
          </View>
        </BlockStack>
      </Grid>
    </Card>
  );
}

import {
  Card,
  Grid,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.page.render',
  (root, api) => {
    renderApp(root, api);
  },
)

function renderApp(root, api) {
  const card = root.createComponent(
    Card,
    {padding: true},
    [
      root.createComponent(Grid, {columns: ['1fr', 'auto'],
        spacing: "base",
        minInlineSize: "fill",
        blockAlignment: "start"}, [
        root.createComponent('BlockStack', {spacing: 'loose'}, [
          root.createComponent('Heading', undefined, 'Addresses'),
          root.createComponent('BlockStack', {spacing: 'base'}, [
            root.createComponent('Text', {appearance: "subdued"}, 'Default address'),
            root.createComponent('BlockStack', {spacing: 'extraTight'}, [
                root.createComponent('TextBlock',{}, 'Kristin Watson'),
                root.createComponent('TextBlock', {}, '1655 Island Pkwy'),
                root.createComponent('TextBlock', {}, 'Kamloops BC M7G 672'),
                root.createComponent('TextBlock', {}, 'Canada'),
            ]),
          ]),
        ]),
        root.createComponent('BlockStack', {spacing: 'loose'}, [
          root.createComponent('InlineLayout',  {blockAlignment: "center"}, [
            root.createComponent('Icon', {source: "plus", size: "small", appearance: "accent"}),
            root.createComponent('Text', {appearance: "accent"}, 'Add'),
          ]),
          root.createComponent('View', {inlineAlignment: "end"}, [
            root.createComponent('Icon', {source: "pen", size: "small", appearance: "accent"}),
          ]),
        ]),
      ]),
    ])
  root.append(card);
}