Section

<HvSection title="Section title - ">
<div>
  <p>
    My section example content
  </p>
</div>
</HvSection>

<HvSection
  actions={<HvButton variant="primarySubtle">Explore Insights</HvButton>}
  title={
    <HvTypography variant="title4">Unlock the Power of Your Data</HvTypography>
  }
>
  <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-2 w-full">
      <HvButton className="w-1/4" onClick={() => setExpanded((p) => !p)}>
        Expand
      </HvButton>
      <HvSection
        title="Controlled section"
        expandable
        expanded={expanded}
        onToggle={() => setExpanded((p) => !p)}
      >
        <HvTypography>
          This section is controlled by the state of the parent component.
        </HvTypography>
      </HvSection>
    </div>
  );
}