Browsing / Lists

Example: Results Lists (no filters)

  • Past Event Name

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Date
  • Policy Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Last Updated: Date

Code

HTML

<ul class="result-set no-margin list-unstyled no-background">
    <li class="card-result">
        <h4 class="coveo-title"><a href="#">Past Event Name</a></h4>
        <div class="result-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
        <div class="result-meta">
            <span class="result-meta-item">Date</span>
        </div>
    </li>
</ul>
                

Documentation

Problem Being Solved

Users need to view a dynamic set of content.

When To Use

The result list should be used to display content that is dynamic, but simple or short enough that the user does not need to filter it, e.g., CFA Program Policies.

When Not To use

The result list should not be used for complex results where the user would benefit from being able to filter.

Formatting

  • Browse lists are likely to originate from Coveo. We will do our best to standardize the look and feel with their code.
  • This type of list should be placed in a standard content well.

Example: Filtered Results

Filters

Issue Brief filters: Article series, Book series, Multimedia series

Press Release filters: Year (Date), Country/Region (Location)

Prep Provider filters: Provider type, Course format, Country/Region (Location)

CPD Content filters (FAJ, Online Courses, etc): Topic, CE, Article series, Book series, Multimedia series, Multimedia type, Multimedia category

Conference filters: Topic (Session topic tag), Hosted by, Country/Region (Location)

Webinar filters: Topic (auto-tags, high relevance), Hosted by

Current Sanction filters: Sanctioned Person (Title), Country/Region (Location), Sanction type

Comment Letter filters: Topic (auto-tags, high relevance), Year (Date filed), Submitted to

Society filters: Global Passport Program, Country/Region (Location)

Waiver filters: Program, Country/Region (Location), Waiver type

Affiliated University filters: Country/Region (Location)

Refresher Reading filters: Curriculum topic, Curriculum year, Exam level

XXX Results
  • Issue Brief Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Author Name Author Name Author Name Date
  • Press Release Title

    Date Location
  • Prep Provider Name

    Online In-Person
  • Media Type Series

    CPD Browse Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Date Author Name Author Name Author Name
    5 0.25
  • FAJ Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Date Author Name Author Name Author Name
    5 0.25
  • Online Course Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Date Author Name Author Name Author Name
    5
  • Conference Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Date Location
    Hosted By Place 1 Place 2
    5
  • Webinar Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Date/Time
    Hosted By Place 1 Place 2
    5
  • Sanctioned Person Name
    Location Type Date

    Violation. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Violation Detail. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Response. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • Comment Letter Title (PDF)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Date
  • CityCountry
  • Waiver Title

    Program Level Location
    Waiver type What is being waived
    Waiver Details

    Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Additional Information

    Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • Affiliated University Name

    CityCountry
    Degree Programs:

    Program
    Program
    Program

  • Refresher Reading Title

    Topics Year Program Level
    2.5

Code

HTML

<ul class="result-set no-margin list-unstyled no-background">
    <li id="CPD" class="card-result">
        <div class="result-meta">
            <span class="result-meta-item">Media Type</span>
            <span class="result-meta-item">Series</span>
        </div>
        <h4 class="coveo-title"><a href="#">CPD Browse Title</a></h4>
        <div class="result-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
        <div class="result-meta">
            <span class="result-meta-item">Date</span>
            <span class="result-meta-item">
                <span class="author">Author Name</span>
                <span class="author">Author Name</span>
                <span class="author">Author Name</span>
            </span>
        </div>
        <div class="result-meta">
            <span class="tag">
                <span class="ce-credit">5</span>
                <span class="ser-credit">0.25</span>
            </span>
        </div>
    </li>
    <li id="Society" class="card-result">
        <div class="row">
            <div class="col-lg-8">
                <div class="coveo-title"><a href="#">Society Name</a></div>
                <div class="result-meta">
                    <span class="result-meta-item">
                        <span class="result-city">City</span><span class="result-country">Country</span>
                    </span>
                </div>
            </div>
            <div class="col-lg-4 gpp-logo">
                <img src="/Content/img/bootstrap/passport_program.png" alt="Global Passport Program Participant" />
            </div>
        </div>
    </li>
    <li id="Waiver" class="card-result">
        <h4 class="coveo-title"><a href="#">Waiver Title</a></h4>
        <div class="result-meta">
            <span class="result-meta-item">Program</span>
            <span class="result-meta-item">Level</span>
            <span class="result-meta-item">Location</span>
        </div>
        <div class="result-meta new-line">
            <span class="result-meta-item">
                <span class="waiver-type">Waiver type</span>
                <span class="waiver-what">What is being waived</span>
            </span>
        </div>
        <div class="panel-group">
            <noscript>
                <style>
                    .collapse {
                        display: block;
                    }
                </style>
            </noscript>
            <div class="panel-no-border">
                <div class="panel-heading">
                    <div class="panel-title">
                        <a data-toggle="collapse" href="#collapseWaiver" class="collapsed toggle-caption"><span class="toggle-text">Show Details</span></a>
                    </div>
                </div>
                <div id="collapseWaiver" class="panel-collapse collapse">
                    <div class="panel-body">
                        <h5>Waiver Details</h5>
                        <p>Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
                            odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
                            Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
                        <h5>Additional Information</h5>
                        <p>Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
                            odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
                            Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li id="University" class="card-result">
        <div class="row">
            <div class="col-md-4 affiliate-logo">
                <a href="#"><img src="/Content/img/examples/logo.png" alt="example" /></a>
            </div>
            <div class="col-md-8">
                <h4 class="coveo-title"><a href="#">Affiliated University Name</a></h4>
                <div class="result-meta">
                    <span class="result-meta-item">
                        <span class="result-city">City</span><span class="result-country">Country</span>
                    </span>
                </div>
                <div class="result-meta">
                    <h5>Degree Programs:</h5>
                    <p>
                        Program<br/>
                        Program<br />
                        Program
                    </p>
                </div>
            </div>
        </div>
    </li>
</ul>
                

Documentation

Problem Being Solved

Users need to view a dynamic set of content.

When To Use

Filtered results should be used when the set of results is long and complex enough that a user benefits from being able to narrow it. It should also be used if the content set is small at launch but we anticipate expansion.

When Not To use

Filtered results should not be used for simple or small result sets.

Formatting

  • Browse lists are likely to originate from Coveo. We will do our best to standardize the look and feel with their code.
  • Filtered results need to be put in the wide content well.
  • See sidebar for filter categories for each browse type.