Timeline

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

An example of a UI that displays events in chronological order. It is built with Lism primitives and a small amount of CSS (b--timeline).

Overview

↓

Preview

Month dd, 20yy

Lism x.y.z released.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Month dd, 20yy

Lism x.y.z released.

Month dd, 20yy

Lism x.y.z released.

Resize

<Grid class="b--timeline" hl="s">
  <Grid class="b--timeline_item" ai="center" cg="20">
    <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">Month dd, 20yy</Lism>
    <Lism class="b--timeline_title" fz="s" fw="bold" gr="3" gc="2">Lism x.y.z released.</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>Lorem ipsum dolor sit amet. ...</p>
    </Lism>
  </Grid>
  {/* Repeat the same structure for the remaining items */}
</Grid>

<div class="b--timeline l--grid -hl:s">
  <div class="b--timeline_item l--grid -ai:center -cg:20">
    <div class="b--timeline_line a--decorator -bgc -jslf:center -gr:1/-1 -gc" style="--bgc:var(--divider);--gc:1" aria-hidden="true"></div>
    <div class="b--timeline_shape l--center -pos:relative -z:1 -c:base -ar:1/1 -bdrs:99 -jslf:center -bgc:text -gr -gc" style="--gr:2;--gc:1"></div>
    <div class="b--timeline_time -fz:xs -fw:bold -gr -gc" style="--gr:2;--gc:2">Month dd, 20yy</div>
    <div class="b--timeline_title -fz:s -fw:bold -gr -gc" style="--gr:3;--gc:2">Lism x.y.z released.</div>
    <div class="b--timeline_text -fz:s -mbs:15 -gr -gc" style="--gr:4;--gc:2">
      <p>Lorem ipsum dolor sit amet. ...</p>
    </div>
  </div>
  <!-- Repeat the same structure for the remaining items -->
</div>

Styles

The Timeline base styles are defined in the following CSS. Copy this CSS into your project to use it.

If you copy it with the @layer lism-block wrapper as is, it fits into the core CSS layer order and can be overridden from the lism-custom layer.

timeline.css

@layer lism-block {
  .b--timeline {
    --shape-size: 1.375rem;
    --line-len: 100%;
    --line-bold: 1px;
    --_line-offset: calc(var(--shape-size) / 2);
    --highlight-inset: -3px;

    --edge: var(--s20);
    --startSpace: var(--edge);
    --endSpace: var(--edge);
    --shapeSpace: calc(var(--shape-size) + var(--highlight-inset) * -1);
  }

  .b--timeline_item {
    grid: var(--startSpace) auto auto auto var(--endSpace) / var(--shapeSpace) 1fr;
  }

  .b--timeline_line {
    width: var(--line-bold);
    height: var(--line-len);
  }

  .b--timeline_shape {
    font-size: var(--shape-size);
    width: 0.5em; /* icon ない時は 縮める */
  }
  .b--timeline_shape._hasIcon {
    width: 1em;
  }
  .b--timeline_highlight {
    inset: var(--highlight-inset);
  }

  [data-timeline='start'] {
    --startSpace: 0;
    --line-len: calc(100% - var(--_line-offset));
  }
  [data-timeline='end'] {
    --endSpace: 0;
    --line-len: calc(100% - var(--_line-offset));
  }

  .b--timeline--horizontal {
    --edge: var(--s15);
    --_line-offset: calc(50% - var(--edge) / 2);
    grid-template-rows: var(--shapeSpace) auto auto auto;
  }

  .b--timeline--horizontal > .b--timeline_item {
    grid-template-columns: var(--startSpace) auto var(--endSpace);
  }

  .b--timeline--horizontal .b--timeline_line {
    width: var(--line-len);
    height: var(--line-bold);
  }
}

Markup

The markup consists of the following classes and attributes. Row and column placement is specified with Property Classes (-gr / -gc).

