Source: dist/css/virtual_boot.css, line 7799
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 8308
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
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 8839
13.1.1 Action Buttons Clear Search
This action button is used to clear the search filters and parameters.
Example
Default styling
<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 8351
13.1.2 Embargoed Attachment Actions Buttons
Example
Default styling
<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 8266
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
<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 8280
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
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 8294
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
<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 8435
13.1.4 Action Buttons Featured
The Featured Actions buttons never have the calendar reminder button.
Example
Default styling
<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 8334
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
Default styling
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 8372
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
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 8415
13.1.7 Action Buttons On Demand
The On Demand Actions buttons never have the calendar reminder button.
Example
Default styling
<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 8394
13.1.8 Action Buttons Only
The Actions buttons are a combination of functions and a link to the education materials player.
Example s
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 8475
13.2.1 Abstract Flag Legend
Example
Default styling
-
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 8455
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
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 7911
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
Default styling
- 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 8669
13.4.1.1 Border Top Primary
Used in dividing lists of items.
Example
Default styling
br-t_1 br_black-3 br_solid
br-t_1 br_black-3 br_solidCode Sample
Source: dist/css/virtual_boot.css, line 8967
13.5 Collapse/Expand
The collapse/expand icon is used to collapse and expand the facet group.
Example
Default styling
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 8988
13.5.1 Collapse/Expand No Text
The collapse/expand icon is used to collapse and expand the facet group.
Example
Default styling
<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 7847
13.6 Credit Dot
Dots are used to indicate the credit that this education offers.
Example s
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 7874
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
Default styling
- 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 7896
13.6.2 Non Accredited
description
Example
Default styling
Industry Session | Nonaccredited
<strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong>Code Sample
13.7 Sub.Faculty
Source: dist/css/virtual_boot.css, line 12043
13.7.1 Twitter Button
Description: When a faculty member has a twitter handle, we can display a twitter button.
Data.Faculty.TwitterHandle - Twitter Handle
Data Elements:
Example
Default styling
<a class="bg_twitter br_radius c_white font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 h:c_white h:undecorated p-x_4 p_3" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
<i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
<i class="fa-at fas opacity_8 p-r_1"></i>
Tweat_DrSoda</a>Code Sample
Source: dist/css/virtual_boot.css, line 8684
13.8 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
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 8713
13.8.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
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 8812
13.8.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
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 8784
13.8.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
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 8750
13.8.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
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.9 Sub.Header
Source: dist/css/virtual_boot.css, line 8247
13.9.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
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 8228
13.9.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
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 8654
13.10 Title
description
Example
Default styling
Markup:
Markup:Code Sample
Source: dist/css/virtual_boot.css, line 9172
13.11 Pagination
Pagination is used to navigate through the results.
Example
Default styling
<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.12 Sub.Player
Source: dist/css/virtual_boot.css, line 8084
13.12.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
Default styling
<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 8149
13.12.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
Default styling
<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 8117
13.12.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
Default styling
<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 8529
13.12.2 Chat Window
The chat window is used to display the chat in player pages.
Example
Default styling
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 8576
13.12.3 CIO Window
CIO is a survey widget that allows faculty to collect questions and polls from participants.
Example
Default styling
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 8216
13.13 Playing Date Time
When presenting the playing date and time this simple dot pattern is a good solution.
Example
Default styling
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.14 Sub.Presentation
Source: dist/css/virtual_boot.css, line 8061
13.14.1 Presentation List
List of Presentations is similar DOM independent of the context.
Sub.Presentation.ListItem - List Item
Sub.Presentation.ListItemWithDetails - List Item with Details
Sub Components in Design:
Example
Default styling
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)
- Introduction 1 min
- Presentation 25 min
- Panel Discussion 5 min
-
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>
<div class="br-b_2 br_black-2 br_solid m-b_n3 m-t_3 m-x_n4">
<button class="bg_black-2 bg_transparent br-bl_square br-br_square br_0 br_br_square c_primary-n2 h:c_primary-n4 font-size_down-1 link m-x_4 p-x_4 p-y_3 lh_1" type="button" data-toggle="collapse" data-target="#extendPresentationData" aria-expanded="true" aria-controls="extendPresentationData" data-bs-toggle="collapse">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i> Presentation Details </button>
<div class="collapse show" id="extendPresentationData" style="">
<div class="bg_black-2 br_none br_square card card-body">
<ul class="ul_none flex flex_column items_stretch">
<li class="br-b_1 br_solid br_black-3"> Introduction <span class="c_primary font_bold float_right">1 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Presentation <span class="c_primary font_bold float_right">25 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Panel Discussion <span class="c_primary font_bold float_right">5 min</span>
</li>
</ul>
</div>
</div>
</div>
</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 7977
13.14.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
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)
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
Source: dist/css/virtual_boot.css, line 8010
13.14.3 Presentation List Item With Details
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
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)
- Introduction 1 min
- Presentation 25 min
- Panel Discussion 5 min
FORMAT:
This element uses data that has strict data formatting requirements. See the data tab for more information.NOTE:
This might not function completely because of the JavaScript on the page in side the styleguide documentation.<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>
<div class="br-b_2 br_black-2 br_solid m-b_n3 m-t_3 m-x_n4">
<button class="bg_black-2 bg_transparent br-bl_square br-br_square br_0 br_br_square c_primary-n2 h:c_primary-n4 font-size_down-1 link m-x_4 p-x_4 p-y_3 lh_1" type="button" data-toggle="collapse" data-target="#extendPresentationData" aria-expanded="true" aria-controls="extendPresentationData" data-bs-toggle="collapse">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i> Presentation Details </button>
<div class="collapse show" id="extendPresentationData" style="">
<div class="bg_black-2 br_none br_square card card-body">
<ul class="ul_none flex flex_column items_stretch">
<li class="br-b_1 br_solid br_black-3"> Introduction <span class="c_primary font_bold float_right">1 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Presentation <span class="c_primary font_bold float_right">25 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Panel Discussion <span class="c_primary font_bold float_right">5 min</span>
</li>
</ul>
</div>
</div>
</div>
</li>Code Sample
13.15 Sub.Search
Source: dist/css/virtual_boot.css, line 9053
13.15.1 Search Bar
Simple Search Bar
Example
Default styling
<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 9008
13.15.2 Facet Checkbox
The single checkbox for a facet.
Example
Default styling
<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 9029
13.15.3 Facet Checkbox With Trash
The single checkbox that is generated by the type ahead filter search. The trash button removes the filter.
Example
Default styling
<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 8857
13.15.4 Faceted Search
Facet Groups
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Sub Components in Design:
Example
Default styling
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_7405" id="checkfacet_7405" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7405" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7405ut 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_2981" id="checkfacet_2981" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2981" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2981ut 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_1052" id="checkfacet_1052" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_1052" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_1052ut 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_8930" id="checkfacet_8930" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8930" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8930ut 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_6253" id="checkfacet_6253" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_6253" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_6253ut 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 8929
13.15.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
Default styling
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_6428" id="checkfacetfacet_6428" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_6428" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_6428</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_8914" id="checkfacetfacet_8914" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_8914" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_8914</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 8893
13.15.5 Faceted Search
Facet Groups
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Sub Components in Design:
Example
Default styling
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_5271" id="checkfacet_5271" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5271" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5271ut 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_3820" id="checkfacet_3820" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3820" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3820ut 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_0435" id="checkfacet_0435" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0435" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0435ut 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_9990" id="checkfacet_9990" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9990" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9990ut 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_3352" id="checkfacet_3352" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3352" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3352ut 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 9104
13.15.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
Default styling
<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 9140
13.15.7 Result Overview
Small strip of data that shows the number of results and the time it took to search.
Example
Default styling
-
- 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 8627
13.16 Section Header
default - Grid
Example
Default styling
<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.17 Sub.Style
Source: dist/css/virtual_boot.css, line 8612
13.17.1 Program Borders Inside
CSS Classes on the Article tag of all program elements
Example
Default styling
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 8597
13.17.2 Program Borders OutSide
CSS Classes on the Article tag of all program elements
Example
Default styling
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.18 Sub.System
Source: dist/css/virtual_boot.css, line 9286
13.18.1 No Access Trouble Shooting
The instructions to the user when they land on the "No Access" to the page.
Example
Default styling
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 9259
13.18.2 Member Profile Data
Data for the Member Profile that is visible for the user.
Example
Default styling
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 7930
13.19 Tags
Example
Default styling
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 7941
13.19.1 Category Tag
Category Tags are singular tags that divide content. An item can only have a single tag from a category group.
Example
Default styling
- 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 7958
13.19.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
Default styling
- 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 7817
13.20 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
Default styling
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 8179
13.21 Attachments Modal
Description:
Example
Default styling
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 8497
13.21.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
Default styling
<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 8513
13.21.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
Default styling
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 7808
13.22 Program
Programs are build via sessions, presentations, and workshops.