<section cds-layout="vertical gap:lg">
<cds-input layout="vertical" control-width="shrink">
<label>text label</label>
<input placeholder="placeholder text" />
<cds-control-message>message</cds-control-message>
</cds-input>
<cds-checkbox-group layout="vertical-inline">
<label>checkbox group label</label>
<cds-checkbox>
<label>checkbox 1</label>
<input type="checkbox" checked />
</cds-checkbox>
<cds-checkbox>
<label>checkbox 2</label>
<input type="checkbox" />
</cds-checkbox>
<cds-checkbox>
<label>checkbox 3</label>
<input type="checkbox" />
</cds-checkbox>
</cds-checkbox-group>
<cds-button>
<cds-icon shape="user"></cds-icon>primary<cds-badge>10</cds-badge>
</cds-button>
<div cds-layout="horizontal gap:lg align:vertical-center">
<cds-progress-circle size="xl" status="info"></cds-progress-circle>
<cds-tag status="info">
<cds-icon shape="info-standard"></cds-icon>Info <cds-badge status="info">10</cds-badge>
</cds-tag>
<cds-icon shape="user" size="lg" badge="info"></cds-icon>
</div>
</section>