sections/gallery/gallery.html

<md-content layout="column" class="gallery">
  <div layout="row" layout-xs="column" layout-align="space-around center">

    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-body-2">Basic Widgets</span>
        </md-card-header-text>
      </md-card-header>
      <a href="assets/images/gallery/properties_widgets.png"><img ng-src="assets/images/gallery/properties_widgets__th.png" class="md-card-image"></a>
      <md-card-content>
        <p>
          Have a look at some of the basic widgets available in Eclipse EEF.
        </p>
      </md-card-content>
    </md-card>

    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-body-2">Styling</span>
        </md-card-header-text>
      </md-card-header>
      <a href="assets/images/gallery/properties_styling.png"><img ng-src="assets/images/gallery/properties_styling__th.png" class="md-card-image"></a>
      <md-card-content>
        <p>
          Customize the appearance of your user interface in a couple of clicks.
        </p>
      </md-card-content>
    </md-card>

    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-body-2">Validation</span>
        </md-card-header-text>
      </md-card-header>
      <a href="assets/images/gallery/properties_validation.png"><img ng-src="assets/images/gallery/properties_validation__th.png" class="md-card-image"></a>
      <md-card-content>
        <p>
          Configure validation rules to indicate potential errors to your end users.
        </p>
      </md-card-content>
    </md-card>

  </div>

  <div layout="row" layout-xs="column" layout-align="space-around center">

    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-body-2">Quick Fixes</span>
        </md-card-header-text>
      </md-card-header>
      <a href="assets/images/gallery/properties_quickfixes.png"><img ng-src="assets/images/gallery/properties_quickfixes__th.png" class="md-card-image"></a>
      <md-card-content>
        <p>
          Provides quick fixes to let your users fix their errors easily.
        </p>
      </md-card-content>
    </md-card>

    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-body-2">Layout</span>
        </md-card-header-text>
      </md-card-header>
      <a href="assets/images/gallery/properties_layout.png"><img ng-src="assets/images/gallery/properties_layout__th.png" class="md-card-image"></a>
      <md-card-content>
        <p>
          Use container to create a complex layout in your Properties View.
        </p>
      </md-card-content>
    </md-card>

    <md-card>
      <md-card-header>
        <md-card-header-text>
          <span class="md-body-2">Dynamic Mappings</span>
        </md-card-header-text>
      </md-card-header>
      <a href="assets/images/gallery/properties_dynamic_mappings.png"><img ng-src="assets/images/gallery/properties_dynamic_mappings__th.png" class="md-card-image"></a>
      <md-card-content>
        <p>
          Use dynamic mappings to create multiple widgets from one definition.
        </p>
      </md-card-content>
    </md-card>

  </div>

</md-content>