Example Component Using UI Patterns Mapping

What's Inside a Component and How to Use It

Let's take an example of the Tailpine Card Style One component and explain in detail how it is created and how to use it.

The Card Style One component is designed to display individual cards in a clean, structured, and visually appealing layout. It focuses on presenting key content elements such as an image, title, and subtitle, making it ideal for showcasing featured posts, services, or team members.

Component Configuration File

The .component.yml file is the main configuration file for every SDC. It tells Drupal everything it needs to know about the component.

File: cardonestyle.component.yml

yaml
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Card Style One
status: stable
description: "Cards are used to group and display content in a way that is easily readable."
group: Cards & Posts
props:
  type: object
  properties:
    imageurl:
      type: string
      description: "The URL of the image to be used in the card."
      title: "Image URL"
slots:
  title:
    type: string
    title: Title
    description: "Name of the card. Plain text."
  Subtitle:
    type: string
    title: Subtitle
    description: "Subtitle of the card. Plain text."

Key Definitions

  • name → The internal name of the component (how it appears in the Drupal UI)

  • status → Indicates the component's stability (stable, experimental, etc.)

  • description → A human-readable explanation of the component's purpose

  • group → Groups related components together (for example, "Cards & Posts") to organize your component library

  • props → Defines structured data inputs (properties) that the component expects — such as imageurl. These are typically passed programmatically

  • slots → Defines content placeholders (for text or markup) inserted into the Twig template. These can contain plain text or rendered HTML

Twig Template

File: cardonestyle.twig

This file demonstrates how users can implement and render the prop and slot values defined in the component's YAML configuration.

twig
<div style="background-image:url('{{imageurl}}')" 
{{attributes.addClass("wrapper__card relative min-h-100  bg-cover bg-center  overflow-hidden  flex flex-col justify-end gap-4 text-body-bg")}}>
<div class="absolute inset-0 bg-gradient-to-t from-body via-body/15 to-transparent z-0"></div>
               <button class="z-10 ml-[clamp(20px,1.5vw,25px)]  w-fit px-2 py-2 grid place-items-center bg-primary text-sm font-semibold rounded-md">{{subtitle}}</button>
               <h2 class="z-10 ml-[clamp(20px,1.5vw,25px)] mb-[clamp(20px,1.5vw,25px)]   text-xl font-bold h-fit">{{title}}</h2>
           </div>

This file (cardonestyle.twig) contains:

  • Dynamic variables (title, subtitle, imageurl)

  • Drupal attribute handling ({{ attributes.addClass() }})

  • Tailwind-based structure and design

  • No business logic — purely visual markup

In this component no js or css file is needed for now.

How to Use This Component for Drupal Structure

Step 1: Create Content Structure

First you have to create a block type or a paragraph type for cardstyleone component. First you need to check the props and slots variables available. In this case one prop (the imageurl) is available and two slots are there (title and subtitle). Create the fields accordingly like for image url a media field and for title and subtitle create the plain text or long or formatted text field.

Step 2: Configure Layout Builder

Click on manage display, in layout option check the checkbox "use layout builder" and save it. It will add the manage layout button for mapping the component with the SDC then click on it.

Click on add section if configuration is already available kindly remove it first and then click on add section. It will open a right sidebar on the screen where all the component will be available. You have to search for the required component.

Step 3: Map Component Properties

When you select the required component first of all the props will be available on the screen directly (i.e., in this case the image url and attributes). Just do mapping for them.

When props mapping is done click on add section. Now on the main layout the slots are shown in the format of add block. Now you have to add the fields or map the other fields through add block. Clicking on the add block then search for the specific field you want to link it with the slot.

First block is for title so select the title for mapping. Repeat the same method for the subtitle. At the end click on save layout.

Now when you add content to the paragraph type or the block, it will show the dynamic data from the content in the form of card component on the Drupal site.