1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<N
  border="both"
  contentWidth="w-full lg:w-1/2"
  description="Passing border='both' will show a top and bottom border. Content for right side is passed in as a child."
  title="Example Card Border Both"
>
  <div className="flex gap-2 items-center justify-center w-full">
    <Input
      className="w-full"
      placeholder="API name"
      value="My-API"
    />
    <Button size="lg">
      Save
    </Button>
  </div>
</N>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div>
  <N
    border="top"
    contentWidth="w-full lg:w-1/2"
    description="Passing border='top' will only show a top border."
    title="Example Top Card Border"
  >
    <div className="flex gap-2 items-center justify-center w-full">
      <Input
        className="w-full"
        placeholder="size"
        type="number"
        value="16"
      />
      <Button size="lg">
        Save
      </Button>
    </div>
  </N>
  <N
    border="bottom"
    contentWidth="w-full lg:w-1/2"
    description="Passing border='bottom' will only show a bottom border."
    title="Example Card Bottom Border"
  >
    <Input
      defaultValue="Key_1234567890"
      disabled
      readOnly
      rightIcon={<button type="button"><c size="sm-regular" /></button>}
    />
  </N>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<div>
  <N
    border="top"
    className="border-b"
    contentWidth="w-full lg:w-1/2"
    description="Passing border='top' will only show a top border."
    title="Example Top Card Border"
  >
    <div className="flex gap-2 items-center justify-center w-full">
      <Input
        className="w-full"
        placeholder="size"
        type="number"
        value="16"
      />
      <Button size="lg">
        Save
      </Button>
    </div>
  </N>
  <N
    border="bottom"
    contentWidth="w-full lg:w-1/2"
    description="Passing border='bottom' will only show a bottom border."
    title="Example Card Bottom Border"
  >
    <Input
      defaultValue="Key_1234567890"
      disabled
      readOnly
      rightIcon={<button type="button"><c size="sm-regular" /></button>}
    />
  </N>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div>
  <N
    contentWidth="w-full lg:w-1/2"
    description="Not passing in border prop will default to rounded corners."
    title="Square corncers Example"
  >
    <div className="flex gap-2 items-center justify-center w-full">
      <Input
        className="w-full"
        placeholder="size"
        type="number"
        value="44"
      />
      <Button size="lg">
        Save
      </Button>
    </div>
  </N>
</div>