Fundamentals Prototype HTML

<section class="fd-section">

  <div class="fd-panel">
    <div class="fd-panel__header">
      <div class="fd-panel__head">
        <h1 class="fd-panel__title">Details</h1>
      </div>
      <div class="fd-panel__actions">
        <span class="fd-status-label fd-status-label--away">Not Deployed</span>
      </div>
    </div>
    <div class="fd-panel__body">

      <div class="fd-container">
        <div class="fd-col--4">
          <div class="fd-form__set">
            <div class="fd-form__item">
              <label class="fd-form__label" for="111">Publisher</label>
              <select class="fd-select fd-form__control" id="111">
                <option value="">Select Publisher</option>
                <option value="">Option 1</option>
                <option value="">Option 2</option>
                <option value="">Option 3</option>
              </select>
            </div>
          </div>
        </div><!-- /.fd-col -->

        <div class="fd-col--4">
          <div class="fd-form__set">
            <div class="fd-form__item">
              <label class="fd-form__label" for="222">Type</label>
              <select class="fd-select fd-form__control" id="222">
                <option value="">No Types Configured</option>
                <option value="">Option 1</option>
                <option value="">Option 2</option>
                <option value="">Option 3</option>
              </select>
            </div>
          </div>
        </div><!-- /.fd-col -->

      </div><!-- /.fd-container -->

      <div class="fd-container">
        <div class="fd-col--4">
          <div class="fd-form__set">
            <div class="fd-form__item">
              <label class="fd-form__label" for="333">Subscriber</label>
              <select class="fd-select fd-form__control" id="333">
                <option value="">Select Subscriber</option>
                <option value="">Option 1</option>
                <option value="">Option 2</option>
                <option value="">Option 3</option>
              </select>
            </div>
          </div>
        </div><!-- /.fd-col -->

      </div><!-- /.fd-container -->

    </div><!-- /.fd-panel__body -->
  </div><!-- /.fd-panel -->

</section><!-- /.fd-section -->

<section class="fd-section">

  <div class="fd-panel">
    <div class="fd-panel__header">
      <div class="fd-panel__head">
        <h1 class="fd-panel__title">Configuration</h1>
      </div>
      <div class="fd-panel__actions">
        <button class="fd-button fd-button--secondary" disabled>Review/Edit iFlow</button>
      </div>
    </div>
    <div class="fd-panel__body">

      <div class="fd-container">
        <div class="fd-col--4">
          <div class="fd-form__set">
            <div class="fd-form__item">
              <label class="fd-form__label" for="444">iFlow</label>
              <input type="text" class="fd-input fd_form__control" id="444" placeholder="Specify iFlow Name">
            </div>
          </div>
        </div><!-- /.fd-col -->

        <div class="fd-col--4">
          <div class="fd-form__set">
            <div class="fd-form__item">
              <label class="fd-form__label" for="555">Version</label>
              <input type="text" class="fd-input fd_form__control" id="555" placeholder="Specify Version">
            </div>
          </div>
        </div><!-- /.fd-col -->

      </div><!-- /.fd-container -->

      <div class="fd-container">
        <div class="fd-col--12">
          <div class="fd-form__set">
            <div class="fd-form__item">
              <label class="fd-form__label" for="666">Integration Flow Details Description</label>
              <input type="text" class="fd-input fd_form__control" placeholder="Specify Integration Flow Details Description" id="666">
            </div>
          </div>
        </div><!-- /.fd-col -->

      </div><!-- /.fd-container -->

    </div><!-- /.fd-panel__body -->
  </div><!-- /.fd-panel -->

</section><!-- /.fd-section -->

<section class="fd-section">

  <div class="fd-panel">
    <div class="fd-panel__header">
      <div class="fd-panel__head">
        <h1 class="fd-panel__title">External Parameters*</h1>
      </div>
    </div>
    <div class="fd-panel__body">

      <div class="fd-container">
        <div class="fd-col--12">
          [Content Here]
        </div><!-- /.fd-col -->
      </div><!-- /.fd-container -->

    </div><!-- /.fd-panel__body -->
  </div><!-- /.fd-panel -->

</section><!-- /.fd-section -->

<section class="fd-section">

  <div class="fd-panel">
    <div class="fd-panel__body">

      <div class="fd-container">
        <div class="fd-col--12">
          <button class="fd-button fd-button--pirmary" disabled>Save</button>
          <button class="fd-button fd-button--main" disabled>Deploy</button>
        </div><!-- /.fd-col -->
      </div><!-- /.fd-container -->

    </div><!-- /.fd-panel__body -->
  </div><!-- /.fd-panel -->

</section><!-- /.fd-section -->