Source: dist/css/virtual_boot.css, line 7972
13 Sub Components
These sub elements are used in many of the patterns and may be useful when building more complex components.
Source: dist/css/virtual_boot.css, line 8429
13.1 Action Buttons
The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
Example s
Default styling
Watch
when the main asset of the loaded page is a video or live stream.
Join
when the main asset of the loaded page is an online meeting or webinar.
Listen
when the main asset of the loaded page is a podcast or audio.
View
when the main asset of the loaded page is a graphic, pdf, or slide deck.
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="download calendar reminder" class="btn flex_none btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">[modifier]</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
<a aria-label="show or hide details" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100">Show Details</a>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8970
13.1.1 Action Buttons Clear Search
This action button is used to clear the search filters and parameters.
Example
<aside class="flex flex_none flex_column gap-y_3 m-l_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="navigate to" class="br_1 br_solid br_white-3 btn btn-secondary flex_auto shadow_overlap-light">Clear Search <i class="fas fa-times p-l_3"></i></a>
</nav>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8472
13.1.2 Embargoed Attachment Actions Buttons
Example
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="download calendar reminder" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<div class="cursor_not-allowed" onclick="alert('This attachment is not available to be downloaded at this time. You can download the attachment when it is available at Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:45 p.m')">
<span aria-label="download attachments locked" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100 disabled" ><i class="far fa-lock"></i> Attachments</span>
</div></aside>Code Sample
Source: dist/css/virtual_boot.css, line 8387
13.1.3 Favorite Button
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
Example s
Default styling
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [modifier]" ><i class="fas fa-heart"></i></a>Code Sample
Source: dist/css/virtual_boot.css, line 8401
13.1.3.1 Favorite Button (Disabled)
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
Example s
Default styling
active
when the favorite is active
<span class="btn btn-secondary flex_none flex_none disabled grid items_center text_center " ><i class="fas fa-heart"></i></span>Code Sample
Source: dist/css/virtual_boot.css, line 8415
13.1.3.2 Favorite Button Small
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
Example s
Default styling
<a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 [modifier]" ><i class="fas fa-heart"></i></a>Code Sample
Source: dist/css/virtual_boot.css, line 8556
13.1.4 Action Buttons Featured
The Featured Actions buttons never have the calendar reminder button.
Example
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8455
13.1.5 Locked Attachment Button
Attachments can be released after access to the presentation or session UI has been granted. In these cases the button is disabled. And an alert is displayed giving the time when it will be available.
Example
Attachments
NOTE:
This pattern is using bootstrap modal to display the message. The IDs of the modal and bs-targets are hard coded in the pattern and need to be dynamic for production.<div class="cursor_not-allowed" onclick="alert('This attachment is not available to be downloaded at this time. You can download the attachment when it is available at Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:45 p.m')">
<span aria-label="download attachments locked" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100 disabled" ><i class="far fa-lock"></i> Attachments</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8493
13.1.6 Action Buttons No Details
Description: The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
Example s
Default styling
watch
watch action button
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="download calendar reminder" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">[modifier]</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8536
13.1.7 Action Buttons On Demand
The On Demand Actions buttons never have the calendar reminder button.
Example
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8515
13.1.8 Action Buttons Only
The Actions buttons are a combination of functions and a link to the education materials player.
Example s
Default styling
watch
watch action button
<aside class="flex flex_none flex_column gap-y_3 m-l_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="download calendar reminder" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">[modifier]</a>
</nav>
</aside>Code Sample
13.2 Sub.Award
Source: dist/css/virtual_boot.css, line 8596
13.2.1 Abstract Flag Legend
Example
-
Special Category
-
Top Ten
<div class="c_black-6 inline-flex flex_row items_center justify_start m-t_3 ">
<ul class="ul_inline-pipe">
<li class="inline-flex items_center">
<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
<i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
<span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6 fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
</div> <strong class="font-size_down-1 font_copy"> Special Category</strong>
</li>
<li class="inline-flex items_center">
<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
<i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
<span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6 fas font-size_down-2 text-shadow_white-n1"></i></span>
</div> <strong class="font-size_down-1 font_copy"> Top Ten</strong>
</li>
</ul>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8576
13.2.2 Abstract Flag
Abstract flags are used to indicate that an abstract is awarded for some reason. Use the default and star for most reasons. If there is a need for three levels of awards then use star and trophy alt or the angle up icons. In the content of the page you should denote the legend of the icons used.
Example s
Default styling
fa-star
this denote the premium awarded abstracts (e.g. top 10)
fa-angle-up
this denote the premium awarded abstracts (level up 1)
fa-angle-double-up
this denote the premium awarded abstracts (level up 2)
<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
<i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
<span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6 [modifier] fas font-size_down-2 text-shadow_white-n1"></i></span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8084
13.3 Category Flags
Description: A graphic treatment for the category flags which are tags applied like channel and type.
Data.Agenda.ChannelName - Channel Name
Data Elements:
Example
- Navigating Health Care Economics
- Category Tag
<div class="font_n3 p_2 uppercase bg_primary-2 p-x_4 m-x_4 inline-block br-br_radius br-bl_radius c_white font_bold self_start ">
<ul class="ul_inline-pipe">
<li>Navigating Health Care Economics</li>
<li>Category Tag</li>
</ul>
</div>Code Sample
13.4 Sub.ClassList
13.4.1 Sub.ClassList.Border
Source: dist/css/virtual_boot.css, line 8800
13.4.1.1 Border Top Primary
Used in dividing lists of items.
Example
br-t_1 br_black-3 br_solid
br-t_1 br_black-3 br_solidCode Sample
Source: dist/css/virtual_boot.css, line 9098
13.5 Collapse/Expand
The collapse/expand icon is used to collapse and expand the facet group.
Example
collapse
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="" role="button" aria-expanded="true" aria-controls="">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 9119
13.5.1 Collapse/Expand No Text
The collapse/expand icon is used to collapse and expand the facet group.
Example
<div class="toggle user-select_none" data-bs-toggle="collapse" data-bs-target="" role="button" aria-expanded="true" aria-controls="">
<span class="fa-stack">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-minus fa-stack-1x c_white"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x c_white"></i>
</span>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8020
13.6 Credit Dot
Dots are used to indicate the credit that this education offers.
Example s
Default styling
CME
CME
CNE
CNE
AAPA
AAPA
ABP
ABP
ABPMOCII
ABPMOCII
ABPMOCIV
ABPMOCIV
ACHE
ACHE
FORMAT:
This element uses data that has strict data formatting requirements. See color codes => credits.NOTE:
This pattern requires the inclusion of the credit color stylesheets.<li class="inline-flex items_center lh_0">
<span class="bg_[modifier] br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> [modifier]
</li>Code Sample
Source: dist/css/virtual_boot.css, line 8047
13.6.1 Simple Credit Dots
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Sub.Credits
Sub Components in Design:
Example
- CME
- CNE
- COP
- MOCII
NOTE:
This pattern requires the inclusion of the credit color stylesheets.<ul class=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
<li class="inline-flex items_center lh_0">
<span class="bg_CME br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> CME
</li> <li class="inline-flex items_center lh_0">
<span class="bg_CNE br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> CNE
</li> <li class="inline-flex items_center lh_0">
<span class="bg_COP br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> COP
</li> <li class="inline-flex items_center lh_0">
<span class="bg_MOCII br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
</li></ul>Code Sample
Source: dist/css/virtual_boot.css, line 8069
13.6.2 Non Accredited
description
Example
Industry Session | Nonaccredited
<strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong>Code Sample
Source: dist/css/virtual_boot.css, line 8815
13.7 Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location
Data Elements:
Example s
Default styling
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
block
use block on the role type label to stack the faculty names.
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
FORMAT:
This element uses data that has strict data formatting requirements. See the data tab for more information.<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 [modifier]">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 [modifier]">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>Code Sample
Source: dist/css/virtual_boot.css, line 8844
13.7.1 Aux Session Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Data.Faculty.FullName - Full Name
Data.Faculty.Location - Location
Sub Components in Design:
Example s
Default styling
Role Type 1
- Marty Little ( New York, NY, USA)
- Eileen Marvin ( New York, NY, USA)
- Chelsea Dach DVM ( New York, NY, USA)
Role Type 2
- Wm Price( New York, NY, USA)
- Mrs. Jeffrey Cartwright ( New York, NY, USA)
- CEmmett Spencer( New York, NY, USA)
block
use block on the role type label to stack the faculty names.
Role Type 1
- Marty Little ( New York, NY, USA)
- Eileen Marvin ( New York, NY, USA)
- Chelsea Dach DVM ( New York, NY, USA)
Role Type 2
- Wm Price( New York, NY, USA)
- Mrs. Jeffrey Cartwright ( New York, NY, USA)
- CEmmett Spencer( New York, NY, USA)
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
Role Type 1
- Marty Little ( New York, NY, USA)
- Eileen Marvin ( New York, NY, USA)
- Chelsea Dach DVM ( New York, NY, USA)
Role Type 2
- Wm Price( New York, NY, USA)
- Mrs. Jeffrey Cartwright ( New York, NY, USA)
- CEmmett Spencer( New York, NY, USA)
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8943
13.7.2 No Location Faculty List
When you list non-event areas like Posters, and Abstracts the list removes the location of the person.
Data.Faculty.FullName - Full Name
Sub Components in Design:
Example s
Default styling
- Role Type 1:
- Pepper H. Soda III, MD, FACC
- Role Type 2:
- Dianna Denesik III
- Miguel Romaguera
- Jeanette Franecki
block
use block on the role type label to stack the faculty names.
- Role Type 1:
- Pepper H. Soda III, MD, FACC
- Role Type 2:
- Dianna Denesik III
- Miguel Romaguera
- Jeanette Franecki
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
- Role Type 1:
- Pepper H. Soda III, MD, FACC
- Role Type 2:
- Dianna Denesik III
- Miguel Romaguera
- Jeanette Franecki
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 [modifier]">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC</li>
<li class="no-after font_medium c_primary-n1 [modifier]">Role Type 2:</li>
<li>Dianna Denesik III</li>
<li>Miguel Romaguera</li>
<li>Jeanette Franecki</li>
</ul>Code Sample
Source: dist/css/virtual_boot.css, line 8915
13.7.3 Session Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location
Sub Components in Design:
Example s
Default styling
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
block
use block on the role type label to stack the faculty names.
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>Code Sample
Source: dist/css/virtual_boot.css, line 8881
13.7.4 Combined Faculty List
When a presentation is in a single state the combination of session roles and presentation roles are shown.
Data.Faculty.FullName - Full Name
Data.Faculty.FullName - Location
Sub Components in Design:
Example s
Default styling
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
block
use block on the role type label to stack the faculty names.
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>Code Sample
13.8 Sub.Header
Source: dist/css/virtual_boot.css, line 8368
13.8.1 Abstract Thumbnail
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
Example s
Default styling
bg_primary
is the default background color
bg_accent
any background color can be swapped out
<header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
<div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat [modifier] br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
<i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
</div>
</header>Code Sample
Source: dist/css/virtual_boot.css, line 8349
13.8.2 Video Thumbnail
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
Example s
Default styling
bg_primary
is the default background color
bg_accent
any background color can be swapped out
<header class="flex flex_none flex_row justify_center p-x_4 font_n5">
<div class="aspect_21x9:md aspect_16x9 bg-blend_multiply bg_primary font-size_down bg_cover bg_no-repeat [modifier] br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_15 max-w_20:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
<i class="absolute c_white-6 fa-play fas flex_auto self_center text_center w_100"></i>
</div>
</header>Code Sample
Source: dist/css/virtual_boot.css, line 8785
13.9 title
description
Example
Markup:
Markup:Code Sample
Source: dist/css/virtual_boot.css, line 9303
13.10 Pagination
Pagination is used to navigate through the results.
Example
<nav aria-label="Pagination" class="flex flex_row p-b_5:lg p-b_4">
<ul class="pagination flex flex_row ul_none justify_stretch relative lh_0 font_n1 font_medium m-x_auto shadow_bevel-light br_radius overflow_hidden">
<li class="flex pagination-previous ">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br-tl_radius br-bl_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex">
<div class="flex flex_row nowrap"><i class="fas fa-arrow-left p-r_3 self_center"></i> <span class="show-for-sr display_none inline:md self_center">Prev</span></div>
</div>
</div>
</a>
</li>
<!---->
<li class="flex">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex"><i class="fas fa-ellipsis-h left"></i></div>
</div>
</a>
</li>
<li class="flex">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex">50 </div>
</div>
</a>
</li>
<li class="flex">
<a class="active ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex">51 </div>
</div>
</a>
</li>
<li class="flex">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex">52 </div>
</div>
</a>
</li>
<li class="flex">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex">53 </div>
</div>
</a>
</li>
<li class="flex">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex">54 </div>
</div>
</a>
</li>
<li class="flex">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex"><i class="fas fa-ellipsis-h right"></i></div>
</div>
</a>
</li>
<!---->
<li class="flex pagination-next">
<a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br-tr_radius br-br_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" aria-label="Next Page" style="min-height: unset;">
<div class="flex block justify_center flex_column ">
<div class="flex_auto self_center justify_center flex">
<div class="flex flex_row nowrap"><span class="show-for-sr display_none inline:md self_center">Next</span> <i class="fas fa-arrow-right p-l_3 self_center"></i></div>
</div>
</div>
</a>
</li>
</ul>
</nav>Code Sample
13.11 Sub.Player
Source: dist/css/virtual_boot.css, line 8205
13.11.1 Auxiliary Data
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Sub.Credits.NonAccredited - Non Accredited
Sub.FacultyList.AuxSession - Session Faculty Lists
Sub.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Sub Components in Design:
Example
<aside class="flex_none max-w_20:md max-w_25:lg w_100 ">
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div> <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-file-certificate p-r_3"></i> Credits</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down-1">
<ul class=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
<li class="inline-flex items_center lh_0">
<span class="bg_CME br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> CME
</li> <li class="inline-flex items_center lh_0">
<span class="bg_CNE br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> CNE
</li> <li class="inline-flex items_center lh_0">
<span class="bg_COP br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> COP
</li> <li class="inline-flex items_center lh_0">
<span class="bg_MOCII br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
</li></ul> </div>
<h4 class="font-size_up c_black-6 font_medium"><i class="fas fa-tag p-r_3"></i>category</h4>
<div class="br-t_1 br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
<ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul> </div>
<h4 class="font-size_up c_black-6 font_medium"><i class="fas fa-tags p-r_3"></i>tags</h4>
<div class="br-t_1 br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
<ul class="ul_inline-comma">
<li>Tag Name 1</li>
<li>Daugherty - Larkin</li>
<li>relationships</li>
<li>web-readiness</li>
</ul> </div>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8270
13.11.1.1 Auxiliary Data Abstracts
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Sub.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Sub Components in Design:
Example
<aside class="flex_none max-w_20:md max-w_25:lg w_100 ">
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-file-certificate p-r_3"></i> Credits</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down-1">
<ul class=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
<li class="inline-flex items_center lh_0">
<span class="bg_CME br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> CME
</li> <li class="inline-flex items_center lh_0">
<span class="bg_CNE br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> CNE
</li> <li class="inline-flex items_center lh_0">
<span class="bg_COP br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> COP
</li> <li class="inline-flex items_center lh_0">
<span class="bg_MOCII br_1 br_black-3 br_circle br_solid m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
</li></ul> </div>
<h4 class="font-size_up c_black-6 font_medium"><i class="fas fa-tag p-r_3"></i>category</h4>
<div class="br-t_1 br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
<ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul> </div>
<h4 class="font-size_up c_black-6 font_medium"><i class="fas fa-tags p-r_3"></i>tags</h4>
<div class="br-t_1 br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
<ul class="ul_inline-comma">
<li>Tag Name 1</li>
<li>Daugherty - Larkin</li>
<li>relationships</li>
<li>web-readiness</li>
</ul> </div>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8238
13.11.1.2 Auxiliary Data Not Accredited
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Sub.Credits.NonAccredited - Non Accredited
Sub.FacultyList.AuxSession - Session Faculty Lists
Sub.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Sub Components in Design:
Example
<aside class="flex_none max-w_20:md max-w_25:lg w_100 ">
<div class="bg_secondary-n3 br_radius c_white font-size_down m-b_4 p_3 shadow_overlap-light">
<strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong> </div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1 br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
<li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div> <h4 class="font-size_up c_black-6 font_medium"><i class="fas fa-tag p-r_3"></i>category</h4>
<div class="br-t_1 br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
<ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul> </div>
<h4 class="font-size_up c_black-6 font_medium"><i class="fas fa-tags p-r_3"></i>tags</h4>
<div class="br-t_1 br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
<ul class="ul_inline-comma">
<li>Tag Name 1</li>
<li>Daugherty - Larkin</li>
<li>relationships</li>
<li>web-readiness</li>
</ul> </div>
</aside>Code Sample
Source: dist/css/virtual_boot.css, line 8650
13.11.2 Chat Window
The chat window is used to display the chat in player pages.
Example
Chat
collapse
<div class="br_solid br_radius br_1 br_black-3 shadow_overlap-light p_4:lg p_3 panel panel-default flex flex_column gap-y_3 " id="panel-chat">
<div class="panel-heading bg_transparent flex flex_row">
<h4 class="panel-title font_bold font_display c_primary m_0 flex_auto self_center">Chat</h4>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseChatWindow" role="button" aria-expanded="true" aria-controls="#CollapseChatWindow">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </div>
<div id="CollapseChatWindow" class="collapse show">
<div class="br_1 br_black-2 br_radius br_solid flex_auto h_20 h_auto:md loading-log m-b_4 overflow_auto p-r_3 panel-body reading-typography relative scrollbar-mini shadow_emboss-light min-h_5xlh min-h_20:md min-h_30:lg">
<div class="load-log p_3 absolute t_0 r_0 l_0 b_0 overflow_unset flex flex_column gap-y_3" data-log-id="2">
<div class="msgln">(1:44 PM) <b> Lovely Day </b>: Chat<br></div>
<div class="msgln">(2:13 PM) <b> Lovely Day </b>: Chat some more<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
<div class="msgln">(2:19 PM) <b> Lovely Day </b>: Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.<br></div>
<div class="msgln">(3:48 PM) <b> Lovely Day </b>: test<br></div>
<div class="msgln">(3:50 PM) <b> Matt Watier </b>: hello<br></div>
</div>
</div>
<div class="panel-footer flex_none m-t_auto">
<form name="message" action="">
<div class="form-group flex flex_row nowrap">
<input name="usermsg" type="text" id="usermsg" class="form-control br-br_square br-tr_square flex_auto" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
<input name="submitmsg" type="submit" id="submitmsg" value="Add" class="btn btn-primary br-tl_square br-bl_square flex_none">
<input type="hidden" name="user_client_portal_reg_id" id="user_client_portal_reg_id" value="10">
<input type="hidden" name="chat_id" id="chat_id" value="2">
<input type="hidden" name="client_portal_presentation_id" id="client_portal_presentation_id" value="2">
<input type="hidden" name="client_portal_id" id="client_portal_id" value="1">
<input type="hidden" name="screen_name" id="screen_name" value=" Matt Watier ">
</div>
</form>
</div>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8697
13.11.3 CIO Window
CIO is a survey widget that allows faculty to collect questions and polls from participants.
Example
Q&A
collapse
<div class="br_solid br_radius br_1 br_black-3 shadow_overlap-light p_4:lg p_3 panel panel-default gap-y_3 flex flex_column panel ">
<div class="panel-heading bg_transparent flex flex_row">
<h4 class="panel-title font_bold font_display c_primary m_0 flex_auto self_center">Q&A</h4>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseQA" role="button" aria-expanded="true" aria-controls="#CollapseQA">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </div>
<div id="CollapseQA" class="collapse show m-x_n4:lg m-x_n3 m-b_n4:lg m-b_n3 flex_100 flex_auto flex flex_column">
<iframe src="https://oncology.cnf.io/sessions/qen8/#!/dashboard" title="CIO WIDGET" class=" br_radius flex_auto flex_100 br-t_1 br_solid br_black-2 min-h_90 min-h_30:md min-h_50:lg"></iframe>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8337
13.12 Playing Date Time
When presenting the playing date and time this simple dot pattern is a good solution.
Example
Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT
<span class="c_accent-n2">Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span>Code Sample
13.13 Sub.Presentation
Source: dist/css/virtual_boot.css, line 8183
13.13.1 Presentation List
List of Presentations is similar DOM independent of the context.
Sub.Presentation.ListItem - List Item
Sub Components in Design:
Example
Presentations
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
<h4 class="font-size_up p-x_3 c_primary-n2 font_medium">Presentations</h4>
<ul class="ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3">
<li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li></ul>Code Sample
Source: dist/css/virtual_boot.css, line 8150
13.13.2 Presentation List Item
When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.
ClassList: Sub.ClassList.Border.BlackTop - Border Top
Sub.FacultyList - Faculty List
Sub.ActionButtons.Favorite.Small - Small Action Button
Sub Components in Design:
Data.Presentation.Title - Title
Data.Presentation.LiveTime - Live Time
Data Elements:
Example
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
FORMAT:
This element uses data that has strict data formatting requirements. See the data tab for more information.<li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li>Code Sample
13.14 Sub.Search
Source: dist/css/virtual_boot.css, line 9184
13.14.1 Search Bar
Simple Search Bar
Example
<div class=" sticky jump-buttons_top r_0 z_1">
<div class="absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3">
<!-- Helper Jump links -->
<a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#SearchBarTop">
<span><i class="fas fa-arrow-up"></i><i class="m-l_2 fas fa-search"></i></span>
</a>
<a href="#FilterNavContainer" class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3">
<span><i class="fas fa-arrow-down"></i><i class="m-l_2 fas fa-filter"></i></span>
</a>
<!-- Helper Jump links -->
</div>
</div>
<div class="bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative" >
<h1 class="c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between"><span>Program</span>
<a href="#FilterNavContainer" class="absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0">
<span><i class="fas fa-arrow-down"></i><i class="fas fa-filter"></i></span>
</a>
</h1>
<div class="flex_row flex gap-x_3">
<div class="input-holder flex_auto flex flex_row self_end relative w_100">
<input id="input_uniqueTextAnda" name="input_uniqueTextAnda" type="text" placeholder="Search" class=" br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 font_2:lg font_1:md font_0">
<button class="absolute b_0 br-bl_square br-tl_square btn btn-primary flex_none grid items_center justify_center r_0 t_0" onClick="Search()">
<i class="fas fa-search"></i>
</button>
</div>
<button class="disabled flex_none grid items_center justify_center btn btn-alert">
<i class="fas fa-times"></i>
</button>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 9139
13.14.2 Facet Checkbox
The single checkbox for a facet.
Example
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="check" id="check" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="check" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 9160
13.14.3 Facet Checkbox With Trash
The single checkbox that is generated by the type ahead filter search. The trash button removes the filter.
Example
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet" id="checkfacet" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter </span></label></div>
<div class="">
<button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
</div>
<!---->
</div>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 8988
13.14.4 Faceted Search
Facet Groups
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Sub Components in Design:
Example
Drugs Generic
collapse
NOTE:
by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md " >
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_0 lh_1 font-size_up font_medium">Drugs Generic </div>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseFacetGroupID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupID">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </header>
<main id="CollapseFacetGroupID" class="p_1 collapse show" style="">
<ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_7685" id="checkfacet_7685" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7685" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7685ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_6336" id="checkfacet_6336" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_6336" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_6336ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_9112" id="checkfacet_9112" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9112" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9112ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_5420" id="checkfacet_5420" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5420" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5420ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_2677" id="checkfacet_2677" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2677" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2677ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> </ul>
<footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
</main>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 9060
13.14.4.1 Faceted Type Ahead
A type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out. Authors, and mesh terms can use this pattern to add them as a filter to the search page.
Example
Type Ahead Filter
Filtering By
collapse
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md ">
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_0 lh_1 font-size_up font_medium">Type Ahead Filter</div>
</header>
<main class="p_1 collapse show">
<div class="p_3 flex flex_row">
<input class="br-tr_square br-br_square" type="text" name="" id="" placeholder="Filter Name">
<button class="btn btn-secondary br-tl_square br-bl_square"><i class="fas fa-users"></i></button>
</div>
</main>
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8">Filtering By</div>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#collapseTypeAhead" role="button" aria-expanded="true" aria-controls="#collapseTypeAhead">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </header>
<main id="collapseTypeAhead" class="p_1 collapse show" style="">
<ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_6001" id="checkfacetfacet_6001" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_6001" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_6001</span></label></div>
<div class="">
<button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
</div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_8722" id="checkfacetfacet_8722" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_8722" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_8722</span></label></div>
<div class="">
<button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
</div>
<!---->
</div>
</li> </ul>
<footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
</main>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 9024
13.14.5 Faceted Search
Facet Groups
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Sub Components in Design:
Example
Primary Category
collapse
NOTE:
by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md " >
<header class="flex font-size_up m-y_2">
<div class="flex_auto self_center p-l_0 lh_1 font-size_up font_medium">Primary Category </div>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseFacetGroupPrimaryID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupPrimaryID">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </header>
<main id="CollapseFacetGroupPrimaryID" class="p_1 collapse show" style="">
<ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
<li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_7835" id="checkfacet_7835" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7835" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7835ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_0300" id="checkfacet_0300" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0300" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0300ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_0849" id="checkfacet_0849" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0849" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0849ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8490" id="checkfacet_8490" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8490" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8490ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> <li class="m-y_2">
<div class="input flex user-select_none relative h:bg_black-1 br_radius">
<div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8066" id="checkfacet_8066" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8066" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8066ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
<!---->
</div>
</li> </ul>
<footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
</main>
</li>Code Sample
Source: dist/css/virtual_boot.css, line 9235
13.14.6 Program Bar
Some events don't need a search bar the program bar remains because it is need to hide the jump links.
Example
<div class=" sticky t_0 r_0 z_1">
<div class="absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3">
<!-- Helper Jump links -->
<a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#SearchBarTop">
<span><i class="fas fa-arrow-up"></i> top</span>
</a>
<a href="#FilterNavContainer" class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3">
<span><i class="fas fa-arrow-down"></i><i class="m-l_2 fas fa-filter"></i></span>
</a>
<!-- Helper Jump links -->
</div>
</div>
<div class="bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative" >
<h1 class="c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between"><span>Program</span>
<a href="#FilterNavContainer" class="absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0">
<span><i class="fas fa-arrow-down"></i><i class="fas fa-filter"></i></span>
</a>
</h1>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 9271
13.14.7 Result Overview
Small strip of data that shows the number of results and the time it took to search.
Example
-
- Results:
- 230
-
- Filters:
- Category A
- Tag B
- Tag C
<div class="c_secondary-n1 font_medium font-size_down-2 font_ui p_2 ">
<ul class="ul_inline-pipe">
<li>
<ul class="ul_inline-comma">
<li class="font_bold no-after uppercase">Results:</li>
<li class="c_accent-n1">230</li>
</ul>
</li>
<li>
<ul class="ul_inline-comma">
<li class="font_bold no-after uppercase">Filters:</li>
<li><a class="h:underline c_primary-n1 c_primary-n2">Category A <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
<li><a class="h:underline c_primary-n1 c_primary-n2">Tag B <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
<li><a class="h:underline c_primary-n1 c_primary-n2">Tag C <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
</ul>
</li>
</ul>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8748
13.15 Section Header
deprecated
experimental
description
default - Grid
EXPERIMENTAL: this design is new
DEPRECATED: this design is old
Example
FORMAT:
This uses a strick data format look at xNOTE:
nothing<div class="flex_row:md flex flex_column">
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
<div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
</div>
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
</div>Code Sample
13.16 Sub.Style
Source: dist/css/virtual_boot.css, line 8733
13.16.1 Program Borders Inside
CSS Classes on the Article tag of all program elements
Example
br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative
br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relativeCode Sample
Source: dist/css/virtual_boot.css, line 8718
13.16.2 Program Borders OutSide
CSS Classes on the Article tag of all program elements
Example
c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white
c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_whiteCode Sample
13.17 Sub.System
Source: dist/css/virtual_boot.css, line 9417
13.17.1 No Access Trouble Shooting
The instructions to the user when they land on the "No Access" to the page.
Example
No Access to [PRODUCT NAME]
[PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.
Registration Steps
-
To purchase, please click the "Register" button below. Once you have completed your purchase, please wait 15 minutes to allow the system to process the information.
- Register
-
If you have just registered and you have waited 15 minutes and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].
- Refresh Access
-
If you believe you have received this message in error, please contact Member Care
- For additional questions, please contact ACC Member Care.
- Email: MemberCare@ACC.org
- Phone: 202-375-6000 ext. 5603
- Toll-Free: 800-253-4636 ext. 5603
Account Information
- User Name: Regina Rutherford
- Member ID: 0152151214
- Email: test@boo.com
Click the 'Member Help' button to send along your member information to help diagnose this issue.
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
<div class="reading-typography flex flex_column gap_4">
<h2 class="">No Access to [PRODUCT NAME]</h2>
<p>[PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.</p>
<div class="flex flex_row gap_3 justify_center">
<a href="[PRODUCT MARKETING URL]" class="w_100 block max-w_20 btn btn-secondary c_white font_bold font_ui h:c_white shadow_overlap-light " title="Navigate to [PRODUCT NAME] detail page">Learn More</a>
</div>
</div>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
<div class="reading-typography flex flex_column gap_4">
<h2 class="font_bold">Registration Steps</h2>
<ol class="counter_reset m_0 p_0 ul_none flex_column flex gap_4">
<li class="flex flex_row">
<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
<div class="flex_auto">
<p>To purchase, please click the "Register" button below. Once you have completed your purchase, please <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">wait 15 minutes</strong> to allow the system to process the information. </p>
</div>
</li>
<li class="flex flex_row gap_3 justify_center">
<a title="register for the [PRODUCT NAME]" href="https://www.acc.org/Education-and-Meetings/Meetings/Meeting-Items/2022/01/01/01/04/ACC-Anywhere-ACC22-On-Demand" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Register</a>
</li>
<li class="flex flex_row">
<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
<div class="flex_auto">
<p>If you have just registered and you have <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">waited 15 minutes</strong> and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].</p>
</div>
</li>
<li class="flex flex_row gap_3 justify_center">
<a title="reset the access from you account" href="[EVENT AUTHENTICATION URL]" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Refresh Access</a>
</li>
<li class="flex flex_row">
<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
<div class="flex_auto">
<div class="flex flex_row:md flex_column">
<div class="reading-typography flex flex_column gap_4 flex_50 p-r_5:md">
<p class="font_bold">If you believe you have received this message in error, please contact <a href="mailto:MemberCare@ACC.org"><em>Member Care</em></a> </p>
<ul class="ul_none p_3">
<li class="font_bold">For additional questions, please contact ACC Member Care.</li>
<li><strong>Email:</strong> <a href="mailto:MemberCare@ACC.org"><em>MemberCare@ACC.org</em></a></li>
<li><strong>Phone:</strong> 202-375-6000 ext. 5603 </li>
<li><strong>Toll-Free:</strong> 800-253-4636 ext. 5603</li>
</ul>
</div>
<div class=" flex_50"`>
<section class="bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold">
<div class="c_white">
<h2 class="br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center">Account Information</h2>
<ul class="ul_none p_0 m_0">
<li class=""><strong>User Name:</strong> <span data-type="User Full Name">Regina Rutherford</span> </li>
<li class=""><strong>Member ID:</strong> <span data-type="Member ID">0152151214</span> </li><li class=""><strong>Email:</strong> <span data-type="email">test@boo.com</span> </li>
</ul>
</div>
<div class="bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light">
<p class=""><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class="text_center"><a href="mailTO:membercare@acc.org?body='name,email,personify'" class="btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto">Member Care</a></div>
</div>
</section> </div>
</div>
</div>
</li>
</ol>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 9390
13.17.2 Member Profile Data
Data for the Member Profile that is visible for the user.
Example
Account Information
- User Name: Regina Rutherford
- Member ID: 0152151214
- Email: test@boo.com
Click the 'Member Help' button to send along your member information to help diagnose this issue.
<section class="bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold">
<div class="c_white">
<h2 class="br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center">Account Information</h2>
<ul class="ul_none p_0 m_0">
<li class=""><strong>User Name:</strong> <span data-type="User Full Name">Regina Rutherford</span> </li>
<li class=""><strong>Member ID:</strong> <span data-type="Member ID">0152151214</span> </li><li class=""><strong>Email:</strong> <span data-type="email">test@boo.com</span> </li>
</ul>
</div>
<div class="bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light">
<p class=""><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class="text_center"><a href="mailTO:membercare@acc.org?body='name,email,personify'" class="btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto">Member Care</a></div>
</div>
</section>Code Sample
Source: dist/css/virtual_boot.css, line 8103
13.18 Tags
Example
A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels.
Markup:
A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels.
Markup:Code Sample
Source: dist/css/virtual_boot.css, line 8114
13.18.1 Category Tag
Category Tags are singular tags that divide content. An item can only have a single tag from a category group.
Example
- Channel 1
- Navigating Health Care Economics
<ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul>Code Sample
Source: dist/css/virtual_boot.css, line 8131
13.18.2 Filter Tags
Filter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.
Example
- Tag Name 1
- Daugherty - Larkin
- relationships
- web-readiness
<ul class="ul_inline-comma">
<li>Tag Name 1</li>
<li>Daugherty - Larkin</li>
<li>relationships</li>
<li>web-readiness</li>
</ul>Code Sample
Source: dist/css/virtual_boot.css, line 7990
13.19 Date Time Separators
Sessions are divided by date time markers that have been set to east coast time with a reference to GMT.
Data.Agenda.LiveDate - Live Date
Data.Agenda.LiveTime - Live Time
Data Elements:
Example
Live: Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:15 a.m. EDT
FORMAT:
This element uses data that has strict data formatting requirements. See the data tab for more information.<div class="flex_row:md flex flex_column">
<div class="flex_auto grid">
<span class="br-t_2 br_dotted br_inherit self_center"></span>
</div>
<div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
<strong class="c_black-8 block font_accent">Live: Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></strong>
</div>
<div class="flex_auto grid">
<span class="br-t_2 br_dotted br_inherit self_center"></span>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8300
13.20 Attachments Modal
Description:
Example
NOTE:
A `block relative` class was added to this DOM element to make it visible in this documentation.<div class="modal fade bg_black-4 z_5 show font_UI block relative" id="modal-attachment" tabindex="-1" role="dialog" aria-labelledby="attachmenteModalLabel" aria-modal="true" >
<div class="br_radius modal-dialog z_5 shadow_bevel-bold" role="document">
<div class="br-tl_radius br-tr_radius br_radius modal-content">
<div class="br-b_1 br_black-3 br_solid flex justify_center modal-header bg_primary c_white">
<h5 class="c_white flex_auto font_1 font_medium font_display m_0 modal-title self_center" id="exampleModalLabel"> <i class="far fa-paperclip"></i> Attachments</h5>
<button type="button" class=" btn btn-secondary c_white close h:c_white h:opacity lh_0 self_center" data-dismiss="modal" aria-label="Close">
<i class="fa-times fas"></i>
</button>
</div>
<div class="modal-body p_0">
<ul class="ul_none">
<li class="br-b_1 br_dotted br_primary-3 flex h:bg_highlight-5 h_lh1 p-x_3 p-y_3 relative"><span class="flex_auto font_0 lh_2 p-x_4 self_center">Really long name of a files so the text might wrap because we can never keep titles short and we have to medically explain everything.</span><button class="bg_black-3 br_0 br_square c_white expanded-click-area flex_none h:bg_black-5 m-l_auto m-r_n3 m-y_n3" style=" width: 4em;"><i class="fas fa-download"></i></button></li>
<li class="br-b_1 br_dotted br_primary-3 flex h:bg_highlight-5 h_lh1 p-x_3 p-y_3 relative"><span class="flex_auto font_0 lh_2 p-x_4 self_center">lorem text link</span>
<button class="bg_black-3 br_0 br_square c_white expanded-click-area flex_none h:bg_black-5 m-l_auto m-r_n3 m-y_n3" style=" width: 4em;"><i class="fas fa-download"></i></button></li>
</ul>
</div>
<div class="br-bl_radius br-br_radius br_black-3 modal-footer p_3 relative">
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close"><i class="fa-times fas"></i> Close</button>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 8618
13.20.1 Attachments Big Button
On player pages use the big button for attachments. The text only displays when the view port is medium and up.
Example
<a title="download attachments" class="btn btn-secondary btn-lg p-x_4 p_3 c_white" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
<i class="far fa-paperclip"></i>
<span class="display_none inline-block:md"> Attachments</span>
</a>Code Sample
Source: dist/css/virtual_boot.css, line 8634
13.20.1.1 Attachments Big Button (Disabled)
On player pages use the big button for attachments. The text only displays when the view port is medium and up.
Example
Attachments
<span class="btn btn-secondary btn-lg disabled p-x_4 p_3 c_white" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
<i class="far fa-paperclip"></i>
<span class="display_none inline-block:md"> Attachments</span>
</span>Code Sample
Source: dist/css/virtual_boot.css, line 7981
13.21 Program
Programs are build via sessions, presentations, and workshops.