Class / Attribute	Description
`b--timeline`	Root element. Used together with `l--grid`. Add `b--timeline--horizontal` for a horizontal layout.
`b--timeline_item`	Wrapper element for a single item. Used together with `l--grid`; specify `-ai:center -cg:20` for a vertical layout, or `-ai:center -ji:center -gtr:subgrid -gr:1/-1 -rg:10` for a horizontal layout.
`data-timeline`	Marks the first/last item. Setting `start` / `end` removes the line overflow in that direction.
`b--timeline_line`	The line connecting items (used with `a--decorator`). Extend it with `-gr:1/-1` for a vertical layout, or `-gc:1/-1` for a horizontal layout.
`b--timeline_shape`	The shape marking each milestone (used with `l--center`). Change its color with `-bgc`, and add `_hasIcon` to place an icon inside.
`b--timeline_highlight`	Decoration that highlights the shape (used with `a--decorator`; optional).
`b--timeline_time`	Element displaying the date/time (optional). In a vertical layout, it’s placed in row 2, column 2.
`b--timeline_title`	Element displaying the heading (optional). In a vertical layout, it’s placed in row 3, column 2.
`b--timeline_text`	Element displaying the body text (optional). In a vertical layout, it’s placed in row 4, column 2.
`--edge`	Space reserved at the start/end (defaults to `var(--s20)` for a vertical layout, `var(--s15)` for a horizontal layout).

Adjust the shape size and line thickness by editing --shape-size / --line-bold in the CSS.

Examples

Start/end markers and highlighted shapes

Setting data-timeline="start" / data-timeline="end" on the first and last items removes the line overflow above and below.
Adding b--timeline_highlight inside a shape gives it a highlighted look, and you can change its color with the shape’s -bgc.

↓

data-timeline and b--timeline_highlight

Month dd, 20yy

Lism x.y.z released.

Month dd, 20yy

Lism x.y.z released.

Month dd, 20yy

Lism x.y.z released.

Resize

<Grid class="b--timeline" hl="s">
  <Grid class="b--timeline_item" ai="center" cg="20" data-timeline="start">
    <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" aslf="e" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1" />
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">Month dd, 20yy</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>Lism x.y.z released.</p>
    </Lism>
  </Grid>
  {/* Middle items have no data-timeline and show the full line */}
  <Grid class="b--timeline_item" ai="center" cg="20" data-timeline="end">
    <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/3" gc="1" aslf="s" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="red" gr="2" gc="1">
      <Decorator class="b--timeline_highlight" as="span" pos="absolute" z="-1" bgc="inherit" bdrs="99" o="ppp" />
    </Center>
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">Month dd, 20yy</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>Lism x.y.z released.</p>
    </Lism>
  </Grid>
</Grid>

<div class="b--timeline l--grid -hl:s">
  <div class="b--timeline_item l--grid -ai:center -cg:20" data-timeline="start">
    <div class="b--timeline_line a--decorator -bgc -jslf:center -gr:1/-1 -gc -aslf:end" style="--bgc:var(--divider);--gc:1" aria-hidden="true"></div>
    <div class="b--timeline_shape l--center -pos:relative -z:1 -c:base -ar:1/1 -bdrs:99 -jslf:center -bgc:text -gr -gc" style="--gr:2;--gc:1"></div>
    <div class="b--timeline_time -fz:xs -fw:bold -gr -gc" style="--gr:2;--gc:2">Month dd, 20yy</div>
    <div class="b--timeline_text -fz:s -mbs:15 -gr -gc" style="--gr:4;--gc:2">
      <p>Lism x.y.z released.</p>
    </div>
  </div>
  <!-- Middle items have no data-timeline and show the full line -->
  <div class="b--timeline_item l--grid -ai:center -cg:20" data-timeline="end">
    <div class="b--timeline_line a--decorator -bgc -jslf:center -gr -gc -aslf:start" style="--bgc:var(--divider);--gr:1/3;--gc:1" aria-hidden="true"></div>
    <div class="b--timeline_shape l--center -pos:relative -z:1 -c:base -ar:1/1 -bdrs:99 -jslf:center -bgc -gr -gc" style="--bgc:var(--red);--gr:2;--gc:1">
      <span class="b--timeline_highlight a--decorator -pos:absolute -z:-1 -bgc:inherit -bdrs:99 -o:ppp" aria-hidden="true"></span>
    </div>
    <div class="b--timeline_time -fz:xs -fw:bold -gr -gc" style="--gr:2;--gc:2">Month dd, 20yy</div>
    <div class="b--timeline_text -fz:s -mbs:15 -gr -gc" style="--gr:4;--gc:2">
      <p>Lism x.y.z released.</p>
    </div>
  </div>
</div>

Adding icons

Add _hasIcon to the shape and place an <Icon> (a--icon) inside it to display an icon within the shape.

↓

_hasIcon

Month dd, 20yy

Lism x.y.z released.

Month dd, 20yy

Lism x.y.z released.

Month dd, 20yy

Lism x.y.z released.

