LightTheme

text label message checkbox group label checkbox 1 checkbox 2 checkbox 3 primary10

Info 10

       <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>
      

DarkTheme

text label message checkbox group label checkbox 1 checkbox 2 checkbox 3 primary10

Info 10

       <section cds-theme="dark" 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>