Dynamic page components
A modular component system designed to help Clal’s content team build flexible, consistent, and on-brand pages independently.
01 Starting Point
Clal’s dynamic pages were still based on the previous brand language and relied on components with limited flexibility, unclear layout rules, and inconsistent behavior across breakpoints. As a result, pages were harder to structure, scale, and maintain - especially for content editors working independently.
Examples from the previous system
Before & After Comparison
02 Research & Insights
The goal was not only to apply Clal’s refreshed brand language to the website, but also to improve the way dynamic pages were built and maintained. After working closely with the content team for over two years, I was familiar with their workflow, recurring layout issues, and the flexibility they needed in order to create pages independently.
What the audit revealed
Brand implementation
The new brand language needed to be translated into reusable digital components that could work across many page types, not only as static visual guidelines.
Component structure
The existing components needed clearer content hierarchy, stronger layout logic, and more predictable behavior across different content lengths.
Design rules
The system needed clear rules for spacing, responsive behavior, color usage, typography, and editor-controlled variations.
03 System Approach
I translated recurring content patterns into reusable components with clear rules, responsive behavior, and editor-controlled variations — allowing the content team to build flexible pages independently while maintaining brand consistency.
Responsive behavior across breakpoints
Each component was designed and tested across four key breakpoints - 1920, 1440, 774, and 360 - to make sure editors could build flexible pages without breaking layout consistency.
04 Component Library
These insights became the foundation for a modular component library — built around the content team’s real needs: flexible sections, editable content, controlled visual variations, and responsive layouts that could support different page types independently.
Reusable components · Editor flexibility · Responsive layouts · Brand consistency
Contact Form Strip
A compact contact form component that allows the content team to add lead-generation forms within content pages, while keeping the structure clear, consistent, and responsive.
Available options:
Editable title · Editable field labels and helper text · White, cream, or light blue background
Expandable Info Card
A flexible card component for content-heavy items, designed to support multiple links while keeping the card height, hierarchy, and page rhythm under control.
Before - Uneven link lists
Cards with different numbers of links created uneven heights, making the layout feel inconsistent and harder to scan.
After - Expandable links
I introduced a default two-link view with an expandable state, allowing longer link lists to stay accessible without breaking the card structure.
Available options:
Editable title · Optional image · Optional body text · Up to 6 links · Expandable link state · Green, yellow, light blue, or cream card color · Grid or horizontal scroll layout
FAQ Section
A core accordion component designed to help the content team organize long-form information clearly, improve scannability, and support SEO-friendly content structures.
Available options:
Editable title and optional subtitle · Editable questions and answers · One-item-open behavior · White or cream background
Icon Strip
A visual strip component designed to present short content items with icons or silhouettes, while keeping each visual asset consistent inside a fixed 80×80 frame.
Available options:
Icon or silhouette upload · Fixed 80×80 visual frame · Horizontal or vertical layout · Content alignment · Background color selection
Video Carousel
A flexible video carousel that allows the content team to present multiple videos within one structured section, using a clear main video area, preview state, and simple side navigation.
Available options:
Editable title and optional subtitle · Thumbnail upload · Main video and preview state · Side navigation · White, light blue, or cream background
Basic Info Card
A lightweight card component for articles and general information, designed to keep content visual, scannable, and consistent across different screen sizes.
Available options:
Editable title and body text · Optional image · Optional link · Editable link label and URL · Cream, light blue, yellow, or green card color · Grid or horizontal scroll layout
Text Banner
A flexible banner component designed to highlight marketing messages and create a clear visual pause within long content pages, using editable typography, alignment, background color, or background imagery.
Available options:
Editable title · Optional subtitle · Typography style · Right or center alignment · White, cream, light blue, or dark blue background · Optional background image
Hero Banner
A flexible hero component designed for page openings and campaign sections, supporting editable media, structured text variations, and multiple CTA configurations.
Available options:
Headline style selection · Image or Lottie upload · Dark blue, light blue, or cream background · No CTA, primary CTA, or primary + secondary CTA · Bullet list or numbered list
05 Outcome
By turning recurring page patterns into reusable, editor-friendly components, the content team gained more independence while the website maintained stronger visual consistency, clearer hierarchy, and better responsive behavior across page types.