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

# Chronosphere documentation

export const CustomCard = ({title, titleBackgroundColor, titleTextColor, href, icon, children}) => {
  const renderIcon = () => {
    if (!icon) return null;
    if (typeof icon === "string") {
      return <Icon color="#fff" icon={icon} size={24} />;
    }
    return icon;
  };
  const cardContent = <div className={`rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm hover:border-gray-300 dark:hover:border-gray-500 hover:shadow-md transition-shadow not-prose ${children ? "h-full mint-flex mint-flex-col" : ""}`}>
      <div className="flex items-center gap-3 px-6 py-4" style={{
    backgroundColor: titleBackgroundColor || "#28a561",
    color: titleTextColor || "#FFFFFF"
  }}>
        {icon && <div className="flex-shrink-0 my-0">{renderIcon()}</div>}
        <h3 className="text-xl font-semibold my-0 text-white">{title}</h3>
      </div>
      {children && <div className="text-[#3f4341] dark:text-[#9fa3a1] font-normal px-6 py-4 space-y-3 flex-1">{children}</div>}
    </div>;
  if (href) {
    return <a href={href} className="custom_card block no-underline hover:no-underline border-b-0 !mb-4 h-full not-prose">
        {cardContent}
      </a>;
  }
  return cardContent;
};

Select your Chronosphere product to view its product documentation.

<Columns cols={1}>
  <CustomCard
    title="Chronosphere Observability Platform"
    titleBackgroundColor="#28a561"
    titleTextColor="#FFFFFF"
    href="/overview"
    icon={<img
src="/public/doc-assets/chronosphere_logo_icon.png"
alt="Chronosphere logo"
width="30"
height="80"
/>}
  >
    A SaaS-based observability and monitoring platform made for cloud-native
    infrastructures.

    <br />

    Monitor telemetry data across your entire system to identify and solve issues.

    <br />

    Minimize impact and downtime for your app and your users while controlling what
    data you pay for.
  </CustomCard>

  <CustomCard
    title="Chronosphere Telemetry Pipeline"
    titleBackgroundColor="#705DA0"
    titleTextColor="#FFFFFF"
    href="/pipeline"
    icon={<img
src="/public/doc-assets/pipeline_logo_icon.png"
alt="Chronosphere logo"
width="30"
height="80"
/>}
  >
    An observability pipeline platform for routing and processing telemetry data.

    <br />

    Integrate with your existing observability tools to send logs, metrics, and
    traces from any source to any destination.

    <br />

    Connect to these sources and destinations through a variety of built-in
    integration plugins.
  </CustomCard>
</Columns>