About this set
A dense audit log that fits one event per line, for admin panels and security pages where the list can run to fifty rows. Events are grouped under day headings, Today and Yesterday, and each row has a small coloured dot on a faint spine, a time, an action chip, Create, Update, Auth or Delete, and a sentence naming who did what, with identifiers in inline code. Rows take a light background on hover to help the eye track across. The chip text carries the action and the dot colour only repeats it, so the log reads the same without colour. Each day is an h2 heading followed by an ordered list of events, and every time is a time element with the full ISO date and time, so the short 14:22 still has an exact meaning. Long values such as email addresses wrap instead of pushing the card wider, so it holds at 375 pixels. Use it for account activity, admin audit trails, permission changes or sign-in history. The Bootstrap version builds the rows from a flush .list-group inside a .card with .badge chips, and the Tailwind version uses first: and last: variants to trim the spine.
What’s included
- One line per event with time, action chip and description
- Create, Update, Auth and Delete chips with text labels
- Day headings over ordered lists
- ISO date and time on every time element
- Long values wrap so the log never overflows on a phone
Accessibility
Each day is a heading followed by an ordered list, and every event's action is written in its chip, so meaning never rests on the dot colour; the dots are aria-hidden. Times are time elements with full datetime values. Times and day headings were darkened to meet 4.5:1 and the chip colours pass on their tints. Nothing animates.
Customise it
Change --au-border, --au-line, --au-text and --au-light on .audit (plain CSS and Bootstrap) or the --color-au-* theme colours in Tailwind. Chip colours are the .c-create, .c-update, .c-delete and .c-auth rules, and each dot's colour is its inline --c.