Resize

import { CheckIcon } from '@lism-css/icons/react';

<Grid class="b--timeline_item" ai="center" cg="20">
  <Decorator class="b--timeline_line" bgc="divider" jslf="center" gr="1/-1" gc="1" />
  <Center class="b--timeline_shape _hasIcon" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="2" gc="1">
    <Icon icon={CheckIcon} style={{ scale: '0.625' }} />
  </Center>
  <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">Month dd, 20yy</Lism>
  <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
    <p>Lism x.y.z released.</p>
  </Lism>
</Grid>

<div class="b--timeline_item l--grid -ai:center -cg:20">
  <div class="b--timeline_line a--decorator -bgc -jslf:center -gr:1/-1 -gc" style="--bgc:var(--divider);--gc:1" aria-hidden="true"></div>
  <div class="b--timeline_shape _hasIcon l--center -pos:relative -z:1 -c:base -ar:1/1 -bdrs:99 -jslf:center -bgc:text -gr -gc" style="--gr:2;--gc:1">
    <svg class="a--icon" style="scale:0.625" aria-hidden="true">...</svg>
  </div>
  <div class="b--timeline_time -fz:xs -fw:bold -gr -gc" style="--gr:2;--gc:2">Month dd, 20yy</div>
  <div class="b--timeline_text -fz:s -mbs:15 -gr -gc" style="--gr:4;--gc:2">
    <p>Lism x.y.z released.</p>
  </div>
</div>

Horizontal layout (`b--timeline--horizontal`)

Adding b--timeline--horizontal to the root element creates a horizontally arranged timeline. Each item shares the root’s rows via -gtr:subgrid, and the line extends horizontally with -gc:1/-1.

↓

b--timeline--horizontal

Month dd, 20yy

Lism x.y.z released.

Month dd, 20yy

Lism x.y.z released. Lism x.y.z released.

Month dd, 20yy

Lism x.y.z released.

Resize

<Grid class="b--timeline b--timeline--horizontal" gaf="column" hl="s">
  <Grid class="b--timeline_item" ai="center" ji="c" gtr="subgrid" gr="1/-1" rg="10" data-timeline="start">
    <Decorator class="b--timeline_line" bgc="divider" jslf="e" gr="1" gc="1/-1" />
    <Center class="b--timeline_shape" pos="relative" z="1" c="base" ar="1/1" bdrs="99" jslf="center" bgc="text" gr="1" gc="2" />
    <Lism class="b--timeline_time" fz="xs" fw="bold" gr="2" gc="2">Month dd, 20yy</Lism>
    <Lism class="b--timeline_title" fz="s" fw="bold" gr="3" gc="2">Lism x.y.z released.</Lism>
    <Lism class="b--timeline_text" fz="s" mbs="15" gr="4" gc="2">
      <p>Lorem ipsum dolor sit amet. ...</p>
    </Lism>
  </Grid>
  {/* Middle items center the line with `jslf="center"`, and the last item shows only the near side with `jslf="s"` */}
</Grid>

<div class="b--timeline b--timeline--horizontal l--grid -gaf:column -hl:s">
  <div class="b--timeline_item l--grid -ai:center -ji:center -gtr:subgrid -gr:1/-1 -rg:10" data-timeline="start">
    <div class="b--timeline_line a--decorator -bgc -jslf:end -gr -gc:1/-1" style="--bgc:var(--divider);--gr:1" aria-hidden="true"></div>
    <div class="b--timeline_shape l--center -pos:relative -z:1 -c:base -ar:1/1 -bdrs:99 -jslf:center -bgc:text -gr -gc" style="--gr:1;--gc:2"></div>
    <div class="b--timeline_time -fz:xs -fw:bold -gr -gc" style="--gr:2;--gc:2">Month dd, 20yy</div>
    <div class="b--timeline_title -fz:s -fw:bold -gr -gc" style="--gr:3;--gc:2">Lism x.y.z released.</div>
    <div class="b--timeline_text -fz:s -mbs:15 -gr -gc" style="--gr:4;--gc:2">
      <p>Lorem ipsum dolor sit amet. ...</p>
    </div>
  </div>
  <!-- Middle items set the line to -jslf:center, and the last item to -jslf:start -->
</div>

Timeline

Overview

Styles

Markup

Examples

Start/end markers and highlighted shapes

Adding icons

Horizontal layout (b--timeline--horizontal)

Horizontal layout (`b--timeline--horizontal`)