A feature card designed for a corporate homepage may not work as well on a product microsite. When a headline is longer, the button can get out of alignment, and the image may no longer be proportional. To resolve this, a designer adjusts the spacing and saves a new version of the component.
When making a reusable feature block, you have to choose colors, figure out what it says (title, description, etc.), how it’s put together, and how it looks. You will be able to organize the same content in different ways on different websites once you have taken these parts apart.
Define the Block Before Drawing It
A typical feature card might include a heading, short description, optional image, and link. Its spacing and dimensions can then vary depending on where it appears.
When editors add card content directly to a page layout in a content management system (CMS), reusing it elsewhere may require rebuilding the card. However, storing content fields separately lets different websites present shared information with different designs.
This flexibility also depends on whether a CMS can manage structured content independently of its presentation. For teams managing several websites, an enterprise CMS guide can help evaluate support for reusable content models and API-based delivery before development begins. A practical way to assess this is to check whether the same content can be displayed in different layouts without duplicating information or requiring separate updates for each website.
Decide early how to handle missing information, such as an image or button. Should a card without an image switch to a text-only layout? Can its button be optional? These rules prevent individual websites from developing separate workarounds for similar problems.
Turn the Design into a Reusable Component in Figma
Begin by testing sample images alongside text of varying lengths. Short headlines and perfectly sized images can hide layout problems that become obvious when editors add real content.
A horizontal feature card consists of a parent frame containing an image and text. Within its text area, you can arrange a heading, description, and button vertically. Use Auto Layout to add padding and set minimum widths. Check how everything adjusts when content changes from short titles to longer descriptions.
Component variations are especially helpful when structural elements change, such as shifting a picture from the left to the top. Instead of making a new master component, you can use Figma’s changeable text and instance properties to make changes that only affect the content.
Try alternative combinations, such as a two-line header, a five-line explanation, and a lengthy button label. Pay attention to space, alignment, and whether items are still readable at reduced screen sizes. These tests assess how well a design handles real editorial content.
Give the Component a Content Model and a Front End
Although a Figma design illustrates how a feature card ought to look, it does not define how information is stored or distributed across websites.
To do this, you need a content model with well-defined fields and a front-end component that can use that data without relying on a single layout.
Define the CMS Fields That Support Reusable Components
Use the front end to see how structured data interacts with a common component. In your CMS, add fields for headings, descriptions, photos, link destinations, and link text. If your design standards do not require pictures or links, mark them as optional.
Each field should serve a defined function. For example, keeping link text separate from its destination lets editors update button labels without changing the code. Similarly, having photos in specific fields allows you to better manage how they look in different layouts.
Style vs. Content Settings: Editing Content vs. Presenting Content on a Page
When rendering a shared component, developers map CMS fields to its front-end implementation, while site-specific themes handle presentation details such as colors and typography. Component code manages text wrapping, image cropping, and button behavior.
Tech & All’s article on building a Next.js website from your Figma mockups explains more about setting up design-to-code websites. However, another challenge involves supplying reusable components with structured information rather than relying on example content.
Reusing content and style are two different choices. It is possible for two websites to share a content record even though they show it on different cards. They can also use the same card template but fill it out with different information.
This difference matters when multiple teams manage a page. Editors can change text or pictures without changing component code, and designers can make changes to shared visual elements without rewriting editing content.
Test the Same Block on Different Sites
Use realistic CMS records to test reusable blocks on both websites. Compare short and long titles, square and wide graphics, and buttonless variants. Examine whether layouts are consistent and whether any material becomes difficult to read.
Storybook allows you to present components in various states without creating entire website pages. For example, developers can test content combinations by inspecting keyboard focus, link labels, text contrast, and image cropping.
Repeat these checks for all website themes. When upgrading a common design library, focus on how changes affect all implementations rather than just one layout.
A spacing change that helps one website may cause alignment issues elsewhere. If changing one theme regularly breaks another, developers should examine how shared component styles interact with site-specific settings.
A reusable content block is more than just a design duplicated from various files. It consists of a stable content structure, a changeable visual component, and a corresponding front-end implementation. Designing these parts together simplifies creating new pages without developing equivalent cards for each website.
