> ## Documentation Index
> Fetch the complete documentation index at: https://nexusgamesinc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Layout

> Lorem ipsum

export const InlineIcon = ({name, alt}) => <img src={`/images/icons/${name}.svg`} alt={alt || name} style={{
  display: "inline-block",
  verticalAlign: "middle",
  width: "24px",
  height: "24px",
  lineHeight: "1em"
}} />;

Nullshapers cards have different parts that let you know different things about the card.
The parts of any given card varies a bit.
All cards have a name, cost, art, type, grade, and anomaly mode.
Agents, software, hardware, and anomalies are collectively referred to as constants.
Agents also have attack and defense *(collectively referred to as stats)*.

<Frame>
  <img src="https://mintcdn.com/nexusgamesinc/OlZ724LroJoPKARz/images/download/tabletop-simulator.png?fit=max&auto=format&n=OlZ724LroJoPKARz&q=85&s=eba5d8fe65a3bce41244c976360bdfba" width="964" height="585" data-path="images/download/tabletop-simulator.png" />
</Frame>

<br />

<Card
  title="Speed"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Cost"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Name"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Types"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Sub-types"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Artwork"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum

  {" "}

  <Warning>
    Disclaimer: Nullshapers uses AI art, generated with OpenAI's DALL-E 3 model, to help
    players make good looking cards with consistently high quality.
  </Warning>
</Card>

<Card
  title="Text"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Lore text"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Reach"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Attack"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Defense"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Grade"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>

<Card
  title="Creator"
  icon={
<img
src="/images/icons/dark.svg"
alt="Alt text"
width="24"
height="24"
/>
}
>
  Lorem ipsum
</Card>