diff --git a/app/src/main/java/com/orange/ods/app/ui/components/cards/CardHorizontal.kt b/app/src/main/java/com/orange/ods/app/ui/components/cards/CardHorizontal.kt
index 54e9a6ee7..00f1a0f20 100644
--- a/app/src/main/java/com/orange/ods/app/ui/components/cards/CardHorizontal.kt
+++ b/app/src/main/java/com/orange/ods/app/ui/components/cards/CardHorizontal.kt
@@ -12,6 +12,8 @@
 
 package com.orange.ods.app.ui.components.cards
 
+import android.graphics.drawable.Drawable
+import androidx.appcompat.content.res.AppCompatResources
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -25,9 +27,13 @@ import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import coil.compose.rememberAsyncImagePainter
+import coil.imageLoader
+import coil.request.ImageRequest
 import com.orange.ods.app.R
+import com.orange.ods.app.databinding.OdsHorizontalCardBinding
 import com.orange.ods.app.domain.recipes.LocalRecipes
 import com.orange.ods.app.ui.LocalThemeManager
+import com.orange.ods.app.ui.UiFramework
 import com.orange.ods.app.ui.components.utilities.clickOnElement
 import com.orange.ods.app.ui.utilities.DrawableManager
 import com.orange.ods.app.ui.utilities.code.CodeImplementationColumn
@@ -51,29 +57,64 @@ fun CardHorizontal(customizationState: CardCustomizationState) {
                 .verticalScroll(state = rememberScrollState())
                 .padding(dimensionResource(id = com.orange.ods.R.dimen.spacing_m))
         ) {
+            val title = recipe.title
+            val subtitle = if (hasSubtitle) recipe.subtitle else null
+            val text = if (hasText) recipe.description else null
             val firstButtonText = stringResource(id = R.string.component_element_first_button)
+            val onFirstButtonClick = if (hasFirstButton) {
+                { clickOnElement(context, firstButtonText) }
+            } else null
             val secondButtonText = stringResource(id = R.string.component_element_second_button)
+            val onSecondButtonClick = if (hasSecondButton) {
+                { clickOnElement(context, secondButtonText) }
+            } else null
             val cardText = stringResource(id = R.string.component_card_element_card)
 
-            OdsHorizontalCard(
-                title = recipe.title,
-                image = OdsCard.Image(
-                    rememberAsyncImagePainter(
-                        model = buildImageRequest(context, recipe.imageUrl, darkModeEnabled),
-                        placeholder = painterResource(id = DrawableManager.getPlaceholderResId()),
-                        error = painterResource(id = DrawableManager.getPlaceholderResId(error = true))
-                    ),
-                    ""
-                ),
-                subtitle = if (hasSubtitle) recipe.subtitle else null,
-                text = if (hasText) recipe.description else null,
-                onClick = if (isClickable) {
-                    { clickOnElement(context, cardText) }
-                } else null,
-                firstButton = if (hasFirstButton) OdsCard.Button(firstButtonText) { clickOnElement(context, firstButtonText) } else null,
-                secondButton = if (hasSecondButton) OdsCard.Button(secondButtonText) { clickOnElement(context, secondButtonText) } else null,
-                imagePosition = imagePosition.value,
-                divider = hasDivider
+            val placeholderResId = DrawableManager.getPlaceholderResId()
+            val errorPlaceholderResId = DrawableManager.getPlaceholderResId(error = true)
+
+            UiFramework<OdsHorizontalCardBinding>(
+                compose = {
+                    OdsHorizontalCard(
+                        title = title,
+                        image = OdsCard.Image(
+                            rememberAsyncImagePainter(
+                                model = buildImageRequest(context, recipe.imageUrl, darkModeEnabled),
+                                placeholder = painterResource(id = placeholderResId),
+                                error = painterResource(id = errorPlaceholderResId)
+                            ),
+                            ""
+                        ),
+                        subtitle = subtitle,
+                        text = text,
+                        onClick = if (isClickable) {
+                            { clickOnElement(context, cardText) }
+                        } else null,
+                        firstButton = onFirstButtonClick?.let { OdsCard.Button(firstButtonText, it) },
+                        secondButton = onSecondButtonClick?.let { OdsCard.Button(secondButtonText, it) },
+                        imagePosition = imagePosition.value,
+                        divider = hasDivider
+                    )
+                },
+                xml = {
+                    this.title = title
+                    this.subtitle = subtitle
+                    this.text = text
+
+                    this.firstButtonText = firstButtonText
+                    this.secondButtonText = secondButtonText
+                    odsHorizontalCard.onFirstButtonClick = onFirstButtonClick
+                    odsHorizontalCard.onSecondButtonClick = onSecondButtonClick
+
+                    odsHorizontalCard.image = AppCompatResources.getDrawable(context, placeholderResId)
+                    val onDrawable: (Drawable?) -> Unit = { odsHorizontalCard.image = it }
+                    val request = ImageRequest.Builder(buildImageRequest(context, recipe.imageUrl, darkModeEnabled))
+                        .error(errorPlaceholderResId)
+                        .target(onError = onDrawable, onSuccess = onDrawable)
+                        .build()
+                    context.imageLoader.enqueue(request)
+                    this.imagePosition = this@with.imagePosition.value
+                }
             )
 
             CodeImplementationColumn(
diff --git a/app/src/main/res/layout/ods_horizontal_card.xml b/app/src/main/res/layout/ods_horizontal_card.xml
new file mode 100644
index 000000000..840018715
--- /dev/null
+++ b/app/src/main/res/layout/ods_horizontal_card.xml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Software Name: Orange Design System
+  ~ SPDX-FileCopyrightText: Copyright (c) Orange SA
+  ~ SPDX-License-Identifier: MIT
+  ~
+  ~ This software is distributed under the MIT licence,
+  ~ the text of which is available at https://opensource.org/license/MIT/
+  ~ or see the "LICENSE" file for more details.
+  ~
+  ~ Software description: Android library of reusable graphical components
+  -->
+
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <data>
+
+        <variable
+            name="title"
+            type="String" />
+
+        <variable
+            name="subtitle"
+            type="String" />
+
+        <variable
+            name="text"
+            type="String" />
+
+        <variable
+            name="firstButtonText"
+            type="String" />
+
+        <variable
+            name="secondButtonText"
+            type="String" />
+
+        <variable
+            name="imagePosition"
+            type="com.orange.ods.compose.component.card.OdsCard.Image.Position" />
+    </data>
+
+    <FrameLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <com.orange.ods.xml.component.card.OdsHorizontalCard
+            android:id="@+id/ods_horizontal_card"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:title="@{title}"
+            app:subtitle="@{subtitle}"
+            app:text="@{text}"
+            app:firstButtonText="@{firstButtonText}"
+            app:secondButtonText="@{secondButtonText}"
+            app:odsHorizontalCardImagePosition="@{imagePosition}" />
+
+        <!-- Invisible OdsHorizontalCard used for tests -->
+        <com.orange.ods.xml.component.card.OdsHorizontalCard
+            android:id="@+id/ods_horizontal_card_test"
+            android:visibility="gone"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:title="Card title"
+            app:subtitle="Card subtitle"
+            app:text="Text displayed in the card."
+            app:firstButtonText="First button"
+            app:secondButtonText="Second button"
+            app:imageContentDescription="Content description of the image"
+            app:odsHorizontalCardImagePosition="end" />
+
+    </FrameLayout>
+
+</layout>