{"id":8041,"date":"2025-12-19T11:59:44","date_gmt":"2025-12-19T16:59:44","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8041"},"modified":"2025-12-19T11:59:45","modified_gmt":"2025-12-19T16:59:45","slug":"exploring-multi-brand-systems-with-tokens-and-composability","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/exploring-multi-brand-systems-with-tokens-and-composability\/","title":{"rendered":"Exploring Multi-Brand Systems with Tokens and Composability"},"content":{"rendered":"\n

Design systems aren\u2019t just about keeping everything looking the same; they\u2019re about making things flexible enough to handle whatever gets thrown at them. <\/p>\n\n\n\n

When you\u2019re juggling multiple brands or different use\u2011cases, a rigid component can feel more limiting than helpful. That\u2019s where tokens<\/em>, composition<\/em>, and configuration<\/em><\/strong> come in. Tokens let you swap out brand colors and styles without rewriting code, composition gives you building blocks you can remix into new layouts, and configuration keeps all those variations tidy and predictable. Put them together, and suddenly a single component can stretch to fit diverse brands, layouts, and experiences all without breaking from the system.<\/p>\n\n\n\n

Let’s look at a typical “Card” component that is designed with all three of these things in mind such that it can support usage across different brands without breaking a sweat.<\/p>\n\n\n\n

Setting up the Basic Card Structure<\/strong><\/h2>\n\n\n\n

Say our project calls for a simple card. The card has a toggle-able banner that accepts a text string, a thumbnail image, title, description, and a button.<\/p>\n\n\n

\n
\"A<\/figure>\n<\/div>\n\n\n

In this article, all examples are written in Vue, but these principles are not Vue specific. They can be used in any design system that builds from components, even native Web Components.<\/p>\n\n\n\n

Our component should end up looking something like this:<\/p>\n\n\n

<template<\/span>><\/span>\n  <article<\/span> class<\/span>=\"system-card\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"system-card-media\"<\/span>><\/span>\n      <span<\/span> v-if<\/span>=\"bannerText\"<\/span> class<\/span>=\"system-card-banner\"<\/span>><\/span>\n        {{ bannerText }}\n      <\/span<\/span>><\/span>\n      <img<\/span> :src<\/span>=\"imageUrl\"<\/span> :alt<\/span>=\"imageAlt\"<\/span> class<\/span>=\"system-card-image\"<\/span> \/><\/span>\n    <\/div<\/span>><\/span>\n\n    <div<\/span> class<\/span>=\"system-card-content\"<\/span>><\/span>\n      <h3<\/span> class<\/span>=\"system-card-title\"<\/span>><\/span>{{ title }}<\/h3<\/span>><\/span>\n      <p<\/span> class<\/span>=\"system-card-description\"<\/span>><\/span>{{ description }}<\/p<\/span>><\/span>\n      <button<\/span> class<\/span>=\"system-card-button\"<\/span>><\/span>{{ buttonText }}<\/button<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/article<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span> setup<\/span>><\/span>\ndefineOptions({ name: \"SystemCard\"<\/span> });\n\ndefineProps({\n  bannerText: { type: String, default<\/span>: null<\/span> },\n  imageUrl: { type: String, default<\/span>: \"<https:\/\/via.placeholder.com\/350x150>\"<\/span> },\n  imageAlt: { type: String, default<\/span>: \"Card Image\"<\/span> },\n  title: { type: String, default<\/span>: \"Card Title\"<\/span> },\n  description: {\n    type: String,\n    default<\/span>:\n      \"This is a description of the card content. It provides more details about the card.\"<\/span>,\n  },\n  buttonText: { type: String, default<\/span>: \"Learn More\"<\/span> },\n});\n<\/span><\/script<\/span>><\/span>\n\n<style<\/span> scoped<\/span>><\/span>\n.system-card<\/span> {\n  background<\/span>: #fff<\/span>;\n  border-radius<\/span>: 8px<\/span>;\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  overflow<\/span>: hidden;\n}\n\n.system-card-media<\/span> {\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n}\n\n.system-card-banner<\/span> {\n  background-color<\/span>: #a3533c<\/span>;\n  color<\/span>: #fff<\/span>;\n  font-size<\/span>: 14px<\/span>;\n  font-weight<\/span>: 600<\/span>;\n  padding<\/span>: 4px<\/span>;\n  text-align<\/span>: center;\n  width<\/span>: 100%<\/span>;\n}\n\n.system-card-content<\/span> {\n  padding<\/span>: 16px<\/span>;\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  gap<\/span>: 8px<\/span>;\n}\n\n\/* ... other card styling, like .system-card-button *\/<\/span>\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
The Card is then used like this:<\/p>\n\n\n
<SystemCard<\/span>\n\u00a0 bannerText<\/span>=\"Featured Location\"<\/span>\n\u00a0 imageUrl<\/span>=\"image\/of\/red-rock.jpg\"<\/span>\n\u00a0 imageAlt<\/span>=\"Red Rocks Amphitheater during a night concert\"<\/span>\n\u00a0 title<\/span>=\"Red Rocks Park and Amphitheater\"<\/span>\n\u00a0 description<\/span>=\"There's No Better Place to See The Stars.\"<\/span>\n\u00a0 buttonText<\/span>=\"View Events\"<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Supporting Multiple Brands\/Themes with Tokens<\/strong><\/h2>\n\n\n\n
At the most basic level, we can modify this card to support different brands or themes through the use of tokens or variables. I will be using CSS Custom Properties (variables) for all examples in this article, but tokens are not limited to just CSS, you can learn more about Design Tokens from the Design Tokens Community Group<\/a> (which just shipped their first stable version<\/a>!)<\/p>\n\n\n\n
All of our existing markup stays the same, but we need to modify the CSS to use variables for configuration. While we\u2019re at it, we should also look at any duplicate or hard-coded values and convert those to variable as well to maintain clean, reusable code.<\/p>\n\n\n\n
Our new style declarations should look like this:<\/p>\n\n\n
<style<\/span> scoped<\/span>><\/span>\n\/* These root variables are likely to be set up in a more global stylesheet *\/<\/span>\n:root<\/span> {\n  --system-card-bg-color<\/span>: #ffffff<\/span>;\n  --system-card-accent-bg-color<\/span>: #a3533c<\/span>;\n  --system-card-accent-text-color<\/span>: #ffffff<\/span>;\n\n  --system-card-border-radius<\/span>: 8px<\/span>;\n  --system-card-padding<\/span>: 16px<\/span>;\n  --system-card-gap<\/span>: 8px<\/span>;\n}\n\n.system-card<\/span> {\n  background<\/span>: var<\/span>(--system-card-bg-color);\n  border-radius<\/span>: var<\/span>(--system-card-border-radius);\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  overflow<\/span>: hidden;\n}\n\n.system-card-media<\/span> {\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n}\n\n.system-card-banner<\/span> {\n  background-color<\/span>: var<\/span>(--system-card-accent-bg-color);\n  color<\/span>: var<\/span>(--system-card-accent-text-color);\n  font-size<\/span>: 14px<\/span>;\n  font-weight<\/span>: 600<\/span>;\n  padding<\/span>: 4px<\/span>;\n  text-align<\/span>: center;\n  width<\/span>: 100%<\/span>;\n}\n\n.system-card-content<\/span> {\n  padding<\/span>: var<\/span>(--system-card-padding);\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  gap<\/span>: var<\/span>(--system-card-gap);\n}\n...\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Now that our component is using tokens, we can create a custom class and assign those tokens new values. Simply by swapping from statically assigned values to dynamic tokens; CSS Custom Properties in this case, we have enabled our card component to support different visual themes.<\/p>\n\n\n
<SystemCard<\/span>\n\u00a0 class<\/span>=\"custom-blue-card\"<\/span>\n\u00a0 bannerText<\/span>=\"Featured Location\"<\/span>\n\u00a0 imageUrl<\/span>=\"image\/of\/shedd-aquarium.jpg\"<\/span>\n\u00a0 imageAlt<\/span>=\"Underwater tunnel at the Shedd Aquarium\"<\/span>\n\u00a0 title<\/span>=\"Shedd Aquarium\"<\/span>\n\u00a0 description<\/span>=\"Look Nature in the Eye.\"<\/span>\n\u00a0 butonText<\/span>=\"Plan Your Visit\"<\/span>\n\/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
.custom-blue-card<\/span> {\n<\/span><\/span>\u00a0 --system-card-accent-bg-color<\/span>: #328198<\/span>;\n<\/span><\/mark>\u00a0 --system-card-accent-text-color<\/span>: #00070B<\/span>;\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Alternatively, we could add a new property on the component that assigns a class with new token definitions if we have a known set of themes we want to support:<\/p>\n\n\n
<SystemCard<\/span><\/span>\n<\/span><\/span>\u00a0 bannerText<\/span>=\"Featured Location\"<\/span><\/span>\n<\/span><\/span>\u00a0 imageUrl<\/span>=\"image\/of\/shedd-aquarium.jpg\"<\/span><\/span>\n<\/span><\/span>\u00a0 imageAlt<\/span>=\"Underwater tunnel at the Shedd Aquarium\"<\/span><\/span>\n<\/span><\/span>\u00a0 title<\/span>=\"Shedd Aquarium\"<\/span><\/span>\n<\/span><\/span>\u00a0 description<\/span>=\"Look Nature in the Eye.\"<\/span><\/span>\n<\/span><\/span>\u00a0 butonText<\/span>=\"Plan Your Visit\"<\/span><\/span>\n<\/span><\/span>\u00a0 theme<\/span>=\"light-blue\"<\/span><\/span>\n<\/span><\/mark>\/><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
\/* These would likely be global overrides in a global stylesheet *\/<\/span>\n<\/span><\/span>.theme--light-blue<\/span> {\n<\/span><\/span>\u00a0 --system-card-accent-bg-color<\/span>: #328198<\/span>;\n<\/span><\/mark>\u00a0 --system-card-accent-text-color<\/span>: #00070B<\/span>;\n<\/span><\/mark>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"Card<\/figure>\n<\/div>\n\n\n
Customizing Content with Composable Slots<\/strong><\/h2>\n\n\n\n
A description is great, but what if we want to show a list of details instead? In a situation like this we have two options, either maintain unique code for every different variation of the component, or create composable areas within a single component that engineers can write custom code into, in programming these are often referred to as slots<\/em>.<\/p>\n\n\n\n
Taking our code from before:<\/p>\n\n\n
<template<\/span>><\/span>\n  <article<\/span> class<\/span>=\"system-card\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"system-card-media\"<\/span>><\/span>\n      <span<\/span> v-if<\/span>=\"bannerText\"<\/span> class<\/span>=\"system-card-banner\"<\/span>><\/span>{{ bannerText }}<\/span<\/span>><\/span>\n      <img<\/span> :src<\/span>=\"imageUrl\"<\/span> :alt<\/span>=\"imageAlt\"<\/span> class<\/span>=\"system-card-image\"<\/span> \/><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"system-card-content\"<\/span>><\/span>\n      <h3<\/span> class<\/span>=\"system-card-title\"<\/span>><\/span>{{ title }}<\/h3<\/span>><\/span>\n      <p<\/span> class<\/span>=\"system-card-description\"<\/span>><\/span>{{ description }}<\/p<\/span>><\/span>\n      <button<\/span> class<\/span>=\"system-card-button\"<\/span>><\/span>{{ buttonText }}<\/button<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/article<\/span>><\/span>\n<\/template<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
We can modify our code to replace the .system-card-description<\/code> element with a slot, we\u2019ll use the name card-details to identify what we expect the contents of this slot to be.<\/p>\n\n\n
<template<\/span>><\/span>\n<\/span><\/span>  <article<\/span> class<\/span>=\"system-card\"<\/span>><\/span>\n<\/span><\/span>    <div<\/span> class<\/span>=\"system-card-media\"<\/span>><\/span>\n<\/span><\/span>      <span<\/span> v-if<\/span>=\"bannerText\"<\/span> class<\/span>=\"system-card-banner\"<\/span>><\/span>{{ bannerText }}<\/span<\/span>><\/span>\n<\/span><\/span>      <img<\/span> :src<\/span>=\"imageUrl\"<\/span> :alt<\/span>=\"imageAlt\"<\/span> class<\/span>=\"system-card-image\"<\/span> \/><\/span>\n<\/span><\/span>    <\/div<\/span>><\/span>\n<\/span><\/span>    <div<\/span> class<\/span>=\"system-card-content\"<\/span>><\/span>\n<\/span><\/span>      <h3<\/span> class<\/span>=\"system-card-title\"<\/span>><\/span>{{ title }}<\/h3<\/span>><\/span>\n<\/span><\/span>      <slot<\/span> name<\/span>=\"card-details\"<\/span> \/><\/span>\n<\/span><\/mark>      <button<\/span> class<\/span>=\"system-card-button\"<\/span>><\/span>{{ buttonText }}<\/button<\/span>><\/span>\n<\/span><\/span>    <\/div<\/span>><\/span>\n<\/span><\/span>  <\/article<\/span>><\/span>\n<\/span><\/span><\/template<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
For the existing cards with a tagline we can simply place the .system-card-description<\/code> element within the slot to achieve the same result.<\/p>\n\n\n
<SystemCard<\/span><\/span>\n<\/span><\/span>  bannerText<\/span>=\"Featured Location\"<\/span><\/span>\n<\/span><\/span>  imageUrl<\/span>=\"image\/of\/shedd-aquarium.jpg\"<\/span><\/span>\n<\/span><\/span>  imageAlt<\/span>=\"Underwater tunnel at the Shedd Aquarium\"<\/span><\/span>\n<\/span><\/span>  title<\/span>=\"Shedd Aquarium  butonText=\"<\/span>Plan<\/span> Your<\/span> Visit<\/span>\"<\/span>\n<\/span><\/span>  theme<\/span>=\"light-blue\"<\/span><\/span>\n<\/span><\/span>><\/span>\n<\/span><\/span><!-- This is our slot --><\/span>\n<\/span><\/mark><p<\/span> class<\/span>=\"system-card-description\"<\/span>><\/span>Look Nature in the Eye.<\/p<\/span>><\/span>\n<\/span><\/mark><!-- This is our slot --><\/span>\n<\/span><\/mark><\/SystemCard<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"A<\/figure>\n<\/div>\n\n\n
By creating a slot however, we\u2019ve now opened up the possibility for custom content within in. The team can now create a snippet of code to display the list of highlights producing a unique variation on the existing component without completely breaking away from the system.<\/p>\n\n\n\n
Component usage could then look like this:<\/p>\n\n\n
<SystemCard<\/span>\n\u00a0 bannerText<\/span>=\"Featured Location\"<\/span>\n\u00a0 imageUrl<\/span>=\"image\/of\/shedd-aquarium.jpg\"<\/span>\n\u00a0 imageAlt<\/span>=\"Underwater tunnel at the Shedd Aquarium\"<\/span>\n\u00a0 title<\/span>=\"Shedd Aquarium\u00a0\u00a0butonText=\"<\/span>Plan<\/span> Your<\/span> Visit<\/span>\"\n\u00a0 theme<\/span>=\"light-blue\"<\/span>\n><\/span>\n\u00a0 <!-- This is our slot --><\/span>\n\u00a0 <ul<\/span> class<\/span>=\"highlight-list\"<\/span>><\/span>\n\u00a0 \u00a0 <li<\/span> class<\/span>=\"highlight-item\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <p<\/span> class<\/span>=\"highlight-text\"<\/span>><\/span>Touch Experiences<\/p<\/span>><\/span>\n\u00a0 \u00a0 <\/li<\/span>><\/span>\n\u00a0 \u00a0 <li<\/span> class<\/span>=\"highlight-item\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <p<\/span> class<\/span>=\"highlight-text\"<\/span>><\/span>Animal Encounters<\/p<\/span>><\/span>\n\u00a0 \u00a0 <\/li<\/span>><\/span>\n\u00a0 \u00a0 <li<\/span> class<\/span>=\"highlight-item\"<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <p<\/span> class<\/span>=\"highlight-text\"<\/span>><\/span>Stingray Feedings<\/p<\/span>><\/span>\n\u00a0 \u00a0 <\/li<\/span>><\/span>\n\u00a0 <\/ul<\/span>><\/span>\n\u00a0 <!-- This is our slot --><\/span>\n<\/SystemCard<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Producing a result like this:<\/p>\n\n\n
\n
\"A<\/figure>\n<\/div>\n\n\n
A Note on Keeping Things Organized<\/strong><\/h3>\n\n\n\n
The concept of completely free and open slots is likely terrifying to a designer or engineer who is focused on maintaining clean and organized code since now we\u2019re allowing people to add whatever custom work they want to an area.<\/p>\n\n\n\n
To avoid this we can provide \u201cready-made\u201d child components that we would prefer<\/em> teams use in these areas, whether through a predetermined list of parts that we know consumers will want, or by paying attention to and adopting repeated usage patterns.<\/p>\n\n\n\n
In our examples so far we know we want to support system-card-description and a new system-card-list as options for this space; we can create those as smaller components or \u201cpartials.\u201d Engineering and design teams can then use those formally adopted and verified options when they fit their needs, and they maintain all of the benefits of using system components over needing to create custom solutions.<\/p>\n\n\n\n
Using these partials might look like this:<\/p>\n\n\n
<SystemCard<\/span><\/span>\n<\/span><\/span>  bannerText<\/span>=\"Featured Location\"<\/span><\/span>\n<\/span><\/span>  imageUrl<\/span>=\"image\/of\/shedd-aquarium.jpg\"<\/span><\/span>\n<\/span><\/span>  imageAlt<\/span>=\"Underwater tunnel at the Shedd Aquarium\"<\/span><\/span>\n<\/span><\/span>  title<\/span>=\"Shedd Aquarium  butonText=\"<\/span>Plan<\/span> Your<\/span> Visit<\/span>\"<\/span>\n<\/span><\/span>  theme<\/span>=\"light-blue\"<\/span><\/span>\n<\/span><\/span>><\/span>\n<\/span><\/span>  <!-- This is our slot --><\/span>\n<\/span><\/span>  <SystemCardDescription<\/span> text<\/span>=\"Look Nature in the Eye.\"<\/span>><\/span>\n<\/span><\/mark>  <!-- This is our slot --><\/span>\n<\/span><\/span><\/SystemCard<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
or:<\/p>\n\n\n
<SystemCard<\/span><\/span>\n<\/span><\/span>  bannerText<\/span>=\"Featured Location\"<\/span><\/span>\n<\/span><\/span>  imageUrl<\/span>=\"image\/of\/shedd-aquarium.jpg\"<\/span><\/span>\n<\/span><\/span>  imageAlt<\/span>=\"Underwater tunnel at the Shedd Aquarium\"<\/span><\/span>\n<\/span><\/span>  title<\/span>=\"Shedd Aquarium  butonText=\"<\/span>Plan<\/span> Your<\/span> Visit<\/span>\"<\/span>\n<\/span><\/span>  theme<\/span>=\"light-blue\"<\/span><\/span>\n<\/span><\/span>><\/span>\n<\/span><\/span>  <!-- This is our slot --><\/span>\n<\/span><\/span>  <SystemCardList<\/span> items<\/span>=\"[array of items]\"<\/span>><\/span>\n<\/span><\/mark>  <!-- This is our slot --><\/span>\n<\/span><\/span><\/SystemCard<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Extending Configuration and Composability for Further Customization<\/strong><\/h2>\n\n\n\n
Using slots and partials for configuration and composition is not limited to single areas within a component either, once you start thinking in this model you can create incredibly flexible components that can support a vast array of different styles and layouts.<\/p>\n\n\n\n
Examining our card component through the lenses of composition and configuration we can create a layout like this.<\/p>\n\n\n
\n
\"An<\/figure>\n<\/div>\n\n\n
The first thing we need to do is identify what pieces are configurable<\/em> and what pieces are composable<\/em>. Configurable elements are typically controlled through attributes, where composable sections are typically slots.<\/p>\n\n\n\n
In our case the location of the .card-media__banner<\/code> can be configurable to either the top or bottom of the image.<\/p>\n\n\n\n
As for composition, we\u2019ve taken the entire system-card-content area and turned it into a slot, allowing users of the component to build out whatever layout meets their needs. In this case we’re putting the button first, followed by the title, a list of details, and social links..<\/p>\n\n\n\n
The component code now looks like this:<\/p>\n\n\n
<template<\/span>><\/span>\n  <article<\/span> class<\/span>=\"system-card\"<\/span>><\/span>\n    <CardMedia<\/span>\n      :bannerText<\/span>=\"bannerText\"<\/span>\n      :bannerLocation<\/span>=\"bannerLocation\"<\/span>\n      :imageUrl<\/span>=\"imageUrl\"<\/span>\n      :imageAlt<\/span>=\"imageAlt\"<\/span>\n    \/><\/span>\n    <div<\/span> class<\/span>=\"system-card-content\"<\/span>><\/span>\n      <slot<\/span> name<\/span>=\"card-content\"<\/span> \/><\/span>\n    <\/div<\/span>><\/span>\n  <\/article<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span> setup<\/span>><\/span>\nimport<\/span> CardMedia from<\/span> \".\/partials\/CardMedia.vue\"<\/span>;\n\ndefineOptions({ name<\/span>: \"SystemCard\"<\/span> });\n\ndefineProps({\n  bannerText<\/span>: { type<\/span>: String<\/span>, default<\/span>: null<\/span> },\n  bannerLocation<\/span>: { type<\/span>: String<\/span>, default<\/span>: \"top\"<\/span> },\n  imageUrl<\/span>: { type<\/span>: String<\/span>, default<\/span>: \"<https:\/\/via.placeholder.com\/350x150>\"<\/span> },\n  imageAlt<\/span>: { type<\/span>: String<\/span>, default<\/span>: \"Card Image\"<\/span> },\n  title<\/span>: { type<\/span>: String<\/span>, default<\/span>: \"Card Title\"<\/span> },\n  description<\/span>: {\n    type<\/span>: String<\/span>,\n    default<\/span>:\n      \"This is a description of the card content. It provides more details about the card.\"<\/span>,\n  },\n  buttonText<\/span>: { type<\/span>: String<\/span>, default<\/span>: \"Learn More\"<\/span> },\n});\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
and in use:<\/p>\n\n\n
<SystemCard<\/span>\n  bannerText<\/span>=\"Escape to the Stars\"<\/span>\n  bannerLocation<\/span>=\"bottom\"<\/span>\n  imageUrl<\/span>=\"image\/of\/adler-planetarium.jpg\"<\/span>\n  imageAlt<\/span>=\"Aerial view or Adler Planetarium\"<\/span>\n><\/span>\n  <SystemButton<\/span> type<\/span>=\"filled\"<\/span> text<\/span>=\"Join Us\"<\/span> iconEnd<\/span>=\"arrow-right\"<\/span> \/><\/span>\n  <SystemCardTitle<\/span> text<\/span>=\"Adler Planetarium\"<\/span> \/><\/span>\n  <SystemCardList<\/span>\n    title<\/span>=\"Upcoming Events and Shows\"<\/span>\n    items<\/span>=\"[array of items]\"<\/span>><\/span>\n    <SystemCardSocials<\/span>\n      facebook<\/span>=\"link.to.social\"<\/span>\n      twitter<\/span>=\"link.to.social\"<\/span>\n      youtube<\/span>=\"link.to.social\"<\/span>\n      instagram<\/span>=\"link.to.social\"<\/span>\n    \/><\/span>\n  <\/SystemCardList<\/span>><\/span>\n<\/SystemCard<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
We\u2019ve moved the banner and image to a new partial we\u2019re importing called CardMedia<\/code> that partial is then passed the prop bannerLocation and determines whether the banner should appear on the top of bottom of the image. Now, because our entire content area is a slot we\u2019ve added multiple elements as children of the SystemCard<\/code>; we\u2019ve got a SystemButton<\/code>, SystemCardTitle<\/code>, SystemCardSocial<\/code>, and our SystemCardList<\/code> from before, in a new layout that we have defined ourselves all while continuing to use the design system without breaking.<\/p>\n\n\n\n
Our final result is a highly adaptable card that supports all of our examples through the use of configuration through props and configuration through custom slots.<\/p>\n\n\n
\n
\"Three<\/figure>\n<\/div>\n\n\n
Turning Principles into Practice<\/strong><\/h2>\n\n\n\n
Supporting multiple brands and use\u2011cases doesn\u2019t have to mean duplicating components or maintaining endless forks of code. By grounding your system in tokens<\/em><\/strong>, <\/strong>composition<\/em><\/strong>, and <\/strong>configuration<\/em><\/strong>, you can keep one core component flexible enough to handle divergent needs.<\/p>\n\n\n\n
    \n
  • Tokens<\/strong>: Centralize design decisions like color, spacing, and typography so brand shifts are a matter of swapping variables or themes, not rewriting CSS.<\/li>\n\n\n\n
  • Composition (slots\/partials)<\/strong>: Create structured areas where teams can plug in approved variations, reducing the need for custom one\u2011offs while still allowing an escape hatch when needed.<\/li>\n\n\n\n
  • Configuration (props\/attributes)<\/strong>: Expose common and repeated options for styles, layouts, and behavior so components adapt without breaking consistency.<\/li>\n<\/ul>\n\n\n\n
    The payoff is huge: fewer bespoke components to maintain, faster delivery across brands, and a system that scales without losing cohesion. Instead of fighting divergence, you\u2019re designing for it, and that\u2019s how systems stay resilient in the real world.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Exploring a Card component made hyper flexible though use of easily changeable custom properties, props, and slots.<\/p>\n","protected":false},"author":39,"featured_media":8081,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[24,108,168,36],"class_list":["post-8041","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-design","tag-design-systems","tag-vue","tag-web-components"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/12\/cards-thumb.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=8041"}],"version-history":[{"count":11,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8041\/revisions"}],"predecessor-version":[{"id":8089,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/8041\/revisions\/8089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/8081"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=8041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=8041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=8041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}