3.1 Edu.Button
Source: dist/css/layout_demo.css, line 1311
3.1.1 Coming Soon
Example
Default styling
<a href="" class="bg_black-3 br_none br_radius c_black-7 cursor_not-allowed disabled font_1 font_2:md font_medium h:bg_black-3 h:c_black-7 h:undecorated undecorated inline-block m-t_0:md m-t_3 opacity_5 p-x_4 p-y_3 shadow_emboss-light text_center w_100 w_auto:md">Coming Soon</a>
Code Sample
Source: dist/css/layout_demo.css, line 1300
3.1.2 Learn More
Example
Default styling
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
Code Sample
Source: dist/css/layout_demo.css, line 1322
3.1.3 List Item
Example
Default styling
<div class="br-b_1 br_black-8 lh_2 br_solid p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
<a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
<i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 611
3.2 Headlines With Icons
Source: dist/css/layout_demo.css, line 635
3.2.1 Guidelines & Policies
Example
Default styling
Guidelines & Policies
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-book-medical p-r_3"></i>
Guidelines & Policies
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 815
3.2.2 Self-paced Learning
Example
Default styling
Self-paced Learning
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-book-reader p-r_3"></i>
Self-paced Learning
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 695
3.2.3 Resources
Example
Default styling
Resources
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-clipboard-user p-r_3"></i>
Resources
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 755
3.2.4 Webinars
Example
Default styling
Webinars
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-desktop-alt p-r_3"></i>
Webinars
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 740
3.2.5 Infographics
Example
Default styling
Infographics
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-file-chart-pie p-r_3"></i>
Infographics
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 770
3.2.6 Articles
Example
Default styling
Articles
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-file-medical-alt p-r_3"></i>
Articles
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 725
3.2.7 Images
Example
Default styling
Images
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-images p-r_3"></i>
Images
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 620
3.2.8 Clinical Trials
Example
Default styling
Clinical Trials
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-microscope p-r_3"></i>
Clinical Trials
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 665
3.2.9 Articles and Abstracts
Example
Default styling
Articles and Abstracts
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-newspaper p-r_3"></i>
Articles and Abstracts
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 680
3.2.10 Patient Case Quizzes
Example
Default styling
Patient Case Quizzes
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-notes-medical p-r_3"></i>
Patient Case Quizzes
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 872
3.2.11 On Demand
Example
Default styling
On Demand
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<span class="fa-stack font_n2">
<i class="fa-rectangle-landscape fas fa-stack-2x"></i>
<i style="font-size:80%" class="fa-play-circle fas c_white fa-stack-1x"></i>
</span>
On Demand
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 785
3.2.12 Podcasts
Example
Default styling
Podcasts
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-podcast p-r_3"></i>
Podcasts
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 800
3.2.13 Featured
Example
Default styling
Featured
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-stars p-r_3"></i>
Featured
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 830
3.2.14 Clinical Toolkit
Example
Default styling
Clinical Toolkit
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<span class="fa-stack font_n2">
<i class="fa-box fa fa-stack-2x"></i>
<i style="top: 22%;font-size: 75%;" class="fa-tools fas c_white fa-stack-1x"></i>
</span>
Clinical Toolkit
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 650
3.2.15 Expert Consensus
Example
Default styling
Expert Consensus
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-user-chart p-r_3"></i>
Expert Consensus
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 710
3.2.16 Expert Panel Discussions
Example
Default styling
Expert Panel Discussions
<h1 class="font_display c_acc font_5 p-x_4:lg p-x_3">
<i class="far fa-users-class p-r_3"></i>
Expert Panel Discussions
</h1>
Code Sample
Source: dist/css/layout_demo.css, line 939
3.3 Snippet Blocks with List
Example
Default styling
Test your knowledge and sharpen your diagnostic skills to bring appropriate treatment to your patients sooner.
<div class="flex flex_column flex_row:md gap-x_4 max-w_70">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3">
<i class="fa-notes-medical far fa-stack-2x text-shadow_black-1"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display">Patient Case Quizzes</div>
<p class="lh_2 font_1 p-b_3">Test your knowledge and sharpen your diagnostic skills to bring appropriate treatment to your patients sooner.</p>
<section class="br_1 br_solid br_primary br-r_0 br-l_0 font_0">
<div class="br-b_1 br_black-8 lh_2 br_solid p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
<a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
<i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
</div> <div class="br-b_1 br_black-8 lh_2 br_solid p_3 h:bg_primary-5 c_black m-b_n1 flex flex_inline font_ui lh_2">
<a class="link h:undecorated undecorated c_black inline-block" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia praesentium reiciendis et molestiae pariatur vero veritatis nisi autem labore, quasi hic aspernatur! Minus minima temporibus saepe eveniet officia. Eaque, error!</a>
<i class="br-l_2 br_solid br_white-5 c_primary fa-arrow-right far lh_5 m-r_3 p-l_3 self_center font_1:lg font_0:md font_n2 m-l_auto flex_none"></i>
</div> </section>
</main>
</div>
Code Sample
3.4 Edu.SimpleSnippet
Source: dist/css/layout_demo.css, line 988
3.4.1 Snippet Blocks: Guidelines & Policies
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-book-medical fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Guidelines & Policies</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1276
3.4.2 Snippet Blocks: Self-paced Learning
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-book-reader fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Self-paced Learning</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 914
3.4.3 Snippet Blocks: Certified Education
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3">
<i class="fa-certificate fa-stack-2x fas text-shadow_black-1"></i>
<i style="font-size:85%" class="c_white fa-book-reader fa-stack-1x fas text-shadow_black-n1"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display">Certified Education</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1084
3.4.4 Snippet Blocks: Resources
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-clipboard-user fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Resources</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1180
3.4.5 Snippet Blocks: Webinars
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-desktop-alt fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Webinars</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1156
3.4.6 Snippet Blocks: Infographics
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-file-chart-pie fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Infographics</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1204
3.4.7 Snippet Blocks: Articles
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-file-medical-alt fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Articles</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1132
3.4.8 Snippet Blocks: Images
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-images fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Images</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 964
3.4.9 Snippet Blocks: Clinical Trials
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-microscope fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Clinical Trials</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1036
3.4.10 Snippet Blocks: Articles and Abstracts
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-newspaper fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Articles and Abstracts</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1060
3.4.11 Snippet Blocks: Patient Case Quizzes
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-notes-medical fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Patient Case Quizzes</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 889
3.4.12 Snippet Blocks: On Demand
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3">
<i class="fa-rectangle-wide fas c_acc fa-stack-2x text-shadow_black-1 "></i>
<i style="font-size:80%" class="fa-play-circle fas c_white fa-stack-1x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display">On Demand</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1228
3.4.13 Snippet Blocks: Podcasts
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-podcast fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Podcasts</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1252
3.4.14 Snippet Blocks: Featured
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-stars fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Featured</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 847
3.4.15 Snippet Blocks: Clinical Toolkit
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4">
<aside class="br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3">
<i class="fa-box fa fa-stack-2x text-shadow_black-1"></i>
<i style="top: 22%;font-size: 75%;" class="c_acc-4 fa-stack-1x fa-tools fas"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display">Clinical Toolkit</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1012
3.4.16 Snippet Blocks: Expert Consensus
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-user-chart fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Expert Consensus</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>
Code Sample
Source: dist/css/layout_demo.css, line 1108
3.4.17 Snippet Blocks: Expert Panel Discussions
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!
<div class="flex flex_column flex_row:md gap-x_4 ">
<aside class=" br-b_2 br_none:md br_primary-3 br_solid c_acc-n1 flex_none font_10:md font_5 m-b_n3 m-t_4:md p-r_0:md p_4 self_start:md self_strech text_center">
<span class="fa-stack m-x_2 m-y_3 text-shadow_black-1">
<i class="fa fa-users-class fa-stack-2x"></i>
</span>
</aside>
<main class="flex_auto br-l_1 br_black-2 br_none br_solid:md p-l_5:md p_4">
<div class="c_primary-n2 font_5 font_display text_center text_left:md">Expert Panel Discussions</div>
<p class="lh_2 font_1 p-b_3">Lorem ipsum dolor sit amet consectetur adipisicing elit. At labore dignissimos alias ratione blanditiis voluptatem tempora quod repellendus, maxime distinctio consequatur dicta cupiditate saepe fuga voluptatibus ad, veritatis laudantium? Ab!</p>
<section>
<a href="" class="btn_acc-primary h:undecorated undecorated m-t_0:md m-t_3 shadow_overlap-light w_100 w_auto:md">Learn More <i class="fas fa-chevron-right"></i></a>
</section>
</main>
</div>