Product Selector

Fusion 5.9
    Fusion 5.9

    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>