index.html

The following is the sample of the index.html file.

<div class="example-page" style="display: none">
    <div class="oap-api-catalog-list-container oap-page-content" id="oap-api-catalog-list-container" style="top: 70.3333px;">
        <div class="oap-page-header oap-api-list-outer" style="padding-top: 0">
            <h2 style="display: inline-block">Top APIs</h2>
            <button style="float: right; position: relative; top: 10px" class="oap-button-blue oap-cursor-pointer" data-bind="oapButton: {text: 'View All APIs', icons: {end: 'oap-alta-font-icon oap-alta-icon-caret03-e'}}, oapLink:{module:'api.catalog'}"/>
            <ul class="api-list" role="grid" data-bind="foreach: apis">
                <li class="api-item">
                    <div class="api-section" role="gridcell">
                        <span class="api-section-icon">
                            <!-- ko ifnot: $data.icon -->
                            <span aria-hidden="true" class="oap-button-icon oap-button-icon-start oap-image-api-symbol"></span>
                            <!-- /ko -->
                            <!-- ko if: $data.icon -->
                            < img class="oap-api-custom-symbol" data-bind="attr: {src: $data.icon}" />
                            <  !-- /ko -->
                        </span>
                        <span class="api-section-title" data-bind="text: name"/>
                        <span class="api-section-description" data-bind="text: description"/>
                        <a class="api-section-link" data-bind="oapLink: {module:'api.details', params: {path: {vanityName: $data.vanityName, section: 'overview'}}}, title: 'View API Documentation'" target="_blank">View API Documentation</a>
                    </div>
                </li>
            </ ul>
            <a data-bind="attr:{href: developersGuide}" title="Developer's Guide" target="DevGuide">View Developer's Guide</a>
        </div>
    </div>
</div>