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>
  );
}