Inline
ProjectReady
import { Inline } from "@combric/react";
export function Example() {
return <Inline gap="3" align="baseline"><strong>Project</strong><span>Ready</span></Inline>;
}Inline
Non-wrapping horizontal flow.
@combric/layout · v1.1.1 · Current
Import and usage
import { Inline } from "@combric/react";The framework-independent CSS contract is available from@combric/layout/css; the React wrapper comes from@combric/react.
Examples
Alignment options
StartValue
CenterValue
EndValue
BaselineValue
import { Inline, Stack } from "@combric/react";
export function Example() {
return <Stack gap="2"><Inline gap="2" align="start"><span>Start</span><strong>Value</strong></Inline><Inline gap="2" align="center"><span>Center</span><strong>Value</strong></Inline><Inline gap="2" align="end"><span>End</span><strong>Value</strong></Inline><Inline gap="2" align="baseline"><span>Baseline</span><strong>Value</strong></Inline></Stack>;
}Public API
| Name |
|---|
Inline |
| Contract |
|---|
| gap |
| align: start | center | end | baseline |
Accessibility
Layout changes presentation only. Choose semantic elements and preserve meaningful source order; Combric does not add ARIA, reorder content, or measure the viewport.