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

# What is Anchorage Digital?

> Anchorage Digital institutional digital asset platform.

export const AnnotatedImage = ({src, alt = "", annotations = [], width, style = {}}) => {
  const [active, setActive] = useState(null);
  const containerStyle = {
    position: "relative",
    display: "block",
    width: width ?? "100%",
    ...style
  };
  const imgStyle = {
    display: "block",
    width: "100%",
    height: "auto",
    borderRadius: "8px"
  };
  return <div style={containerStyle}>
      <img src={src} alt={alt} style={imgStyle} />

      {annotations.map((ann, i) => {
    const isActive = active === i;
    const color = ann.color ?? "#e53e3e";
    const rectStyle = {
      position: "absolute",
      left: ann.x + "%",
      top: ann.y + "%",
      width: ann.width + "%",
      height: ann.height + "%",
      border: "2px solid " + color,
      background: isActive ? color + "26" : color + "12",
      boxShadow: isActive ? "0 0 0 1px " + color + "59, inset 0 0 0 1px " + color + "33" : "none",
      borderRadius: "3px",
      cursor: "default",
      transition: "background 120ms ease, box-shadow 120ms ease",
      zIndex: isActive ? 100 : 10,
      boxSizing: "border-box"
    };
    const flipAbove = ann.y + ann.height > 60;
    const flipLeft = ann.x > 50;
    const bubbleStyle = {
      position: "absolute",
      ...flipAbove ? {
        bottom: "calc(100% + 8px)"
      } : {
        top: "calc(100% + 8px)"
      },
      ...flipLeft ? {
        right: 0
      } : {
        left: 0
      },
      minWidth: "180px",
      maxWidth: "260px",
      padding: "10px 13px",
      background: "var(--background, #fff)",
      border: "1px solid var(--ad-border, #e4e5e7)",
      borderRadius: "10px",
      boxShadow: "0 8px 24px rgba(20,20,21,0.12)",
      pointerEvents: "none",
      zIndex: 9999,
      opacity: isActive ? 1 : 0,
      transition: "opacity 120ms ease",
      whiteSpace: "normal"
    };
    return <div key={i} style={rectStyle} onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(null)}>
            <div style={bubbleStyle} role="tooltip">
              {ann.label && <div style={{
      fontSize: "13px",
      fontWeight: 700,
      marginBottom: ann.description ? "4px" : 0,
      color
    }}>
                  {ann.label}
                </div>}
              {ann.description && <div style={{
      fontSize: "12.5px",
      lineHeight: 1.45,
      opacity: 0.7
    }}>
                  {ann.description}
                </div>}
            </div>
          </div>;
  })}
    </div>;
};

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/a2epHy5Yvt4" title="Anchorage Digital" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

## Platform pillars

<CardGroup cols={2}>
  <Card title="Custody" icon="shield-halved">
    The ultimate combination of security and accessibility.
  </Card>

  <Card title="Trading" icon="chart-line">
    Obtain superior execution trading 24/7/365 with access to multiple liquidity sources.
  </Card>

  <Card title="Staking and governance" icon="coins">
    Safely collect rewards and participate in on-chain community governance.
  </Card>

  <Card title="Settlement" icon="handshake" href="/knowledge-base/platform/users/atlas-network">
    Settle trades and transfers with counterparties directly from custody using Atlas — no pre-funding an exchange, no moving assets out to settle.
  </Card>
</CardGroup>