Grid ready

Grid component provides structure for other components using Flexbox based layout system. Grid doesn’t provide customizable options at the moment.

Examples

Open in new window

<duet-grid>
  <duet-input expand label="Etunimi" placeholder="Matti"></duet-input>
  <duet-input expand label="Sukunimi" placeholder="Meikäläinen"></duet-input>
</duet-grid>

Open in new window

<duet-grid>
  <duet-input expand label="Username" placeholder="user@example.com"></duet-input>
  <duet-input expand label="Password" placeholder="password"></duet-input>
  <duet-spacer size="small"></duet-spacer>
  <duet-button variation="primary">Login</duet-button>
</duet-grid>

Integration

For integration, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.