CTAs

App download call to action

An inset card with the phone beside the copy and the two store buttons, for the bottom of a mobile product page.

8 components44 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

Button Container Grid Heading Image Section Stack Text

Imports

import { Button, Container, Grid, Heading, Image, Section, Stack, Text } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import {
  Button,
  Container,
  Grid,
  Heading,
  Image,
  Section,
  Stack,
  Text,
} from '@the_viveksingh/vivek-ui'

export default function CtaAppDownload() {
  return (
    <Section>
      <Container>
        <Grid
          cols={{ base: 1, md: 2 }}
          gap={6}
          style={{
            alignItems: 'center',
            padding: '2rem',
            borderRadius: 'var(--vk-radius-lg)',
            background: 'var(--vk-color-surface)',
            border: '1px solid var(--vk-color-border)',
          }}
        >
          <Stack gap={4}>
            <Heading level={2} size="lg">
              Take it with you
            </Heading>
            <Text tone="muted">
              Everything on the web app, offline on your phone, synced the moment you are back.
            </Text>
            <Stack direction="horizontal" gap={3} wrap>
              <Button variant="outline">App Store</Button>
              <Button variant="outline">Google Play</Button>
            </Stack>
          </Stack>
          <Image src="/demo/vk-app.svg" alt="The app on a phone" ratio={9 / 7} rounded="md" />
        </Grid>
      </Container>
    </Section>
  )
}

← All 62 blocks