âListsâ Component
Design: zeplin.
Lists are used in IxDF UI Kit 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 facilitate 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">
@include('pages.discussions.__discussionList__item', ['discussion' => $discussion, 'category' => $category])
</li>
</ul>
Props
-
discussion (required)App\Modules\Discussion\Models\Discussion
Discussion model passed as input.
-
categoryApp\Modules\Discussion\Models\DiscussionCategory
Discussion category passed as input.
Generic List
@component('components.lists.list')
@include('components.lists.__genericItem', [
'title' => 'list item',
'link' => 'https://google.com',
])
@include('components.lists.__genericItem', [
'title' => 'Second list item',
])
@endcomponent
Props
-
title (required)string
Title of individual accordion item.
-
linkstring
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' => 'https://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' => 'https://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.
-
subtitlestring
Subtitle typically for points.
-
linkstring
The actual link for list item, wraps list item in a link tag.
-
numberOfItemsint
The total number of items used for aligning all list items correctly.
-
hasNoBorderbool
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.
-
Write an engaging description for IxDF Singapore
-
Write an engaging description for IxDF Singapore.
It will help gather clients -
Set up a Facebook group and add it to the groupâs information.
Done! -
Invite new IxDF Members near Singapore to join IxDF Singapore.
Usage
@component('components.lists.todo')
@component('components.lists.__todoItem', [
'title' => 'Write an engaging description for IxDF Singapore',
'done' => false,
'subtitle' => '<a>More Details</a>',
])@endcomponent
@component('components.lists.__todoItem', [
'title' => 'Write an engaging description for IxDF Singapore.',
'subtitle' => 'It will help gather clients',
'done' => false,
])@endcomponent
@component('components.lists.__todoItem', [
'title' => 'Set up a Facebook group and add it to the groupâs information.',
'done' => true,
])@endcomponent
@component('components.lists.__todoItem', [
'title' => 'Invite new IxDF Members near Singapore to join IxDF Singapore.',
'done' => false,
])@endcomponent
@endcomponent
Props
-
title (required)string
Title of list item.
-
titlestring
Subtitle shown below title, can be passed HTML as string as well.
-
donebool
Marks item as done, this will move item to next to the last not-done item and changes subtitle to done.