15 lines
536 B
TypeScript
15 lines
536 B
TypeScript
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>;
|
|
}
|