Porto Itapoá News Component
A high-contrast, professional news or blog section featuring an emerald green palette, industrial-grade typography, and a distinctive grid-line layout. Suitable for logistics, maritime, corporate, or industrial sectors. The design uses grayscale imagery with color overlays, heavy uppercase headings, and a refined bento-style grid using 1px gaps as borders.
Summary
A corporate news grid component featuring a header with a section indicator and a 'view all' button, followed by a three-column grid of news cards. The aesthetic is defined by its deep green color (#007651), heavy use of Open Sans at extreme weights, and a unique 1px border grid achieved through container background colors.
Style
Industrial corporate style emphasizing clarity and authority. Uses a primary emerald green (#007651), grayscale photography with dark green overlays, and 'Open Sans' across several weights. The layout feels structural, using a 1px 'grid-line' effect and precise letter-spacing on uppercase elements.
Layout & Structure
The layout consists of a header row with dual-alignment and a responsive grid of cards that utilize a 'gap-as-border' technique.
Section Header
News Grid
News Card Image Area
News Card Content Area
Components
Grid-Line News Card
A card component designed to sit in a 1px gap layout.
Special Notes
MUST: Use 1px gap on a colored background for the grid borders. MUST: Ensure images are strictly grayscale to maintain the brand aesthetic. MUST: Use extreme letter-spacing (up to 3px) for uppercase labels to ensure readability and professional look. DO NOT: Use rounded corners; the design relies on sharp, industrial edges.