IxDF Design System

“Lists” Component

Design: zeplin.

Lists are used in IxDF Design System to group related content. Items in a list usually link to a page. Lists are stacked vertically to make scanning them easy.

There 6 categories of lists that we use

  • Accordion List
  • Discussion List
  • Event List
  • Generic List
  • Ranked List
  • To-do List

Accordion List

The accordion list contains a title and a chevron icon. The chevron-down icon is used when the accordion item is closed, and it turns into the chevron-up icon when opened. The accordion item’s content supports rich text and can contain headers, images, buttons, etc. More than one accordion item may be open at the same time. Text on an accordion list item has the regular weight by default—this is because we often bold key words in the list text to faciliate scanning.

Do I have to be online at an exact time to study?

Yes, you can take all the courses you would like. For example, if there are 30 active courses, you can enroll in all 30 courses at the same time and move from one to the other as you please. There are no further charges once you’ve paid for your membership. Please note: If you have a student membership, you can take a maximum of three courses at the same time. As a student, you can thus still take all the courses you would like – free of extra charges – just as long as you finish them (or drop them) so that you don’t have more than three ongoing courses at the same time.

Can I take more than one course at a time?

Yes, you can take all the courses you would like. For example, if there are 30 active courses, you can enroll in all 30 courses at the same time and move from one to the other as you please. There are no further charges once you’ve paid for your membership. Please note: If you have a student membership, you can take a maximum of three courses at the same time. As a student, you can thus still take all the courses you would like – free of extra charges – just as long as you finish them (or drop them) so that you don’t have more than three ongoing courses at the same time.

Will I receive a Course Certificate?

Yes, you can take all the courses you would like. For example, if there are 30 active courses, you can enroll in all 30 courses at the same time and move from one to the other as you please. There are no further charges once you’ve paid for your membership. Please note: If you have a student membership, you can take a maximum of three courses at the same time. As a student, you can thus still take all the courses you would like – free of extra charges – just as long as you finish them (or drop them) so that you don’t have more than three ongoing courses at the same time.

Usage

@component('components.lists.accordion')
    @component('components.lists.__accordionItem', ['title' => 'Do I have to be online at an exact time to study?'])
        <p>
            Yes, you can take all the courses you would like. For example, if there are 30 active courses,
            you can enroll in all 30 courses at the same time and move from one to the other as you please.
        </p>
        <button class="button button--primary">Start Learning</button>
    @endcomponent
    @component('components.lists.__accordionItem', ['title' => 'Will I receive a Course Certificate?'])
        <p>Yes, you can take all the courses you would like. For example, if there are 30 active courses</p>
        <button class="button button--primary">Start Learning</button>
    @endcomponent
@endcomponent

Props

  • title (required)
    string

    Title of individual accordion item.

Discussion List

A discussion list item contains the following elements:

  • Profile photo of the thread creator.
  • Discussion title.
  • A line of subtitle, containing: the timestamp of either the most recent comment or the date of creation, whichever is more recent; the first name of the thread creator; the discussion category; the number of comments (only shown if there is at least 1 comment in the thread excluding the first post).
<ul class="linkStrip js-linkStrip">
    <li class="linkStrip__item discussion-list__item js-target-topic">
        @include('pages.discussions.__discussionList__item', ['discussion' => $discussion, 'category' => $category])
    </li>
</ul>

Props

  • discussion (required)
    App\Models\Discussion\V2\Discussion

    Discussion model passed as input.

  • category
    App\Models\Discussion\V2\DiscussionCategory

    Discussion category passed as input.

Generic List

@component('components.lists.list')
    @include('components.lists.__genericItem', [
        'title' => 'list item',
        'link' => 'http://google.com',
    ])
    @include('components.lists.__genericItem', [
        'title' => 'Second list item',
    ])
@endcomponent

Props

  • title (required)
    string

    Title of individual accordion item.

  • link
    string

    Link for list item, if this is passed then the list item is wrapped in link tag and becomes clickable.

Ranked List

List for ranking item including people (with profile pictures), cities.

Simple Ranked List

Ranked List with subtitles

Large Ranked List

@component('components.lists.list')
    @foreach($rankedListSubtitle as $item)
        @include('components.lists.__rankedItem', [
            'title' => $item['title'],
            'rank' => $loop->index + 1,
            'subtitle' => $item['subtitle'],
            'link' => 'http://google.com',
            'img' => 'https://source.unsplash.com/300x300/?girl',
            'hasNoBorder' => $loop->index === 2,
            'numberOfItems' => 200,
        ])
    @endforeach

    @include('components.lists.__rankedItemBreak')

    @foreach($rankedListSubtitle as $item)
        @include('components.lists.__rankedItem', [
            'title' => $item['title'],
            'rank' => $loop->index + 111,
            'subtitle' => $item['subtitle'],
            'link' => 'http://google.com',
            'img' => 'https://source.unsplash.com/300x300/?girl',
            'numberOfItems' => 200,
        ])
    @endforeach
@endcomponent

Props

  • title (required)
    string

    Title of ranked item.

  • rank (required)
    int

    Rank for item.

  • subtitle
    string

    Subtitle typically for points.

  • link
    string

    The actual link for list item, wraps list item in a link tag.

  • numberOfItems
    int

    The total number of items used for aligning all list items correctly.

  • hasNoBorder
    bool

    Removes the bottom border of list item when true.

TO-DO List

It’s a numbered list where list items can be marked as “done” when conditions are fulfilled. List items that are done are re-ordered to the bottom of the to-do list, and the remaining list items are re-numbered according to their new positions. A to-do list item contains the following elements:

  • List item number.
  • Title of the list item.
  • Additional details in a subtitle.
  1. Write an engaging description for IxDF Singapore

  2. Write an engaging description for IxDF Singapore.

    It will help gather clients
  3. Set up a Facebook group and add it to the group’s information.

    Done!
  4. Invite new IxDF Members near Singapore to join IxDF Singapore.

Usage

@component('components.lists.todo')
    @include('components.lists.__todoItem', [
        'title' => 'Write an engaging description for IxDF Singapore',
        'done' => false,
        'subtitle' => '<a>More Details</a>',
    ])
    @include('components.lists.__todoItem', [
        'title' => 'Write an engaging description for IxDF Singapore.',
        'subtitle' => 'It will help gather clients',
        'done' => false,
    ])
    @include('components.lists.__todoItem', [
        'title' => 'Set up a Facebook group and add it to the group’s information.',
        'done' => true,
    ])
    @include('components.lists.__todoItem', [
        'title' => 'Invite new IxDF Members near Singapore to join IxDF Singapore.',
        'done' => false,
    ])
@endcomponent

Props

  • title (required)
    string

    Title of list item.

  • title
    string

    Subtitle shown below title, can be passed html as string as well.

  • done
    bool

    Marks item as done, this will move item to next to the last not-done item and changes subtitle to done.