diff --git a/tv/tv-material/api/public_plus_experimental_current.txt b/tv/tv-material/api/public_plus_experimental_current.txt
index 44ffb2b..3f5fc27 100644
--- a/tv/tv-material/api/public_plus_experimental_current.txt
+++ b/tv/tv-material/api/public_plus_experimental_current.txt
@@ -92,6 +92,20 @@
     method @androidx.compose.runtime.Composable @androidx.tv.material3.ExperimentalTvMaterial3Api public static void WideClassicCard(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> image, kotlin.jvm.functions.Function0<kotlin.Unit> title, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit> subtitle, optional kotlin.jvm.functions.Function0<kotlin.Unit> description, optional androidx.tv.material3.CardShape shape, optional androidx.tv.material3.CardColors colors, optional androidx.tv.material3.CardScale scale, optional androidx.tv.material3.CardBorder border, optional androidx.tv.material3.CardGlow glow, optional androidx.compose.foundation.layout.PaddingValues contentPadding, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource);
   }
 
+  @androidx.compose.runtime.Immutable @androidx.tv.material3.ExperimentalTvMaterial3Api public final class CardLayoutColors {
+  }
+
+  @androidx.tv.material3.ExperimentalTvMaterial3Api public final class CardLayoutDefaults {
+    method @androidx.compose.runtime.Composable public void ImageCard(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.compose.ui.Modifier modifier, optional androidx.tv.material3.CardShape shape, optional androidx.tv.material3.CardColors colors, optional androidx.tv.material3.CardScale scale, optional androidx.tv.material3.CardBorder border, optional androidx.tv.material3.CardGlow glow, kotlin.jvm.functions.Function0<kotlin.Unit> content);
+    method @androidx.compose.runtime.Composable @androidx.compose.runtime.ReadOnlyComposable public androidx.tv.material3.CardLayoutColors contentColor(optional long contentColor, optional long focusedContentColor, optional long pressedContentColor);
+    field public static final androidx.tv.material3.CardLayoutDefaults INSTANCE;
+  }
+
+  public final class CardLayoutKt {
+    method @androidx.compose.runtime.Composable @androidx.tv.material3.ExperimentalTvMaterial3Api public static void StandardCardLayout(kotlin.jvm.functions.Function1<? super androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Unit> imageCard, kotlin.jvm.functions.Function0<kotlin.Unit> title, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit> subtitle, optional kotlin.jvm.functions.Function0<kotlin.Unit> description, optional androidx.tv.material3.CardLayoutColors contentColor, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource);
+    method @androidx.compose.runtime.Composable @androidx.tv.material3.ExperimentalTvMaterial3Api public static void WideCardLayout(kotlin.jvm.functions.Function1<? super androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Unit> imageCard, kotlin.jvm.functions.Function0<kotlin.Unit> title, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit> subtitle, optional kotlin.jvm.functions.Function0<kotlin.Unit> description, optional androidx.tv.material3.CardLayoutColors contentColor, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource);
+  }
+
   @androidx.compose.runtime.Immutable @androidx.tv.material3.ExperimentalTvMaterial3Api public final class CardScale {
   }
 
diff --git a/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardLayoutScreenshotTest.kt b/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardLayoutScreenshotTest.kt
new file mode 100644
index 0000000..5c6a7ff
--- /dev/null
+++ b/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardLayoutScreenshotTest.kt
@@ -0,0 +1,276 @@
+/*
+ * Copyright 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.tv.material3
+
+import android.os.Build
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.testutils.assertAgainstGolden
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.semantics.SemanticsActions
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.test.captureToImage
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onChild
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.performSemanticsAction
+import androidx.compose.ui.unit.dp
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import androidx.test.filters.MediumTest
+import androidx.test.filters.SdkSuppress
+import androidx.test.screenshot.AndroidXScreenshotTestRule
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+
+@OptIn(ExperimentalTvMaterial3Api::class)
+@MediumTest
+@RunWith(AndroidJUnit4::class)
+@SdkSuppress(minSdkVersion = Build.VERSION_CODES.O)
+class CardLayoutScreenshotTest {
+    @get:Rule
+    val rule = createComposeRule()
+
+    @get:Rule
+    val screenshotRule = AndroidXScreenshotTestRule(TV_GOLDEN_MATERIAL3)
+
+    private val boxSizeModifier = Modifier.size(220.dp, 180.dp)
+    private val standardCardLayoutSizeModifier = Modifier.size(150.dp, 120.dp)
+    private val wideCardLayoutSizeModifier = Modifier.size(180.dp, 100.dp)
+
+    @Test
+    fun standardCardLayout_lightTheme() {
+        rule.setContent {
+            LightMaterialTheme {
+                Box(
+                    modifier = boxSizeModifier.testTag(CardLayoutWrapperTag),
+                    contentAlignment = Alignment.Center
+                ) {
+                    StandardCardLayout(
+                        modifier = standardCardLayoutSizeModifier,
+                        imageCard = { interactionSource ->
+                            CardLayoutDefaults.ImageCard(
+                                onClick = { },
+                                interactionSource = interactionSource
+                            ) {
+                                SampleImage(
+                                    Modifier
+                                        .fillMaxWidth()
+                                        .height(80.dp)
+                                )
+                            }
+                        },
+                        title = { Text("Standard Card") }
+                    )
+                }
+            }
+        }
+
+        assertAgainstGolden("standardCardLayout_lightTheme")
+    }
+
+    @Test
+    fun standardCardLayout_darkTheme() {
+        rule.setContent {
+            DarkMaterialTheme {
+                Box(
+                    modifier = boxSizeModifier.testTag(CardLayoutWrapperTag),
+                    contentAlignment = Alignment.Center
+                ) {
+                    StandardCardLayout(
+                        modifier = standardCardLayoutSizeModifier,
+                        imageCard = { interactionSource ->
+                            CardLayoutDefaults.ImageCard(
+                                onClick = { },
+                                interactionSource = interactionSource
+                            ) {
+                                SampleImage(
+                                    Modifier
+                                        .fillMaxWidth()
+                                        .height(80.dp)
+                                )
+                            }
+                        },
+                        title = { Text("Standard Card") }
+                    )
+                }
+            }
+        }
+
+        assertAgainstGolden("standardCardLayout_darkTheme")
+    }
+
+    @Test
+    fun standardCardLayout_focused() {
+        rule.setContent {
+            Box(
+                modifier = boxSizeModifier
+                    .testTag(CardLayoutWrapperTag)
+                    .semantics(mergeDescendants = true) {},
+                contentAlignment = Alignment.Center
+            ) {
+                StandardCardLayout(
+                    modifier = standardCardLayoutSizeModifier,
+                    imageCard = { interactionSource ->
+                        CardLayoutDefaults.ImageCard(
+                            onClick = { },
+                            interactionSource = interactionSource
+                        ) {
+                            SampleImage(
+                                Modifier
+                                    .fillMaxWidth()
+                                    .height(80.dp)
+                            )
+                        }
+                    },
+                    title = { Text("Standard Card", Modifier.padding(top = 5.dp)) }
+                )
+            }
+        }
+
+        rule.onNodeWithTag(CardLayoutWrapperTag)
+            .onChild()
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+        rule.waitForIdle()
+
+        assertAgainstGolden("standardCardLayout_focused")
+    }
+
+    @Test
+    fun wideCardLayout_lightTheme() {
+        rule.setContent {
+            LightMaterialTheme {
+                Box(
+                    modifier = boxSizeModifier.testTag(CardLayoutWrapperTag),
+                    contentAlignment = Alignment.Center
+                ) {
+                    WideCardLayout(
+                        modifier = wideCardLayoutSizeModifier,
+                        imageCard = { interactionSource ->
+                            CardLayoutDefaults.ImageCard(
+                                onClick = { },
+                                interactionSource = interactionSource
+                            ) {
+                                SampleImage(
+                                    Modifier
+                                        .fillMaxHeight()
+                                        .width(90.dp)
+                                )
+                            }
+                        },
+                        title = { Text("Wide Card", Modifier.padding(start = 8.dp)) },
+                    )
+                }
+            }
+        }
+
+        assertAgainstGolden("wideCardLayout_lightTheme")
+    }
+
+    @Test
+    fun wideCardLayout_darkTheme() {
+        rule.setContent {
+            DarkMaterialTheme {
+                Box(
+                    modifier = boxSizeModifier.testTag(CardLayoutWrapperTag),
+                    contentAlignment = Alignment.Center
+                ) {
+                    WideCardLayout(
+                        modifier = wideCardLayoutSizeModifier,
+                        imageCard = { interactionSource ->
+                            CardLayoutDefaults.ImageCard(
+                                onClick = { },
+                                interactionSource = interactionSource
+                            ) {
+                                SampleImage(
+                                    Modifier
+                                        .fillMaxHeight()
+                                        .width(90.dp)
+                                )
+                            }
+                        },
+                        title = { Text("Wide Card", Modifier.padding(start = 8.dp)) },
+                    )
+                }
+            }
+        }
+
+        assertAgainstGolden("wideCardLayout_darkTheme")
+    }
+
+    @Test
+    fun wideCardLayout_focused() {
+        rule.setContent {
+            Box(
+                modifier = boxSizeModifier
+                    .testTag(CardLayoutWrapperTag)
+                    .semantics(mergeDescendants = true) {},
+                contentAlignment = Alignment.Center
+            ) {
+                WideCardLayout(
+                    modifier = wideCardLayoutSizeModifier,
+                    imageCard = { interactionSource ->
+                        CardLayoutDefaults.ImageCard(
+                            onClick = { },
+                            interactionSource = interactionSource
+                        ) {
+                            SampleImage(
+                                Modifier
+                                    .fillMaxHeight()
+                                    .width(90.dp)
+                            )
+                        }
+                    },
+                    title = { Text("Wide Card", Modifier.padding(start = 8.dp)) },
+                )
+            }
+        }
+
+        rule.onNodeWithTag(CardLayoutWrapperTag)
+            .onChild()
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+        rule.waitForIdle()
+
+        assertAgainstGolden("wideCardLayout_focused")
+    }
+
+    @Composable
+    fun SampleImage(modifier: Modifier = Modifier) {
+        Box(
+            modifier = modifier
+                .background(Color.Blue)
+        )
+    }
+
+    private fun assertAgainstGolden(goldenName: String) {
+        rule.onNodeWithTag(CardLayoutWrapperTag)
+            .captureToImage()
+            .assertAgainstGolden(screenshotRule, goldenName)
+    }
+}
+
+private const val CardLayoutWrapperTag = "card_layout_wrapper"
\ No newline at end of file
diff --git a/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardLayoutTest.kt b/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardLayoutTest.kt
new file mode 100644
index 0000000..f180509
--- /dev/null
+++ b/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardLayoutTest.kt
@@ -0,0 +1,200 @@
+/*
+ * Copyright 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.tv.material3
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.key.Key
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.semantics.SemanticsActions
+import androidx.compose.ui.semantics.SemanticsProperties
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.test.ExperimentalTestApi
+import androidx.compose.ui.test.SemanticsMatcher
+import androidx.compose.ui.test.assert
+import androidx.compose.ui.test.assertHasClickAction
+import androidx.compose.ui.test.assertIsEnabled
+import androidx.compose.ui.test.assertTextEquals
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onChild
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.performKeyInput
+import androidx.compose.ui.test.performSemanticsAction
+import androidx.compose.ui.test.pressKey
+import androidx.compose.ui.unit.dp
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import androidx.test.filters.MediumTest
+import com.google.common.truth.Truth
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+
+@OptIn(
+    ExperimentalTestApi::class,
+    ExperimentalComposeUiApi::class,
+    ExperimentalTvMaterial3Api::class
+)
+@MediumTest
+@RunWith(AndroidJUnit4::class)
+class CardLayoutTest {
+    @get:Rule
+    val rule = createComposeRule()
+
+    @Test
+    fun standardCardLayout_semantics() {
+        val count = mutableStateOf(0)
+        rule.setContent {
+            StandardCardLayout(
+                modifier = Modifier
+                    .semantics(mergeDescendants = true) {}
+                    .testTag(StandardCardLayoutTag),
+                imageCard = { interactionSource ->
+                    CardLayoutDefaults.ImageCard(
+                        onClick = { count.value += 1 },
+                        interactionSource = interactionSource
+                    ) { SampleImage() }
+                },
+                title = { Text("${count.value}") }
+            )
+        }
+
+        rule.onNodeWithTag(StandardCardLayoutTag)
+            .onChild()
+            .assertHasClickAction()
+            .assert(SemanticsMatcher.keyNotDefined(SemanticsProperties.Role))
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+            .assertIsEnabled()
+
+        rule.onNodeWithTag(StandardCardLayoutTag)
+            .assertTextEquals("0")
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+            .assertTextEquals("1")
+    }
+
+    @Test
+    fun standardCardLayout_clickAction() {
+        val count = mutableStateOf(0f)
+        rule.setContent {
+            StandardCardLayout(
+                modifier = Modifier
+                    .semantics(mergeDescendants = true) {}
+                    .testTag(StandardCardLayoutTag),
+                imageCard = { interactionSource ->
+                    CardLayoutDefaults.ImageCard(
+                        onClick = { count.value += 1 },
+                        interactionSource = interactionSource
+                    ) { SampleImage() }
+                },
+                title = { Text("${count.value}") }
+            )
+        }
+
+        rule.onNodeWithTag(StandardCardLayoutTag)
+            .onChild()
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+        Truth.assertThat(count.value).isEqualTo(1)
+
+        rule.onNodeWithTag(StandardCardLayoutTag)
+            .onChild()
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+        Truth.assertThat(count.value).isEqualTo(3)
+    }
+
+    @Test
+    fun wideCardLayout_semantics() {
+        val count = mutableStateOf(0)
+        rule.setContent {
+            WideCardLayout(
+                modifier = Modifier
+                    .semantics(mergeDescendants = true) {}
+                    .testTag(WideCardLayoutTag),
+                imageCard = { interactionSource ->
+                    CardLayoutDefaults.ImageCard(
+                        onClick = { count.value += 1 },
+                        interactionSource = interactionSource
+                    ) { SampleImage() }
+                },
+                title = { Text("${count.value}") }
+            )
+        }
+
+        rule.onNodeWithTag(WideCardLayoutTag)
+            .onChild()
+            .assertHasClickAction()
+            .assert(SemanticsMatcher.keyNotDefined(SemanticsProperties.Role))
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+            .assertIsEnabled()
+
+        rule.onNodeWithTag(WideCardLayoutTag)
+            .assertTextEquals("0")
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+            .assertTextEquals("1")
+    }
+
+    @Test
+    fun wideCardLayout_clickAction() {
+        val count = mutableStateOf(0f)
+        rule.setContent {
+            WideCardLayout(
+                modifier = Modifier
+                    .semantics(mergeDescendants = true) {}
+                    .testTag(WideCardLayoutTag),
+                imageCard = { interactionSource ->
+                    CardLayoutDefaults.ImageCard(
+                        onClick = { count.value += 1 },
+                        interactionSource = interactionSource
+                    ) { SampleImage() }
+                },
+                title = { Text("${count.value}") }
+            )
+        }
+
+        rule.onNodeWithTag(WideCardLayoutTag)
+            .onChild()
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+        Truth.assertThat(count.value).isEqualTo(1)
+
+        rule.onNodeWithTag(WideCardLayoutTag)
+            .onChild()
+            .performSemanticsAction(SemanticsActions.RequestFocus)
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+            .performKeyInput { pressKey(Key.DirectionCenter) }
+        Truth.assertThat(count.value).isEqualTo(3)
+    }
+
+    @Composable
+    fun SampleImage() {
+        Box(
+            Modifier
+                .size(180.dp, 150.dp)
+                .testTag(SampleImageTag)
+        )
+    }
+}
+
+private const val StandardCardLayoutTag = "standard-card-layout"
+private const val WideCardLayoutTag = "wide-card-layout"
+
+private const val SampleImageTag = "sample-image"
\ No newline at end of file
diff --git a/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardTest.kt b/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardTest.kt
index 3ea23a8..68be7c4 100644
--- a/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardTest.kt
+++ b/tv/tv-material/src/androidTest/java/androidx/tv/material3/CardTest.kt
@@ -471,10 +471,8 @@
 }
 
 private const val CardTag = "card"
-private const val StandardCardTag = "standard-card"
 private const val CompactCardTag = "compact-card"
 private const val ClassicCardTag = "classic-card"
-private const val WideCardTag = "wide-card"
 private const val WideClassicCardTag = "wide-classic-card"
 
 private const val SampleImageTag = "sample-image"
\ No newline at end of file
diff --git a/tv/tv-material/src/main/java/androidx/tv/material3/Card.kt b/tv/tv-material/src/main/java/androidx/tv/material3/Card.kt
index 53add8d..1c1fc72 100644
--- a/tv/tv-material/src/main/java/androidx/tv/material3/Card.kt
+++ b/tv/tv-material/src/main/java/androidx/tv/material3/Card.kt
@@ -30,7 +30,6 @@
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -325,19 +324,7 @@
 }
 
 @Composable
-private fun CardContent(
-    title: @Composable () -> Unit,
-    subtitle: @Composable () -> Unit = {},
-    description: @Composable () -> Unit = {},
-    contentColor: Color
-) {
-    CompositionLocalProvider(LocalContentColor provides contentColor) {
-        CardContent(title, subtitle, description)
-    }
-}
-
-@Composable
-private fun CardContent(
+internal fun CardContent(
     title: @Composable () -> Unit,
     subtitle: @Composable () -> Unit = {},
     description: @Composable () -> Unit = {}
@@ -399,22 +386,6 @@
     )
 
     /**
-     * Returns the content color [Color] from the colors [CardColors] for different
-     * interaction states.
-     */
-    internal fun contentColor(
-        focused: Boolean,
-        pressed: Boolean,
-        colors: CardColors
-    ): Color {
-        return when {
-            focused -> colors.focusedContentColor
-            pressed -> colors.pressedContentColor
-            else -> colors.contentColor
-        }
-    }
-
-    /**
      * Creates a [CardShape] that represents the default container shapes used in a Card.
      *
      * @param shape the default shape used when the Card has no other [Interaction]s.
diff --git a/tv/tv-material/src/main/java/androidx/tv/material3/CardLayout.kt b/tv/tv-material/src/main/java/androidx/tv/material3/CardLayout.kt
new file mode 100644
index 0000000..92aa581
--- /dev/null
+++ b/tv/tv-material/src/main/java/androidx/tv/material3/CardLayout.kt
@@ -0,0 +1,288 @@
+/*
+ * Copyright 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.tv.material3
+
+import androidx.compose.foundation.interaction.Interaction
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+
+/**
+ * [StandardCardLayout] is an opinionated TV Material Card layout with an image and text content
+ * to show information about a subject.
+ *
+ * It provides a vertical layout with an image card slot at the top. And below that, there are
+ * slots for the title, subtitle and description.
+ *
+ * @param imageCard defines the [Composable] to be used for the image card. See
+ * [CardLayoutDefaults.ImageCard] to create an image card. The `interactionSource` param provided
+ * in the lambda function should be forwarded and used with the image card composable.
+ * @param title defines the [Composable] title placed below the image card in the CardLayout.
+ * @param modifier the [Modifier] to be applied to this CardLayout.
+ * @param subtitle defines the [Composable] supporting text placed below the title in CardLayout.
+ * @param description defines the [Composable] description placed below the subtitle in CardLayout.
+ * @param contentColor [CardLayoutColors] defines the content color used in the CardLayout
+ * for different interaction states. See [CardLayoutDefaults.contentColor].
+ * @param interactionSource the [MutableInteractionSource] representing the stream of [Interaction]s
+ * for this CardLayout. You can create and pass in your own `remember`ed instance to observe
+ * [Interaction]s and customize the appearance / behavior of this card layout in different states.
+ * This interaction source param would also be forwarded to be used with the `imageCard` composable.
+ */
+@ExperimentalTvMaterial3Api
+@Composable
+fun StandardCardLayout(
+    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
+    title: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    subtitle: @Composable () -> Unit = {},
+    description: @Composable () -> Unit = {},
+    contentColor: CardLayoutColors = CardLayoutDefaults.contentColor(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
+) {
+    val focused by interactionSource.collectIsFocusedAsState()
+    val pressed by interactionSource.collectIsPressedAsState()
+
+    Column(
+        modifier = modifier
+    ) {
+        Box(
+            contentAlignment = CardDefaults.ContentImageAlignment,
+        ) {
+            imageCard(interactionSource)
+        }
+        Column(
+            modifier = Modifier
+                .align(Alignment.CenterHorizontally),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            CardLayoutContent(
+                title = title,
+                subtitle = subtitle,
+                description = description,
+                contentColor = contentColor.color(
+                    focused = focused,
+                    pressed = pressed
+                )
+            )
+        }
+    }
+}
+
+/**
+ * [WideCardLayout] is an opinionated TV Material Card layout with an image and text content
+ * to show information about a subject.
+ *
+ * It provides a horizontal layout with an image card slot at the start, followed by the title,
+ * subtitle and description at the end.
+ *
+ * @param imageCard defines the [Composable] to be used for the image card. See
+ * [CardLayoutDefaults.ImageCard] to create an image card. The `interactionSource` param provided
+ * in the lambda function should to be forwarded and used with the image card composable.
+ * @param title defines the [Composable] title placed below the image card in the CardLayout.
+ * @param modifier the [Modifier] to be applied to this CardLayout.
+ * @param subtitle defines the [Composable] supporting text placed below the title in CardLayout.
+ * @param description defines the [Composable] description placed below the subtitle in CardLayout.
+ * @param contentColor [CardLayoutColors] defines the content color used in the CardLayout
+ * for different interaction states. See [CardLayoutDefaults.contentColor].
+ * @param interactionSource the [MutableInteractionSource] representing the stream of [Interaction]s
+ * for this CardLayout. You can create and pass in your own `remember`ed instance to observe
+ * [Interaction]s and customize the appearance / behavior of this card layout in different states.
+ * This interaction source param would also be forwarded to be used with the `imageCard` composable.
+ */
+@ExperimentalTvMaterial3Api
+@Composable
+fun WideCardLayout(
+    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
+    title: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    subtitle: @Composable () -> Unit = {},
+    description: @Composable () -> Unit = {},
+    contentColor: CardLayoutColors = CardLayoutDefaults.contentColor(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
+) {
+    val focused by interactionSource.collectIsFocusedAsState()
+    val pressed by interactionSource.collectIsPressedAsState()
+
+    Row(
+        modifier = modifier
+    ) {
+        Box(
+            contentAlignment = CardDefaults.ContentImageAlignment
+        ) {
+            imageCard(interactionSource)
+        }
+        Column {
+            CardLayoutContent(
+                title = title,
+                subtitle = subtitle,
+                description = description,
+                contentColor = contentColor.color(
+                    focused = focused,
+                    pressed = pressed
+                )
+            )
+        }
+    }
+}
+
+@Composable
+internal fun CardLayoutContent(
+    title: @Composable () -> Unit,
+    subtitle: @Composable () -> Unit = {},
+    description: @Composable () -> Unit = {},
+    contentColor: Color
+) {
+    CompositionLocalProvider(LocalContentColor provides contentColor) {
+        CardContent(title, subtitle, description)
+    }
+}
+
+@ExperimentalTvMaterial3Api
+object CardLayoutDefaults {
+    /**
+     * Creates [CardLayoutColors] that represents the default content colors used in a
+     * CardLayout.
+     *
+     * @param contentColor the default content color of this CardLayout.
+     * @param focusedContentColor the content color of this CardLayout when focused.
+     * @param pressedContentColor the content color of this CardLayout when pressed.
+     */
+    @ReadOnlyComposable
+    @Composable
+    fun contentColor(
+        contentColor: Color = MaterialTheme.colorScheme.onSurface,
+        focusedContentColor: Color = contentColor,
+        pressedContentColor: Color = focusedContentColor
+    ) = CardLayoutColors(
+        contentColor = contentColor,
+        focusedContentColor = focusedContentColor,
+        pressedContentColor = pressedContentColor
+    )
+
+    /**
+     * [ImageCard] is basically a [Card] composable with an image as the content. It is recommended
+     * to be used with the different CardLayout(s).
+     *
+     * This Card handles click events, calling its [onClick] lambda.
+     *
+     * @param onClick called when this card is clicked
+     * @param interactionSource the [MutableInteractionSource] representing the stream of
+     * [Interaction]s for this card. When using with the CardLayout(s), it is recommended to
+     * pass in the interaction state obtained from the parent lambda.
+     * @param modifier the [Modifier] to be applied to this card
+     * @param shape [CardShape] defines the shape of this card's container in different interaction
+     * states. See [CardDefaults.shape].
+     * @param colors [CardColors] defines the background & content colors used in this card for
+     * different interaction states. See [CardDefaults.colors].
+     * @param scale [CardScale] defines size of the card relative to its original size for different
+     * interaction states. See [CardDefaults.scale].
+     * @param border [CardBorder] defines a border around the card for different interaction states.
+     * See [CardDefaults.border].
+     * @param glow [CardGlow] defines a shadow to be shown behind the card for different interaction
+     * states. See [CardDefaults.glow].
+     * @param content defines the image content [Composable] to be displayed inside the Card.
+     */
+    @Composable
+    fun ImageCard(
+        onClick: () -> Unit,
+        interactionSource: MutableInteractionSource,
+        modifier: Modifier = Modifier,
+        shape: CardShape = CardDefaults.shape(),
+        colors: CardColors = CardDefaults.colors(),
+        scale: CardScale = CardDefaults.scale(),
+        border: CardBorder = CardDefaults.border(),
+        glow: CardGlow = CardDefaults.glow(),
+        content: @Composable () -> Unit
+    ) {
+        Card(
+            onClick = onClick,
+            modifier = modifier,
+            shape = shape,
+            colors = colors,
+            scale = scale,
+            border = border,
+            glow = glow,
+            interactionSource = interactionSource
+        ) {
+            content()
+        }
+    }
+}
+
+/**
+ * Represents the [Color] of content in a CardLayout for different interaction states.
+ */
+@ExperimentalTvMaterial3Api
+@Immutable
+class CardLayoutColors internal constructor(
+    internal val contentColor: Color,
+    internal val focusedContentColor: Color,
+    internal val pressedContentColor: Color,
+) {
+    /**
+     * Returns the content color [Color] for different interaction states.
+     */
+    internal fun color(
+        focused: Boolean,
+        pressed: Boolean
+    ): Color {
+        return when {
+            focused -> focusedContentColor
+            pressed -> pressedContentColor
+            else -> contentColor
+        }
+    }
+
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other == null || this::class != other::class) return false
+
+        other as CardLayoutColors
+
+        if (contentColor != other.contentColor) return false
+        if (focusedContentColor != other.focusedContentColor) return false
+        if (pressedContentColor != other.pressedContentColor) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = contentColor.hashCode()
+        result = 31 * result + focusedContentColor.hashCode()
+        result = 31 * result + pressedContentColor.hashCode()
+        return result
+    }
+
+    override fun toString(): String {
+        return "CardLayoutContentColor(" +
+            "contentColor=$contentColor, " +
+            "focusedContentColor=$focusedContentColor, " +
+            "pressedContentColor=$pressedContentColor)"
+    }
+}