Resources 4 block design & features
Resources4 is a news listing block using Shadcn UI components. The layout has a narrow left column containing a small dot indicator and "Resources" label, and a wider right column with a two-line heading and a separator-divided list of news items. Each row links to a resource and shows a title in primary color, a category label, an author avatar, and a publication date.
Rows feature coordinated hover animations where the title text shifts rightward and an arrow icon fades in, while the metadata section shifts slightly leftward. The row background transitions to muted on hover. Separators divide each item. Avatars are small circular images with a border. The heading uses a lighter primary shade for its subtitle line.
The style is refined and editorial with generous spacing, smooth 400ms transitions, and a focus on typography-driven presentation. The asymmetric two-column header gives it a distinctive layout. Low complexity with the primary interest coming from the hover choreography.
On mobile the left label column stacks above the content area, and each news row switches from a horizontal layout to a vertical arrangement of title followed by metadata.