docs(ui5-card): Use standard list items in sample (#4973)

Fixes #4955
SAP · Mar 28, 2022 · a85fd1e · a85fd1e
1 parent 304e73b
commit a85fd1e
Showing 1 changed file with 17 additions and 70 deletions.
diff --git a/packages/main/test/samples/Card.sample.html b/packages/main/test/samples/Card.sample.html
@@ -309,44 +309,11 @@ <h3>More Cards</h3>
 		</ui5-card>
 
 		<ui5-card class="small">
-			<ui5-card-header slot="header" title-text="Project Cloud Transformation" subtitle-text="Revenue per Product | EUR" status="3 of 3">
-			</ui5-card-header>
+			<ui5-card-header slot="header" title-text="Project Cloud Transformation" subtitle-text="Revenue per Product | EUR" status="3 of 3"></ui5-card-header>
 			<ui5-list separators="None">
-				<ui5-li-custom>
-					<div class="item">
-						<div class="item-content-begin">
-							<ui5-title level="H5" class="item-content-begin-title">Avantel</ui5-title>
-							<ui5-label>ID234522566-D44</ui5-label>
-						</div>
-						<div>
-							<span class="status-success">27.25K EUR</span>
-						</div>
-					</div>
-				</ui5-li-custom>
-
-				<ui5-li-custom>
-					<div class="item">
-						<div class="item-content-begin">
-							<ui5-title level="H5" class="item-content-begin-title">Telecomunicaciones Star</ui5-title>
-							<ui5-label>ID7125852785-A51</ui5-label>
-						</div>
-						<div>
-							<span class="status-warning">22.89K EUR</span>
-						</div>
-					</div>
-				</ui5-li-custom>
-
-				<ui5-li-custom>
-					<div class="item">
-						<div class="item-content-begin">
-							<ui5-title level="H5" class="item-content-begin-title">Talpa</ui5-title>
-							<ui5-label>ID123555587-I05</ui5-label>
-						</div>
-						<div>
-							<span class="status-error">7.85K EUR</span>
-						</div>
-					</div>
-				</ui5-li-custom>
+				<ui5-li description="ID234522566-D44" additional-text="27.25K EUR" additional-text-state="Success">Avantel</ui5-li>
+				<ui5-li description="ID7125852785-A51" additional-text="22.89K EUR" additional-text-state="Warning">Telecomunicaciones Star</ui5-li>
+				<ui5-li description="ID123555587-I05" additional-text="7.85K EUR" additional-text-state="Error">Talpa</ui5-li>
 			</ui5-list>
 		</ui5-card>
 
@@ -389,44 +356,24 @@ <h3>More Cards</h3>
 	</ui5-list>
 </ui5-card>
 
-<style>
-.content,
-.content-group {
-	display: flex;
-	flex-direction: column;
-	padding-bottom: 1rem;
-}
-</style>
-
-<style>
-.item {display: flex;width: 100%;justify-content: space-between;}
-.item-content-begin {display: flex;flex-direction: column;}
-.item-content-begin-title {padding-bottom: 0.25rem;}
-
-.status-error {color: #b00;}
-.status-warning {color: #e9730c;}
-.status-success {color: #107e3e;}
-</style>
-
 <ui5-card class="small">
-	   <ui5-card-header slot="header" title-text="Project Cloud Transformation" subtitle-text="Revenue per Product | EUR" status="3 of 3">
-	   </ui5-card-header>
+	<ui5-card-header slot="header" title-text="Project Cloud Transformation" subtitle-text="Revenue per Product | EUR" status="3 of 3"></ui5-card-header>
 	<ui5-list separators="None">
-		<ui5-li-custom>
-			<div class="item">
-				<div class="item-content-begin">
-					<ui5-title level="H5" class="item-content-begin-title">Avantel</ui5-title>
-					<ui5-label>ID234522566-D44</ui5-label>
-				</div>
-				<div>
-					<span class="status-success">27.25K EUR</span>
-				</div>
-			</div>
-		</ui5-li-custom>
-		...
+		<ui5-li description="ID234522566-D44" additional-text="27.25K EUR" additional-text-state="Success">Avantel</ui5-li>
+		<ui5-li description="ID7125852785-A51" additional-text="22.89K EUR" additional-text-state="Warning">Telecomunicaciones Star</ui5-li>
+		<ui5-li description="ID123555587-I05" additional-text="7.85K EUR" additional-text-state="Error">Talpa</ui5-li>
 	</ui5-list>
 </ui5-card>
 
+<style>
+	.content,
+	.content-group {
+		display: flex;
+		flex-direction: column;
+		padding-bottom: 1rem;
+	}
+</style>
+
 <ui5-card class="small">
 	<ui5-card-header slot="header" title-text="Dona Maria Moore" subtitle-text="Senior Sales Executive">
 		<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />