Info Label (Quartz)

<p><div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div>e <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media1_13823a09dd18f8c3ca9ce23d640af30458790e7a4.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13823a09dd18f8c3ca9ce23d640af30458790e7a4.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13823a09dd18f8c3ca9ce23d640af30458790e7a4.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media%5C_13823a09dd18f8c3ca9ce23d640af30458790e7a4.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media_13823a09dd18f8c3ca9ce23d640af30458790e7a4.png?width=750&format=png&optimize=medium</a>" width="248" height="479"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media1_1fb8332223cd7d4e12f60be5b375df8c6ce9c139a.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1fb8332223cd7d4e12f60be5b375df8c6ce9c139a.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1fb8332223cd7d4e12f60be5b375df8c6ce9c139a.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media%5C_1fb8332223cd7d4e12f60be5b375df8c6ce9c139a.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media_1fb8332223cd7d4e12f60be5b375df8c6ce9c139a.png?width=750&format=png&optimize=medium</a>" width="248" height="479"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media1_1b212c9f6b65a1694bd173df4f8e18f397f6dae6b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b212c9f6b65a1694bd173df4f8e18f397f6dae6b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b212c9f6b65a1694bd173df4f8e18f397f6dae6b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media%5C_1b212c9f6b65a1694bd173df4f8e18f397f6dae6b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media_1b212c9f6b65a1694bd173df4f8e18f397f6dae6b.png?width=750&format=png&optimize=medium</a>" width="248" height="479"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media1_19eb87ce3484c661397c4927e4adc6583505d180c.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_19eb87ce3484c661397c4927e4adc6583505d180c.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_19eb87ce3484c661397c4927e4adc6583505d180c.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media%5C_19eb87ce3484c661397c4927e4adc6583505d180c.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/info-label-quartz/media_19eb87ce3484c661397c4927e4adc6583505d180c.png?width=750&format=png&optimize=medium</a>" width="248" height="479"> </picture> </div> </div></p>

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Info Container</strong></div> <div>The container that hosts the optional icon and text of the info label.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Margins and Paddings</strong></div> <div>The spacing between info label elements. These vary depending on the content.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Icon (Optional)</strong></div> <div>The optional icon of the info label.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Label or Number</strong></div> <div>The text or number of the info label.</div> </div>

<div> <div></div> <div>Element</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCB</div> <div>HCW</div> </div> <div> <div><strong>A</strong></div> <div><strong>Info Container</strong></div> <div> <p>height: 1rem;<br>width: auto;<br>border-radius: 0.5rem;</p> <p><strong>Accent 1</strong><br>border: solid 0.0625rem --sapAccentColor1;<br>background: --sapLegendBackgroundColor1;<br>color: --sapTextColor;</p> <p><strong>Accent 2</strong><br>border: solid 0.0625rem --sapAccentColor2;<br>background: --sapLegendBackgroundColor2;<br>color: --sapTextColor;</p> <p><strong>Accent 3</strong><br>border: solid 0.0625rem --sapAccentColor3;<br>background: --sapLegendBackgroundColor3;<br>color: --sapTextColor;</p> <p><strong>Accent 4</strong><br>border: solid 0.0625rem --sapAccentColor4;<br>background: --sapLegendBackgroundColor5;<br>color: --sapTextColor;</p> <p><strong>Accent 5</strong><br>border: solid 0.0625rem --sapAccentColor5;<br>background: --sapLegendBackgroundColor20;<br>color: --sapTextColor;</p> <p><strong>Accent 6</strong><br>border: solid 0.0625rem --sapAccentColor6;<br>background: --sapLegendBackgroundColor6;<br>color: --sapTextColor;</p> <p><strong>Accent 7</strong><br>border: solid 0.0625rem --sapAccentColor7;<br>background: --sapLegendBackgroundColor7;<br>color: --sapTextColor;</p> <p><strong>Accent 8</strong><br>border: solid 0.0625rem --sapLegendColor18;<br>background: --sapLegendBackgroundColor18;<br>color: --sapTextColor;</p> <p><strong>Accent 9</strong><br>border: solid 0.0625rem --sapAccentColor10;<br>background: --sapLegendBackgroundColor10;<br>color: --sapTextColor;</p> <p><strong>Accent 10</strong><br>border: solid 0.0625rem --sapAccentColor9;<br>background: --sapLegendBackgroundColor9;<br>color: --sapTextColor;</p> <p><strong>Display Mode</strong><br>border: none;<br>background: --sapTextColor;<br>color: --sapContent_ContrastTextColor;</p> </div> <div> <p>height: 1rem;<br>width: auto;<br>border-radius: 0.5rem;</p> <p><strong>All Accent Variants</strong><br>border: solid 0.0625rem --sapGroup_ContentBorderColor;<br>background: --sapGroup_ContentBackground;<br>color: --sapTextColor;</p> <p><strong>Display Mode</strong><br>border: solid 0.0625rem --sapGroup_ContentBorderColor;<br>background: --sapGroup_ContentBackground;<br>color: --sapTextColor;</p> </div> </div> <div> <div><strong>B1</strong></div> <div><strong>Padding</strong></div> <div> <p><strong>Numeric Mode</strong><br>padding: 0 0.1875rem;</p> <p><strong>Text Mode</strong><br>padding: 0 0.3125rem;</p> <p><strong>Icon Mode</strong><br>padding: 0 0.1875rem;</p> </div> </div> <div> <div><strong>B2</strong></div> <div><strong>Icon Margin</strong></div> <div><strong>Icon and Label Only</strong><br>margin-right: 0.125rem;</div> </div> <div> <div><strong>C</strong></div> <div><strong>Icon</strong></div> <div>font-size: --sapFontSmallSize;</div> </div> <div> <div><strong>D</strong></div> <div><strong>Label</strong></div> <div>font-size: --sapFontSmallSize;<br>font-weight: bold;<br><del>text-transform: uppercase;</del></div> </div>

<a href="/wiki/pages/viewpage.action?pageId=2036835836">Info Label (Quartz)</a>

Table of Contents

Overview

Look and Feel

Layout and Structure

Specification