Anchor

import { Anchor, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Anchor href="#">Camara Link</Anchor>
  </BrowserWindow>
);

import { Anchor, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Anchor href="#" variant="primary">
      Camara Link
    </Anchor>{' '}
    <Anchor href="#" variant="secondary">
      Camara Link
    </Anchor>
  </BrowserWindow>
);

import { Anchor, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Anchor href="#" underline={false} external>
      Camara Link
    </Anchor>
  </BrowserWindow>
);

import { Anchor, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Anchor href="#" external>
      Camara Link
    </Anchor>
  </BrowserWindow>
);

import { Anchor, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Anchor href="#">
      Buttons are user interface elements that initiates actions. This is their
      primary function and it is this function that makes them very different
      from links particularly on the web.
    </Anchor>
  </BrowserWindow>
);

import { Anchor, Box, BrowserWindow, Heading, Text } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading>Security</Heading>
      <Text>For an external link we add `rel='noopener noreferrer'`</Text>
      <Text>
        This{' '}
        <Anchor href="#" external>
          external link
        </Anchor>{' '}
        has added security related tags in it
      </Text>
    </Box>
  </BrowserWindow>
);

import { Anchor, Box, BrowserWindow, Heading, Text } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Anchor underline={false} href="#">
        <Heading level={2}>Omakase - Wikipedia</Heading>
      </Anchor>
      <Text>
        Omakase (Japanese: お任せ, Hepburn: o-makase) is a Japanese phrase, used
        when ordering sushi in restaurants, that means 'I'll leave it up to you'
        (from Japanese 'to entrust' (任せる, makaseru)).
      </Text>

      <Text>
        <Anchor underline={false} href="#">
          Usage
        </Anchor>{' '}
        ·{' '}
        <Anchor underline={false} href="#">
          Characteristics
        </Anchor>
      </Text>
    </Box>
  </BrowserWindow>
);

import {
  Anchor,
  Box,
  BrowserWindow,
  Card,
  Flex,
  Heading,
  Image,
  Text,
} from 'camara';

render(
  <BrowserWindow docs>
    <Box width="75%">
      <Card round elevate>
        <Anchor href="#" underline={false}>
          <Heading level={3}>Lemons: Health Benefits & Nutrition Facts</Heading>
        </Anchor>
        <Flex justifyContent="space-between">
          <Box width="72%">
            <Text size="small">
              Lemons contain a high amount of vitamin C, soluble fiber, and
              plant compounds that give them a number of health bene...
            </Text>
          </Box>
          <Box width="22%">
            <Image
              src="https://res.cloudinary.com/beaniegram/image/upload/v1624339059/lemon.jpg"
              alt="sliced lemon fruit with squeezed juice in glass cup"
              fit="cover"
              width="100%"
              height="100%"
              style={{ borderRadius: '0.5rem' }}
            />
          </Box>
        </Flex>
      </Card>
    </Box>
  </BrowserWindow>
);