Refine use cases rule examples

tests/components/SectionHeader.test.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
 import SectionHeader from "../../app/components/type/SectionHeader";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
@@ -21,3 +23,22 @@ componentTestSuite<SectionHeaderProps>({
     errorState: false,
   },
 });
+
+describe("SectionHeader twoColumnsFromMd", () => {
+  it("splits rule stack header at md when twoColumnsFromMd is set", () => {
+    const { container } = render(
+      <SectionHeader
+        title="Popular templates"
+        subtitle="Start from a proven pattern."
+        variant="multi-line"
+        ruleStackDesktopTypeScale
+        twoColumnsFromMd
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: /popular templates/i }),
+    ).toBeInTheDocument();
+    expect(container.firstElementChild).toHaveClass("md:flex-row");
+  });
+});