Section

<HvSection
  actions={<HvButton variant="primarySubtle">Explore Insights</HvButton>}
  title={
    <div className="flex gap-xs items-center">
      <HvStatusIcon
        variant="default"
        customIcon={<div className="i-ph-tree-structure" />}
      />
      <HvTypography variant="title4">
        Unlock the Power of Your Data
      </HvTypography>
    </div>
  }
>
  <HvTypography>
    Discover actionable insights hidden within your data. With our advanced
    tools and intuitive dashboards, transform raw numbers into meaningful
    strategies that drive success.
  </HvTypography>
</HvSection>

import { useState } from "react";


export default function Demo() {
  const [expanded, setExpanded] = useState(false);


  return (
    <div className="grid gap-sm w-full">
      <HvButton className="w-1/4" onClick={() => setExpanded((p) => !p)}>
        Expand
      </HvButton>
      <HvSection
        title="Controlled section"
        expandable
        expandableHeader
        expanded={expanded}
        onToggle={() => setExpanded((p) => !p)}
      >
        <HvTypography>
          This section is controlled by the state of the parent component.
        </HvTypography>
      </HvSection>
    </div>
  );
}

<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
  <HvSection
    title={
      <>
        <HvStatusIcon
          variant="default"
          size="md"
          customIcon={<div className="i-ph-tree-structure" />}
        />
        <HvTypography variant="title4">Section Title</HvTypography>
      </>
    }
    actions={
      <>
        <HvIconButton title="Icon Button">
          <HvIconContainer>
            <div className="i-ph-gear" />
          </HvIconContainer>
        </HvIconButton>
        <HvButton variant="primaryGhost">Action</HvButton>
      </>
    }
    classes={{
      header: "px-sm py-12px",
    }}
  >
    <HvTypography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
      blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
      nisl, sodales vitae blandit tincidunt, malesuada id sapien. Nulla dapibus
      accumsan est, a pharetra velit consequat et. Nullam iaculis justo sed urna
      condimentum ultricies. Integer nec interdum tortor.
    </HvTypography>
  </HvSection>


  <HvSection
    title={
      <>
        <HvStatusIcon
          variant="default"
          customIcon={<div className="i-ph-tree-structure" />}
        />
        <HvTypography variant="title4">Section Title</HvTypography>
      </>
    }
    actions={
      <>
        <HvIconButton title="Icon Button">
          <HvIconContainer>
            <div className="i-ph-gear" />
          </HvIconContainer>
        </HvIconButton>
        <HvButton variant="primaryGhost">Action</HvButton>
      </>
    }
  >
    <HvTypography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
      blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
      nisl, sodales vitae blandit tincidunt, malesuada id sapien. Nulla dapibus
      accumsan est, a pharetra velit consequat et. Nullam iaculis justo sed urna
      condimentum ultricies. Integer nec interdum tortor.
    </HvTypography>
  </HvSection>


  <HvSection
    title={
      <>
        <HvStatusIcon
          variant="default"
          size="xs"
          customIcon={<div className="i-ph-tree-structure" />}
        />
        <HvTypography variant="label">Section Title</HvTypography>
      </>
    }
    actions={
      <div className="flex items-center">
        <HvIconButton size="sm" className="p-0px" title="Icon Button">
          <HvIconContainer size="xs">
            <div className="i-ph-gear" />
          </HvIconContainer>
        </HvIconButton>
        <HvButton variant="primaryGhost" size="sm">
          Action
        </HvButton>
      </div>
    }
    classes={{
      header: "px-xs py-xxs",
    }}
  >
    <HvTypography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
      blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
      nisl, sodales vitae blandit tincidunt, malesuada id sapien. Nulla dapibus
      accumsan est, a pharetra velit consequat et. Nullam iaculis justo sed urna
      condimentum ultricies. Integer nec interdum tortor.
    </HvTypography>
  </HvSection>
</div>