10.1 Sub.ActionButtons
Source: dist/css/library_boot.css, line 7537
10.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/library_boot.css, line 8571
10.1.2 Favorite/Bookmark Button
This button has an active and deactivate state depending on the users select of that media item.
Example s
<a class="inline-block m-x_n3 m-t_n1 [modifier]">
<span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
<i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
<i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1 text-shadow_black-n1"></i>
</span>
</a>Code Sample
Source: dist/css/library_boot.css, line 8862
10.1.3 Like Buttons
This buttons are used to rate the videos and download the attachments.
Example
Default styling
<ul class="ul_none flex flex_row lowercase flex flex_row gap_2">
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-up"></i></a>
</li>
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-down"></i></a>
</li>
<li class="br_solid br_black-3 br_radius br_1 h:bg_black-3 m-l_auto">
<a class="p-y_3 p-x_4 " href="#"><i class="fal fa-paperclip"></i> Attachments</a>
</li>
</ul>Code Sample
10.2 Sub.Carousel
Source: dist/css/library_boot.css, line 8709
10.2.1 Carousel Custom Nav
Tiny Slider custom
Example
Default styling
<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider1-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="prev bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-left"></i>
</li>
<li class="next bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-right"></i>
</li>
</ul>
</div>Code Sample
Source: dist/css/library_boot.css, line 8759
10.2.1.1 Carousel Custom Disabled
Tiny Slider custom
Example
Default styling
<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider3-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-left opacity_3"></i>
</li>
<li class="disabled next bg_white-8 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-right opacity_3"></i>
</li>
</ul>
</div>Code Sample
Source: dist/css/library_boot.css, line 8734
10.2.2 Carousel Custom Nav Vertical
Tiny Slider custom
Example
Default styling
<div class="customize-tools relative">
<ul class="absolute b_4 r_0 l_0 controls ul_none font-size_up-2 c_black-6 flex flex_row gap-x_4" id="slider-customize-controls-vertical" aria-label="Carousel Navigation" tabindex="0">
<li class="prev bg_white-8 block br-br_radius br-l_0 br-tr_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="prev">
<i class="fal fa-chevron-up"></i>
</li>
<li class="next bg_white-8 block br-bl_radius br-r_0 br-tl_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="next">
<i class="fal fa-chevron-down"></i>
</li>
</ul>
</div>Code Sample
Source: dist/css/library_boot.css, line 8210
10.3 Class Lists
This is a combination of the classes that build common decorative elements or spacing in the design.
Source: dist/css/library_boot.css, line 8223
10.3.1 Body Classes
The list of classes used on the body tag
Example
Default styling
bg_black-4 w_100 p_3:md p_2
NOTE:
Combination of classes used as a common decorators.bg_black-4 w_100 p_3:md p_2Code Sample
10.3.2 Sub.ClassList.Border
Source: dist/css/library_boot.css, line 8537
10.3.2.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/library_boot.css, line 8522
10.3.2.2 Border Top Primary
Used in dividing lists of items.
Example
Default styling
br-t_1 br_primary-2 br_solid
br-t_1 br_primary-2 br_solidCode Sample
10.3.3 Sub.ClassList.Inset
Source: dist/css/library_boot.css, line 8291
10.3.3.1 Inset level_down
The list of classes used on the body tag
Example
Default styling
inset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1
NOTE:
Combination of classes used as a common decorators.inset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1Code Sample
Source: dist/css/library_boot.css, line 8308
10.3.3.2 Inset level_down-1
The list of classes used on the body tag
Example
Default styling
inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light
NOTE:
Combination of classes used as a common decorators.inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_lightCode Sample
Source: dist/css/library_boot.css, line 8325
10.3.3.3 Inset level_down-2
The list of classes used on the body tag
Example
Default styling
inset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius texture_light
NOTE:
Combination of classes used as a common decorators.inset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius texture_lightCode Sample
10.3.3.4 Sub.ClassList.Inset.margin
Source: dist/css/library_boot.css, line 8378
10.3.3.4.1 Inset Margin Level -1
The list of classes used on the body tag
Example
Default styling
m-x_n2 m-x_n3:md m-x_n4:lg
NOTE:
Combination of classes used as a common decorators.m-x_n2 m-x_n3:md m-x_n4:lgCode Sample
Source: dist/css/library_boot.css, line 8342
10.3.3.5 Inset padding Level 0
The list of classes used on the body tag
Example
Default styling
p_2 p_3:md
NOTE:
Combination of classes used as a common decorators.p_2 p_3:mdCode Sample
Source: dist/css/library_boot.css, line 8360
10.3.3.5.1 Inset padding Level 1
The list of classes used on the body tag
Example
Default styling
p_2 p_3:md p_4:lg
NOTE:
Combination of classes used as a common decorators.p_2 p_3:md p_4:lgCode Sample
Source: dist/css/library_boot.css, line 8396
10.3.3.5.2 Inset padding Level 2
The list of classes used on the body tag
Example
Default styling
p_3 p_4:lg
NOTE:
Combination of classes used as a common decorators.p_3 p_4:lgCode Sample
Source: dist/css/library_boot.css, line 8414
10.3.3.5.3 Inset padding Level 3
The list of classes used on the body tag
Example
Default styling
p_4
NOTE:
Combination of classes used as a common decorators.p_4Code Sample
Source: dist/css/library_boot.css, line 8432
10.3.3.5.4 Inset padding Level 4
The list of classes used on the body tag
Example
Default styling
p_4 p_5:lg
NOTE:
Combination of classes used as a common decorators.p_4 p_5:lgCode Sample
Source: dist/css/library_boot.css, line 8257
10.3.3.6 Inset Level_up
The list of classes used on the body tag
Example
Default styling
inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2
NOTE:
Combination of classes used as a common decorators.inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2Code Sample
Source: dist/css/library_boot.css, line 8274
10.3.3.7 Inset Level_up-1
The list of classes used on the body tag
Example
Default styling
inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2
NOTE:
Combination of classes used as a common decorators.inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2Code Sample
Source: dist/css/library_boot.css, line 8240
10.3.4 Page Area
The list of classes used on the body tag
Example
Default styling
p_2 p_3:md isolation_isolate br_radius bg_white-7
NOTE:
Combination of classes used as a common decorators.p_2 p_3:md isolation_isolate br_radius bg_white-7Code Sample
10.3.5 Sub.ClassList.Vertical
Source: dist/css/library_boot.css, line 8450
10.3.5.1 Vertical padding Level 0
The list of classes used on the body tag
Example
Default styling
p-y_2 p-y_3:md
NOTE:
Combination of classes used as a common decorators.p-y_2 p-y_3:mdCode Sample
Source: dist/css/library_boot.css, line 8468
10.3.5.1.1 Vertical padding Level 1
The list of classes used on the body tag
Example
Default styling
p-y_2 p-y_3:md p-y_4:lg
NOTE:
Combination of classes used as a common decorators.p-y_2 p-y_3:md p-y_4:lgCode Sample
Source: dist/css/library_boot.css, line 8486
10.3.5.1.2 Vertical padding Level 2
The list of classes used on the body tag
Example
Default styling
p-y_3 p-y_4:lg
NOTE:
Combination of classes used as a common decorators.p-y_3 p-y_4:lgCode Sample
Source: dist/css/library_boot.css, line 8504
10.3.5.1.3 Vertical padding Level 3
The list of classes used on the body tag
Example
Default styling
p-y_4 p-y_5:lg
NOTE:
Combination of classes used as a common decorators.p-y_4 p-y_5:lgCode Sample
Source: dist/css/library_boot.css, line 7665
10.4 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/library_boot.css, line 7686
10.4.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/library_boot.css, line 8552
10.5 Credits Chiclets
Credits show in the design when they are available to be claimed by the media they are on.
Example s
default
there is no default version of credits it is always a type.
default
CME
CME Credits
CME
CNE
CNE Credits
CNE
<span class="bg_[modifier]-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">[modifier]</span>Code Sample
10.5.1 Sub.Credit.Chiclets
Source: dist/css/library_boot.css, line 8955
10.5.1.1 Credit Chiclets Horizontal
Horizontal list of credit chiclets.
Sub.Credit - Credit Chiclet
Sub Components in Design:
Example
Default styling
- CME
- CNE
- AAPA
<ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span> </li>
</ul>Code Sample
10.6 Sub.Data
Source: dist/css/library_boot.css, line 8822
10.6.1 Attachment Link
Link to attachments. it should state pdf or zip depending
Example
Default styling
<li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
Attachments
</a>
</li>Code Sample
Source: dist/css/library_boot.css, line 8842
10.6.1.1 Attachment Link ZIP
Link to attachments. it should state pdf or zip depending
Example
Default styling
<li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
<a href="#" class="undecorated h:undecorated expanded-click-area">
<span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
Attachments
</a>
</li>Code Sample
Source: dist/css/library_boot.css, line 8784
10.6.2 Duration
The length of the clip of video or all the of the lengths of the combined clips.
Example
Default styling
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
minutes
</li>Code Sample
Source: dist/css/library_boot.css, line 8804
10.6.3 Presentation Count
Number of presentations in the session.
Example
Default styling
<li class="inline-block p-r_3 p_2 lh_0">
<span class="font-size_up c_accent-n2 block">4</span>
presentations
</li>Code Sample
Source: dist/css/library_boot.css, line 7959
10.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
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/library_boot.css, line 7988
10.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
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/library_boot.css, line 8087
10.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
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/library_boot.css, line 8059
10.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
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/library_boot.css, line 8025
10.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
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
Source: dist/css/library_boot.css, line 9079
10.9 Legal RoadBlock Sub Components
The legal roadblock is a page that stops the user when they haven't accepted the terms of use or any other legal agreements needed for the use of the product.
Source: dist/css/library_boot.css, line 9134
10.9.1 Legal Attestation Statement
This statement is used to attest that the user has read and accepted the legal agreement. This follows all Legal Content Blocks. Clicking the button will flip the btn-secondary state to 'btn-sucess active'
Example s
.btn-success.active
the accepted state
<footer id="Agreement1">
<div class="bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>
<button class="btn btn-secondary [modifier] c_white h:undecorated float_right"><i class="fas fa-check display_none a:inline-block"></i> I agree</button>
</footer>Code Sample
Source: dist/css/library_boot.css, line 9091
10.9.2 Legal Content Block
A legal block will block a user from the program if they user has not signed it. If there is more then one user block all must be accepted before the user can proceed.
ClassList: Sub.ClassList.Vertical.padding.up-1 - Vertical Padding Up 1 Sub.ClassList.Border.PrimaryTop - Border Primary Top
Example
Default styling
ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement
The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).
By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product.
Click to Read Full Terms of Service.
I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.
<article class="isolation_isolate p_1 p-b_4 relative">
<nav class="r_0 sticky t_0 z_1">
<div class="absolute flex flex_nowrap flex_row gap-x_3 r_4">
<!-- Helper Jump links -->
<a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2" href="#TopAgreement1">
<span><i class="fas fa-arrow-up p-r_2"></i>top</span>
</a>
<a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2" href="#Agreement1">
<span><i class="fas fa-arrow-down p-r_2"></i>scroll down</span>
</a>
<!-- Helper Jump links -->
</div>
</nav>
<header class="bg_white p-t_0 p-b_3 relative z_3">
<h2 class="bg_white m-t_n2 m_0 p-y_2 p-y_3:md p-y_4:lg">ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>
</header>
<main class="z_0 isolation_isolate p-y_2 p-y_3:md p-y_4:lg br-t_1 br_primary-2 br_solid">
<!--- Agreement HTML START -->
<p class="font-size_up">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”). </p><p class="font-size_up">
By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>
<p class="font-size_up"><a href="#" class="c_accent-n2 font_bold font_ui link" target="_blank">Click to Read Full Terms of Service.</a></p>
<p class="">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>
<!--- Agreement HTML END -->
</main>
</article>Code Sample
Source: dist/css/library_boot.css, line 7872
10.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
10.12 Sub.Player
Source: dist/css/library_boot.css, line 8983
10.12.1 Auxiliary Data
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
ClassList: Sub.ClassList.Border.PrimaryTop - Border Primary Top
Sub.Credits.NonAccredited - Non Accredited
Sub.FacultyList.AuxSession - Session Faculty Lists
Sub.Credit.Chiclets.Horizontal - Credit Chiclets Horizontal
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Sub Components in Design:
Example
Default styling
<aside class="">
<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="flex flex_row font_n3 gap_2 justify_start flex_wrap self_start ul_none uppercase">
<li class="lh_0 flex_none">
<span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span> </li>
<li class="lh_0 flex_none">
<span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span> </li>
<li class="lh_0 flex_none">
<span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</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 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 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/library_boot.css, line 8663
10.13 Progress Player Bar
shows users where they left off with the player.
Example s
default
Has zero player
50
50% played
<aside class="bg_secondary-3 h:bg_primary-3 p-x_4 p-y_3 br_radius flex flex_row texture_dust relative">
<a class="expanded-click-area" href="player@[modifier]"><i class="fa fa-play p-x_3 c_primary"></i></a>
<div class="progress w_100 self_center br_black-2 br_solid bg_black-4 br_1 br_round h_0lh font_n4">
<div class="progress-bar bg_accent" role="progressbar" style="width: [modifier]%" aria-valuenow="[modifier]" aria-valuemax="100"></div>
</div>
</aside>Code Sample
10.14 Sub.Search
Source: dist/css/library_boot.css, line 9155
10.14.1 Search Filter Rail
The filter box on the search page.
Example
Default styling
-
Type Ahead FilterFiltering Bycollapse
-
-
Primary Categorycollapse
-
-
Drugs Genericcollapse
-
<div id="filterZone" class="{aspect_1_1:md} {nav-mined} nav-maxed self_start bg_black-3 br_1 br_black-2 br_radius br_solid flex_auto p_2 p_3:md shadow_emboss-light transition_3 flex flex_column ">
<nav id="FilterNavContainer" class="flex_auto overflow_hidden self_stretch font_4:lg font_3:md font_2 font_display font_display">
<ul class="flex flex_column:md flex_row gap_3 justify_start:md ul_none w_100 w_auto:md">
<li class="a:bg_primary a:c_white a:shadow_overlap-light {aspect_1_1:md} br_radius c_white-8 flex_none grid h:bg_black-7 h:c_white h:shadow_overlap-light nav-item p_0:md p_3">
<a class="c_inherit-all h:undecorated p_3 lh_1 m-x_n1">
<i class="far fa-filter p-x_2:md p-y_3 p-y_0:md"></i>
<span class="font-size_down label lh_0 lowercase self_center font_medium {display_none:md}">Filter</span>
</a>
</li>
</ul>
</nav>
<ul id="filterFacets" class="ul_none font_n1 {display_none} opacity_none transition_3 min-h_30:md">
<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter1">
<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_9488" id="checkfacetfacet_9488" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_9488" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_9488</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_7474" id="checkfacetfacet_7474" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_7474" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_7474</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> <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter2" >
<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_9512" id="checkfacet_9512" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9512" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9512ut 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_7847" id="checkfacet_7847" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7847" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7847ut 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_9875" id="checkfacet_9875" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9875" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9875ut 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_1526" id="checkfacet_1526" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_1526" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_1526ut 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_9957" id="checkfacet_9957" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9957" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9957ut 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> <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter3" >
<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_5570" id="checkfacet_5570" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5570" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5570ut 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_7673" id="checkfacet_7673" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7673" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7673ut 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_6609" id="checkfacet_6609" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_6609" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_6609ut 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_9656" id="checkfacet_9656" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9656" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9656ut 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_6685" id="checkfacet_6685" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_6685" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_6685ut 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> </ul>
<script>
let filterZone = document.getElementById("filterZone");
let filterZoneNav = filterZone.querySelector("nav");
let filterFacets = filterZone.querySelector("#filterFacets");
let filterZoneExpanded = true;
filterZoneNav.addEventListener("click", function () {
if (filterZoneExpanded) {
filterFacets.classList.toggle("opacity_0");
filterFacets.classList.toggle("opacity_none");
setTimeout(function () {
filterFacets.classList.toggle("{display_none}");
filterFacets.classList.toggle("display_none");
filterFacets.classList.toggle("min-h_0:md");
filterFacets.classList.toggle("min-h_30:md");
filterZone.classList.remove("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
filterZone.classList.add("aspect_1_1:md", "nav-mined", "{nav-maxed}");
filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
filterZoneExpanded = false;
}, 300);
return;
} else {
filterZone.classList.add("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
filterZone.classList.remove("aspect_1_1:md", "nav-mined", "{nav-maxed}");
filterFacets.classList.toggle("min-h_0:md");
filterFacets.classList.toggle("min-h_30:md");
filterFacets.classList.toggle("{display_none}");
filterFacets.classList.toggle("display_none");
setTimeout(function () {
filterFacets.classList.toggle("opacity_0");
filterFacets.classList.toggle("opacity_none");
filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
filterZoneExpanded = true;
}, 300);
return;
}
});
</script>
</div>Code Sample
Source: dist/css/library_boot.css, line 7751
10.14.2 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/library_boot.css, line 7706
10.14.3 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/library_boot.css, line 7727
10.14.4 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/library_boot.css, line 7555
10.14.5 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_5570" id="checkfacet_5570" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5570" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5570ut 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_7673" id="checkfacet_7673" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7673" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7673ut 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_6609" id="checkfacet_6609" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_6609" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_6609ut 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_9656" id="checkfacet_9656" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9656" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9656ut 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_6685" id="checkfacet_6685" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_6685" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_6685ut 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/library_boot.css, line 7627
10.14.5.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_9488" id="checkfacetfacet_9488" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_9488" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_9488</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_7474" id="checkfacetfacet_7474" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_7474" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> type ahead filter facet_7474</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/library_boot.css, line 7591
10.14.6 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_9512" id="checkfacet_9512" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9512" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9512ut 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_7847" id="checkfacet_7847" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7847" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7847ut 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_9875" id="checkfacet_9875" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9875" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9875ut 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_1526" id="checkfacet_1526" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_1526" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_1526ut 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_9957" id="checkfacet_9957" class="font-size_up"></div>
<div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9957" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9957ut 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/library_boot.css, line 7804
10.14.7 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/library_boot.css, line 7840
10.14.8 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/library_boot.css, line 8682
10.14.9 Time Markers
shows users where they results can be found in the result.
ClassList: Sub.ClassList.Inset.down-1 - Inset Down 1 Sub.ClassList.Inset.padding - Inset Padding
Example
Default styling
<aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
<strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
<ul class="ul_inline-pipe">
<li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 0:53</a></li>
<li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i> 2:30</a></li>
</ul>
</aside>Code Sample
10.15 Sub.Section
Source: dist/css/library_boot.css, line 8595
10.15.2 Section Header
Section Headers are styled the same
Example s
default
plan header
default
<header class="font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">[modifier]</h2></header>Code Sample
Source: dist/css/library_boot.css, line 8629
10.15.2.1 Section Header
Section Headers are styled the same
Example s
default
plan header
default
<header class="p-x_4 font_display font_regular c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">[modifier]</h2></header>Code Sample
Source: dist/css/library_boot.css, line 8612
10.15.3 Section Header Down
Section Headers are styled the same
Example s
default
plan header
default
<header class="font_display font_regular c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">[modifier]</h3></header>Code Sample
Source: dist/css/library_boot.css, line 8646
10.15.3.1 Section Header Down
Section Headers are styled the same
Example s
default
plan header
default
<header class="p-x_4 font_display font_regular c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">[modifier]</h3></header>Code Sample
Source: dist/css/library_boot.css, line 9908
10.15.4 Home Search Link Inset
A central interaction point for the user on the homepage.
ClassList: Sub.ClassList.Inset.up-1 - Inset up 1 Sub.ClassList.Inset.padding.up-4 - Padding up 4
Sub.Section.SearchBar - Search Bar with `disabled` Class
Navigation.Home.Utility - Quick Links
Sub Components in Design:
Example
Default styling
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 p_5:lg">
<div class="input-holder flex flex_row self_end relative w_100 p_2 p_3:md">
<input id="input_uniqueTextAndButton" name="input_uniqueTextAndButton" 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 br-tl_square br-br_square br-r_0 font_2"/>
<button class="disabled b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto" >
<i class="fas fa-search"></i>
<span class="inline-block:md display_none">Search</span>
</button>
</div> <nav class="utility-nav p-t_3 p-t_4:lg font_n3 font_0:md font_1:lg ">
<ul class="flex flex_row ul_none justify_center">
<li class="text_center p-x_2 block p-x_4:md lh_1">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-star block inline:md"></i><span class="display_none inline:md"> featured</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-sitemap block inline:md"></i><span class="display_none inline:md"> hot topics</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 text_center br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-heart block inline:md"></i><span class="display_none inline:md"> saved</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-play block inline:md"></i><span class="display_none inline:md"> continue watching</span></a
>
</li>
<li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
<a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
><i class="fal fa-sync block inline:md"></i><span class="display_none inline:md"> watch again </span></a
>
</li>
</ul>
</nav></div>Code Sample
Source: dist/css/library_boot.css, line 9934
10.15.5 Home Search Bar
The Search Bar is disabled on the Home Page when there is no content in the input field.
Example
Default styling
<div class="input-holder flex flex_row self_end relative w_100 p_2 p_3:md">
<input id="input_uniqueTextAndButton" name="input_uniqueTextAndButton" 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 br-tl_square br-br_square br-r_0 font_2"/>
<button class=" b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto" >
<i class="fas fa-search"></i>
<span class="inline-block:md display_none">Search</span>
</button>
</div>Code Sample
10.16 Sub.System
Source: dist/css/library_boot.css, line 8141
10.16.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/library_boot.css, line 8114
10.16.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
10.17 Sub.Tags
Source: dist/css/library_boot.css, line 9026
10.17.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/library_boot.css, line 9043
10.17.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/library_boot.css, line 9226
10.18 Youtube Embed Playlist
Example
Default styling
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLCROrnGF2SYByKd5KHoqjRZXM4hwlHgjH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>