ipsos-components/src/demo-app/baseline/baseline-demo.html

Material Design components for Angular

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Basic Forms</mat-toolbar>
  <mat-card-content>
    Text Before |
    <mat-checkbox>Checkbox Label</mat-checkbox>
    | Text 1 |
    <mat-radio-button value="option_1">Radio 1</mat-radio-button>
    | Text 2 |
    <mat-radio-button value="option_2">Radio 2</mat-radio-button>
    | Text 3 |
    <mat-radio-button value="option_3">Radio 3</mat-radio-button>
    | Text 4 |
    <mat-form-field>
      <input matInput placeholder="Input" value="Text Input">
    </mat-form-field>
    | Text 5 |
    <mat-form-field>
      <mat-select placeholder="This placeholder is really really really long">
        <mat-option value="option">Option</mat-option>
        <mat-option value="long">This option is really really really long</mat-option>
      </mat-select>
    </mat-form-field>
    | Text 6 |
    <mat-form-field>
      <textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
    </mat-form-field>
    | Text After
  </mat-card-content>
</mat-card>

<mat-card class="demo-card demo-basic">
  <mat-toolbar color="primary">Headers</mat-toolbar>
  <mat-card-content>
    <h1>
      Text Before |
      <mat-checkbox>Checkbox Label</mat-checkbox>
      | Text 1 |
      <mat-radio-button value="option_1">Radio 1</mat-radio-button>
      | Text 2 |
      <mat-radio-button value="option_2">Radio 2</mat-radio-button>
      | Text 3 |
      <mat-radio-button value="option_3">Radio 3</mat-radio-button>
      | Text 4 |
      <mat-form-field>
        <input matInput placeholder="Input" value="Text Input">
      </mat-form-field>
      | Text 5 |
      <mat-form-field>
        <mat-select placeholder="This placeholder is really really really long">
          <mat-option value="option">Option</mat-option>
          <mat-option value="long">This option is really really really long</mat-option>
        </mat-select>
      </mat-form-field>
      | Text 6 |
      <mat-form-field>
        <textarea matInput placeholder="Input" matTextareaAutosize>Textarea&#10;Line 2</textarea>
      </mat-form-field>
      | Text After
    </h1>
  </mat-card-content>
</mat-card>