How To
Documentation
    Learn More

      Result List

      Default

      The default result list shows all the fields

      Example

      <search:result-list response="smallResponse"></search:result-list>

      List

      Full width list of results

      Example

      <search:result-list response="smallResponse">
          <search:result>
              <layout:grid>
                  <layout:block md="1-4" padding-right="1">
                      <img src="{{ result | field:'photo' | actual }}" alt="">
                  </layout:block>
                  <layout:block md="3-4">
                      <search:field name="full_name" styling="title"></search:field>
                      <search:field name="year" label="Year" styling="label-inline"></search:field>
                      <search:field name="gender" label="Gender" styling="label-inline"></search:field>
                      <search:field name="Prize Category" styling="label-inline"></search:field>
                      <br>
                      <search:field name="motivation" styling="description"></search:field>
                      <search:field name="details_url" styling="url description" prefix="http://nobel.divedeeper.io" urlfield="details_url" url-prefix="http://nobel.divedeeper.io"></search:field>
                  </layout:block>
              </layout:grid>
          </search:result>
      </search:result-list>

      Cards

      Result cards that can be shown in a row

      Example

      <search:result-list response="response" styling="cards-md-2 cards-xl-3">
          <search:result>
              <layout:grid>
                  <layout:block md="1-4" padding-right="1">
                      <img src="{{ result | field:'photo' | actual }}" alt="">
                  </layout:block>
                  <layout:block md="3-4">
                      <search:field name="full_name" styling="title"></search:field>
                      <search:field name="year" label="Year" styling="label-inline"></search:field>
                      <search:field name="gender" label="Gender" styling="label-inline"></search:field>
                      <search:field name="Prize Category" styling="label-inline"></search:field>
                      <br>
                      <search:field name="motivation" styling="description"></search:field>
                      <search:field name="details_url" styling="url description" prefix="http://nobel.divedeeper.io" urlfield="details_url" url-prefix="http://nobel.divedeeper.io" target="_blank"></search:field>
                  </layout:block>
              </layout:grid>
          </search:result>
      </search:result-list>

      Card Emphasis

      A result card with a little more border

      Example

      <search:result-list response="smallResponse" styling="cards-md-2">
          <search:result styling="card-emphasis">
              <layout:grid>
                  <layout:block md="1-4" padding-right="1">
                      <img src="{{ result | field:'photo' | actual }}" alt="">
                  </layout:block>
                  <layout:block md="3-4">
                      <search:field name="full_name" styling="title"></search:field>
                      <search:field name="year" label="Year" styling="label-inline"></search:field>
                      <search:field name="gender" label="Gender" styling="label-inline"></search:field>
                      <search:field name="Prize Category" styling="label-inline"></search:field>
                      <br>
                      <search:field name="motivation" styling="description"></search:field>
                      <search:field name="details_url" styling="url description" prefix="http://nobel.divedeeper.io" urlfield="details_url" url-prefix="http://nobel.divedeeper.io" target="_blank"></search:field>
                  </layout:block>
              </layout:grid>
          </search:result>
      </search:result-list>

      Card Shadow

      Add a small drop shadow

      Example

      <search:result-list response="smallResponse" styling="cards-md-2">
          <search:result styling="card-shadow">
              <layout:grid>
                  <layout:block md="1-4" padding-right="1">
                      <img src="{{ result | field:'photo' | actual }}" alt="">
                  </layout:block>
                  <layout:block md="3-4">
                      <search:field name="full_name" styling="title"></search:field>
                      <search:field name="year" label="Year" styling="label-inline"></search:field>
                      <search:field name="gender" label="Gender" styling="label-inline"></search:field>
                      <search:field name="Prize Category" styling="label-inline"></search:field>
                      <br>
                      <search:field name="motivation" styling="description"></search:field>
                      <search:field name="details_url" styling="url description" prefix="http://nobel.divedeeper.io" urlfield="details_url" url-prefix="http://nobel.divedeeper.io" target="_blank"></search:field>
                  </layout:block>
              </layout:grid>
          </search:result>
      </search:result-list>

      Card Step

      A result card with a slightly raised edge

      Example

      <search:result-list response="smallResponse" styling="cards-md-2">
          <search:result styling="card-step">
              <layout:grid>
                  <layout:block md="1-4" padding-right="1">
                      <img src="{{ result | field:'photo' | actual }}" alt="">
                  </layout:block>
                  <layout:block md="3-4">
                      <search:field name="full_name" styling="title"></search:field>
                      <search:field name="year" label="Year" styling="label-inline"></search:field>
                      <search:field name="gender" label="Gender" styling="label-inline"></search:field>
                      <search:field name="Prize Category" styling="label-inline"></search:field>
                      <br>
                      <search:field name="motivation" styling="description"></search:field>
                      <search:field name="details_url" styling="url description" prefix="http://nobel.divedeeper.io" urlfield="details_url" url-prefix="http://nobel.divedeeper.io" target="_blank"></search:field>
                  </layout:block>
              </layout:grid>
          </search:result>
      </search:result-list>