next

.design-sync/ds-src/Col.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export interface ColProps {
+  /** How many of the twelve columns this block occupies. */
+  span?: number;
+  /** The column it starts at, counting from 1. Offsets are how asymmetry is made. */
+  start?: number;
+  children?: ReactNode;
+}
+
+/** One block on the grid. A headline takes 7 or 8 columns, its body copy 4 or 5. */
+export function Col({ span = 12, start, children }: ColProps) {
+  return <div style={{ gridColumn: start ? `${start} / span ${span}` : `span ${span}` }}>{children}</div>;
+}