Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

Basic HTML

Source: dist/css/cardiosmart_boot.css, line 12947

2 Basic HTML

The Arches Design System, at its core, is a Utility Class Styling Design. It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles. Arches rely on the browser or branding defaults for basic HTML styling. Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.

Source: dist/css/cardiosmart_boot.css, line 12957

2.1 Reading Typography

Reading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the "reading-typography" class is used on the parent container. Please note that the reading typography can still look a bit different look depending on the brand or the framework.

modifier classcustomizationusage
.inherit_colorremoves all color rules from colored typography and sets it to inherit.inverting a block of typography where all text and headlines should be white.
.font-size_upshifts all typography up one font size stepintro blocks of text where the text. Or in articles where you can shift all text up a size.
.font-size_downshifts all typography down one font size step.citation blocks or boiler plate content where the text should be smaller and less impactful.
.links_darkturns all links to the dark color standard.this is used in junction with the .inherit_color class.
.links_lightturns all links to the light color standard.this is used in junction with the .inherit_color class when text is on a dark background.
* there are further advanced features if you want to apply CSS Property Overrides.

Example

Default styling

User Name Log Out

This is the primary heading and there should only be one of these per page

sub heading

A small paragraph to emphasis and show important bits.

  • This is a list item
  • So is this - there could be more
  • Make sure to style list items to:
    • Not forgetting child list items
    • Not forgetting child list items
    • Not forgetting child list items
    • Not forgetting child list items
  • A couple more
  • top level list items

Don't forget Ordered lists:

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. Aliquam tincidunt mauris eu risus.

A sub heading which is not as important as the first, but is quite imporant overall

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Table Heading Table Heading
table data table data
table data table data
table data table data
table data table data

A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”

A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


#header h1 a {
    display: block;
    width: 300px;
    height: 80px;
}
A sub heading which is not as important as the second, but should be used with consideration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This heading plays a relatively small bit part role, if you use it at all

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine
<section class="max-w_65 reading-typography m_auto">
<div class="relative">
	<picture class="w_100">
		<source class="w_100" srcset="https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42" media="(min-width: 1200px)">
		<source class="w_100" srcset="https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42" media="(min-width: 768px)">
		<source class="w_100" srcset="https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42" media="(min-width: 400px)"> <source class="w_100" srcset="https://placeholder.pics/svg/400x300/171C6A-5A6CFF/FFFAEE/300x400" media="(min-width: 400px)">
		<img src="https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42" class="w_100" alt="">
	</picture>
    <div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
        <div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
            <span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
            <a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
        </div>
    </div>
</div>
  <h1>This is the primary heading and there should only be one of these per page</h1>
  <h6>sub heading</h6>
    <p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>
    <ul>
        <li>This is a list item</li>
        <li>So is this - there could be more</li>
        <li>Make sure to style list items to:
            <ul>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
                <li>Not forgetting child list items</li>
            </ul>
        </li>
        <li>A couple more</li>
        <li>top level list items</li>
    </ul>
    <p>Don't forget <strong>Ordered lists</strong>:</p>
    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        </li>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.
    </li></ol>
    <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <table>
    <thead><tr>
            <th>Table Heading</th>
            <th>Table Heading</th>
        </tr></thead>
        <tbody>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
        <tr>
            <td>table data</td>
            <td>table data</td>
        </tr>
    </tbody></table>
    <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <blockquote><p>“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”</p></blockquote>
    <h4>A sub heading which is not as important as the second, but should be used with consideration</h4>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <pre><code>
#header h1 a {
    display: block;
    width: 300px;
    height: 80px;
}
</code></pre>
    <h5>A sub heading which is not as important as the second, but should be used with consideration</h5>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <dl>
   <dt>Definition list</dt>
   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
	commodo consequat.</dd>
	   <dt>Lorem ipsum dolor sit amet</dt>
	   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
	aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
	commodo consequat.</dd>
	</dl>
	<h6>This heading plays a relatively small bit part role, if you use it at all</h6>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<section>
<details>
        <summary ><strong>Table of Contents</strong></summary>
        <div>
            <ol>
                <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                </li>
                <li data-line="2" dir="auto">Arrhythmias</li>
                <li data-line="3" dir="auto">Coronary Artery Disease</li>
                <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                <li data-line="5" dir="auto">Valvular Disease</li>
                <li data-line="6" dir="auto">Pericardial Disease</li>
                <li data-line="7" dir="auto">Congenital Heart Disease</li>
                <li data-line="8" dir="auto">Vascular Diseases</li>
                <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                    System</li>
                <li data-line="12" dir="auto">
                    Miscellaneous
                    <ul>
                        <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                        <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                        <li data-line="15" dir="auto">Cardiac Critical Care</li>
                        <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                        <li data-line="17" dir="auto">Sports Cardiology</li>
                        <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                        <li data-line="19" dir="auto">Cardiovascular Operative Management
                        </li>
                        <li data-line="20" dir="auto">Pharmacology</li>
                        <li data-line="21" dir="auto">General Principles of Cardiovascular
                            Medicine</li>
                    </ul>
                </li>
            </ol>
        </div>
    </details>
Copy Code

Example s

.color_inherit.bg_acc.c_white.p_4.links_light

This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine
<div class="reading-typography  color_inherit bg_acc c_white p_4 links_light">
    <h1>Lorem Ipsum</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    <h2>Header Level 2</h2>
    <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
    <h3>Header Level 3</h3>
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>
    <button class="btn btn-primary">Button</button>
	<details>
        <summary ><strong>Table of Contents</strong></summary>
        <div>
            <ol>
                <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                </li>
                <li data-line="2" dir="auto">Arrhythmias</li>
                <li data-line="3" dir="auto">Coronary Artery Disease</li>
                <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                <li data-line="5" dir="auto">Valvular Disease</li>
                <li data-line="6" dir="auto">Pericardial Disease</li>
                <li data-line="7" dir="auto">Congenital Heart Disease</li>
                <li data-line="8" dir="auto">Vascular Diseases</li>
                <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                    System</li>
                <li data-line="12" dir="auto">
                    Miscellaneous
                    <ul>
                        <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                        <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                        <li data-line="15" dir="auto">Cardiac Critical Care</li>
                        <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                        <li data-line="17" dir="auto">Sports Cardiology</li>
                        <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                        <li data-line="19" dir="auto">Cardiovascular Operative Management
                        </li>
                        <li data-line="20" dir="auto">Pharmacology</li>
                        <li data-line="21" dir="auto">General Principles of Cardiovascular
                            Medicine</li>
                    </ul>
                </li>
            </ol>
        </div>
    </details>
</div>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 13125

2.1.2 Links States

This shows the look and feel of all the states of a text link, color, underline and decoration.

<ul class="flex flex_column ul_none">
    <li class="p_3"><a href="#random2">NORMAL: Donec non enim</a></li>
    <li class="p_3"><a href="#random1" class="pseudo-class-hover">HOVER:  Normal Donec non enim</a>
</li>
    <li class="p_3"><a href="#random3" class="pseudo-class-visited">VISITED: Normal Donec non enim</a>
</li>
</ul>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 11862

2.2 Table

Basic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.

Tables can have captions now.
PersonNumberThird Column
Someone Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One2800Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Source: dist/css/cardiosmart_boot.css, line 11770

2.3 Basic Inputs

Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only. To get full brand styling use a framework based version of arches.

Source: dist/css/cardiosmart_boot.css, line 11802

2.3.1 Inputs UC

Utility Class only build inputs

Example

Default styling

I am legend
I am also legend 
<form>
    <div class="m-b_3"><label class="m-b_3" for="example-input-email">Email address</label> <input type="email" id="example-input-email" placeholder="Enter email"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-password1">Number</label> <input type="number" id="example-input-number" placeholder="Number"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-password">Password</label> <input type="password" id="example-input-password" placeholder="Password"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-search">Search</label> <input type="search" id="example-input-serach" placeholder="Search .."></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-tel">Telephone number</label> <input type="tel" id="example-input-tel" placeholder="Telephone number"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-text">Text</label> <input type="text" id="example-input-text" placeholder="Enter some text here"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-url">Url</label> <input type="url" id="example-input-url" placeholder="Enter a url here"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-color">Color</label> <input type="color" id="example-inupt-color" placeholder="#fff"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date">Date</label> <input type="date" id="example-input-date" placeholder="date"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date-time">Date / Time</label> <input type="datetime" id="example-input-date-time" placeholder="date / time"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-date-time-local">Date / Time local</label> <input type="datetime-local" id="example-input-date-time-local" placeholder="date / time local"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-month">Month</label> <input type="month" id="example-input-month" placeholder="Month"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-week">Week</label> <input type="week" id="example-input-week" placeholder="Week"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-input-time">Time</label> <input type="time" id="example-input-time" placeholder="Time"></div>
    <div class="m-b_3"><label class="m-b_3" for="example-select1">Example select</label> <select id="example-select1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select></div>
    <div><label for="example-select2">Example multiple select</label> <select multiple="" id="example-select2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select></div>
    <div><label for="example-textarea">Example textarea</label> <textarea id="example-textarea" rows="3"></textarea></div>
    <div><label for="example-input-file">File input</label> <input type="file" id="example-input-file"></div>
    <fieldset>
        <legend>I am legend</legend>
        <div><label><input type="radio" name="options-radios" id="optionsR-radios1" value="option1" checked=""> Option one is this and that—be sure to include why it's great</label></div>
        <div><label><input type="radio" name="options-radios" id="options-radios2" value="option2"> Option two can be something else and selecting it will deselect option one</label></div>
        <div><label><input type="radio" name="optionsRadios" id="options-radios3" value="option3" disabled=""> Option three is disabled</label></div>
    </fieldset>
    <fieldset>
        <legend>I am also legend</legend><label for="checkbox-demo-1"><input type="checkbox" id="checkbox-demo-1"> Check me out</label> <label for="checkbox-demo-2"><input type="checkbox" id="checkbox-demo-2"> Or check me out</label>
    </fieldset>
    <div>
        <button type="button" name="button">Button</button>
        <input type="button" name="input" value="Input Button">
        <input type="submit" name="submit" value="Submit Button">
        <input type="reset" name="reset" value="Reset Button">
    </div>
</form>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 7327

2.3.2 Buttons

Description: Basic Buttons and modifiers.

Example s

.btn-primary

primary button

.btn-secondary

secondary button

.btn-shade

shade button

.btn-accent

accent button

.btn-success

success button

.btn-warning

warning button

.btn-alert

alert button

.btn-outline-primary

hollow button of all the above colors

.disabled

disabled button 

<button class="btn capitalize wrap wrap_balanced [modifier class]">[modifier class]</button>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 7305

2.3.2.1 Call to Action Buttons

Description: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.

Example s

Sign_Up

Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.

Purchase

Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.

Learn_More

Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.

Subscribe

Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.

Get_Started

Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.

NOTE:
The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content. 
<button class="btn btn-primary btn-lg capitalize">[modifier class]</button>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 7351

2.3.2.2 Buttons Sizes

Description: Basic Buttons have size modifiers of btn-sm or btn-lg.

Example s

.btn-primary

primary button

.btn-secondary

secondary button

.btn-shade

shade button

.btn-accent

accent button

.btn-success

success button

.btn-warning

warning button

.btn-alert

alert button

.btn-outline-primary

hollow button of all the above colors

.disabled

disabled button 

<div><button class="btn btn-sm capitalize wrap wrap_balanced [modifier class]">[modifier class]</button></div>
<div><button class="btn capitalize wrap wrap_balanced [modifier class]">[modifier class]</button></div>
<div><button class="btn btn-lg capitalize wrap wrap_balanced [modifier class]">[modifier class]</button></div>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 11779

2.3.3 Text Inputs

Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.

Example

Default styling

Utility Class

Bootstrap

<div class="flex_row flex gap-x_5">
	<div class="flex_auto">
		<h3>Utility Class</h3>
		<label for="example-input-email" class='m-b_3'>Email address</label>
		<input type="email" id="example-input-email" placeholder="Enter email"/>
	</div>
	<div class="flex_auto">
		<h3>Bootstrap</h3>
		<label for="exampleFormControlInput1" class="form-label">Email address</label>
		<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"/>
	</div>
</div>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 13152

2.4 Tables

The collection of modifications you can do with tables out of the box from Bootstrap Arches.

Example

Default styling

Tables

Documentation
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
ClassHeadingHeading
DefaultCellCell
PrimaryCellCell
SecondaryCellCell
SuccessCellCell
alertCellCell
WarningCellCell
InfoCellCell
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<article class="m-y_3" id="tables"><div class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2"><h3>Tables</h3><a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/content/tables/">Documentation</a></div><div><div class="bd-example"><table class="table table-striped"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-dark table-borderless"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="bd-example"><table class="table table-hover"><thead><tr><th scope="col">Class</th><th scope="col">Heading</th><th scope="col">Heading</th></tr></thead><tbody><tr><th scope="row">Default</th><td>Cell</td><td>Cell</td></tr><tr class="table-primary"><th scope="row">Primary</th><td>Cell</td><td>Cell</td></tr><tr class="table-secondary"><th scope="row">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class="table-success"><th scope="row">Success</th><td>Cell</td><td>Cell</td></tr><tr class="table-alert"><th scope="row">alert</th><td>Cell</td><td>Cell</td></tr><tr class="table-warning"><th scope="row">Warning</th><td>Cell</td><td>Cell</td></tr><tr class="table-info"><th scope="row">Info</th><td>Cell</td><td>Cell</td></tr></tbody></table></div><div class="bd-example"><table class="table table-sm table-bordered"><thead><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">Handle</th></tr></thead><tbody><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope="row">3</th><td colspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div></div></article>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 13165

2.5 Forms

Out of the box bootstrap forms.

Example

Default styling

Overview

Documentation
We'll never share your email with anyone else.
Radios buttons

Disabled forms

Documentation
Disabled radios buttons

Sizing

Documentation

Input group

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

Validation

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<article class="m-y_3"
         id="overview">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Overview</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/overview/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <div class="m-b_3"><label
                           for="exampleInputEmail1"
                           class="form-label">Email
                        address</label> <input type="email"
                           class="form-control"
                           id="exampleInputEmail1"
                           aria-describedby="emailHelp">
                    <div id="emailHelp"
                         class="form-text">We'll never share
                        your email with anyone else.</div>
                </div>
                <div class="m-b_3"><label
                           for="exampleInputPassword1"
                           class="form-label">Password</label>
                    <input type="password"
                           class="form-control"
                           id="exampleInputPassword1"></div>
                <div class="m-b_3 form-check"><input
                           type="checkbox"
                           class="form-check-input"
                           id="exampleCheck1"> <label
                           class="form-check-label"
                           for="exampleCheck1">Check me
                        out</label></div>
                <fieldset class="m-b_3">
                    <legend>Radios buttons</legend>
                    <div class="form-check"><input
                               type="radio"
                               name="radios"
                               class="form-check-input"
                               id="exampleRadio1"> <label
                               class="form-check-label"
                               for="exampleRadio1">Default
                            radio</label></div>
                    <div class="m-b_3 form-check"><input
                               type="radio"
                               name="radios"
                               class="form-check-input"
                               id="exampleRadio2"> <label
                               class="form-check-label"
                               for="exampleRadio2">Another
                            radio</label></div>
                </fieldset>
                <div class="m-b_3"><label class="form-label"
                           for="customFile">Upload</label>
                    <input type="file"
                           class="form-control"
                           id="customFile"></div>
                <div class="m-b_3 form-check form-switch">
                    <input class="form-check-input"
                           type="checkbox"
                           id="flexSwitchCheckChecked"
                           checked> <label
                           class="form-check-label"
                           for="flexSwitchCheckChecked">Checked
                        switch checkbox input</label></div>
                <div class="m-b_3"><label for="customRange3"
                           class="form-label">Example
                        range</label> <input type="range"
                           class="form-range"
                           min="0"
                           max="5"
                           step="0.5"
                           id="customRange3"></div><button
                        type="submit"
                        class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="disabled-forms">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Disabled forms</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <fieldset disabled
                          aria-label="Disabled fieldset example">
                    <div class="m-b_3"><label
                               for="disabledTextInput"
                               class="form-label">Disabled
                            input</label> <input type="text"
                               id="disabledTextInput"
                               class="form-control"
                               placeholder="Disabled input">
                    </div>
                    <div class="m-b_3"><label
                               for="disabledSelect"
                               class="form-label">Disabled
                            select menu</label> <select
                                id="disabledSelect"
                                class="form-select">
                            <option>Disabled select</option>
                        </select></div>
                    <div class="m-b_3">
                        <div class="form-check"><input
                                   class="form-check-input"
                                   type="checkbox"
                                   id="disabledFieldsetCheck"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledFieldsetCheck">Can't
                                check this</label></div>
                    </div>
                    <fieldset class="m-b_3">
                        <legend>Disabled radios buttons
                        </legend>
                        <div class="form-check"><input
                                   type="radio"
                                   name="radios"
                                   class="form-check-input"
                                   id="disabledRadio1"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledRadio1">Disabled
                                radio</label></div>
                        <div class="m-b_3 form-check"><input
                                   type="radio"
                                   name="radios"
                                   class="form-check-input"
                                   id="disabledRadio2"
                                   disabled> <label
                                   class="form-check-label"
                                   for="disabledRadio2">Another
                                radio</label></div>
                    </fieldset>
                    <div class="m-b_3"><label
                               class="form-label"
                               for="disabledCustomFile">Upload</label>
                        <input type="file"
                               class="form-control"
                               id="disabledCustomFile"
                               disabled></div>
                    <div
                         class="m-b_3 form-check form-switch">
                        <input class="form-check-input"
                               type="checkbox"
                               id="disabledSwitchCheckChecked"
                               checked
                               disabled> <label
                               class="form-check-label"
                               for="disabledSwitchCheckChecked">Disabled
                            checked switch checkbox
                            input</label></div>
                    <div class="m-b_3"><label
                               for="disabledRange"
                               class="form-label">Disabled
                            range</label> <input
                               type="range"
                               class="form-range"
                               min="0"
                               max="5"
                               step="0.5"
                               id="disabledRange"></div>
                    <button type="submit"
                            class="btn btn-primary">Submit</button>
                </fieldset>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="sizing">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Sizing</h3><a class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/form-control/#sizing">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <div class="m-b_3"><input
                       class="form-control form-control-lg"
                       type="text"
                       placeholder=".form-control-lg"
                       aria-label=".form-control-lg example">
            </div>
            <div class="m-b_3"><select
                        class="form-select form-select-lg m-b_3"
                        aria-label=".form-select-lg example">
                    <option selected>Open this select menu
                    </option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select></div>
            <div class="m-b_3"><input type="file"
                       class="form-control form-control-lg"
                       aria-label="Large file input example">
            </div>
        </div>
        <div class="bd-example">
            <div class="m-b_3"><input
                       class="form-control form-control-sm"
                       type="text"
                       placeholder=".form-control-sm"
                       aria-label=".form-control-sm example">
            </div>
            <div class="m-b_3"><select
                        class="form-select form-select-sm"
                        aria-label=".form-select-sm example">
                    <option selected>Open this select menu
                    </option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select></div>
            <div class="m-b_3"><input type="file"
                       class="form-control form-control-sm"
                       aria-label="Small file input example">
            </div>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="input-group">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Input group</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/input-group/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <div class="input-group m-b_3"><span
                      class="input-group-text"
                      id="basic-addon1">@</span> <input
                       type="text"
                       class="form-control"
                       placeholder="Username"
                       aria-label="Username"
                       aria-describedby="basic-addon1">
            </div>
            <div class="input-group m-b_3"><input type="text"
                       class="form-control"
                       placeholder="Recipient's username"
                       aria-label="Recipient's username"
                       aria-describedby="basic-addon2">
                <span class="input-group-text"
                      id="basic-addon2">@example.com</span>
            </div><label for="basic-url"
                   class="form-label">Your vanity
                URL</label>
            <div class="input-group m-b_3"><span
                      class="input-group-text"
                      id="basic-addon3">https://example.com/users/</span>
                <input type="text"
                       class="form-control"
                       id="basic-url"
                       aria-describedby="basic-addon3">
            </div>
            <div class="input-group m-b_3"><span
                      class="input-group-text">$</span>
                <input type="text"
                       class="form-control"
                       aria-label="Amount (to the nearest dollar)">
                <span class="input-group-text">.00</span>
            </div>
            <div class="input-group"><span
                      class="input-group-text">With
                    textarea</span> <textarea
                          class="form-control"
                          aria-label="With textarea"></textarea>
            </div>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="floating-labels">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Floating labels</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form>
                <div class="form-floating m-b_3 input-group-lg"><input
                           type="email"
                           class="form-control"
                           id="floatingInput"
                           placeholder="name@example.com">
                    <label for="floatingInput">Email
                        address</label></div>
                <div class="form-floating"><input
                           type="password"
                           class="form-control"
                           id="floatingPassword"
                           placeholder="Password"> <label
                           for="floatingPassword">Password</label>
                </div>
            </form>
        </div>
    </div>
</article>
<article class="m-y_3"
         id="validation">
    <div
         class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
        <h3>Validation</h3><a
           class="d-flex align-items-center"
           target="_blank"
           href="https://getbootstrap.com/docs/5.0/forms/validation/">Documentation</a>
    </div>
    <div>
        <div class="bd-example">
            <form class="row g-3">
                <div class="col-md-4"><label
                           for="validationServer01"
                           class="form-label">First
                        name</label> <input type="text"
                           class="form-control is-valid"
                           id="validationServer01"
                           value="Mark"
                           required>
                    <div class="valid-feedback">Looks good!
                    </div>
                </div>
                <div class="col-md-4"><label
                           for="validationServer02"
                           class="form-label">Last
                        name</label> <input type="text"
                           class="form-control is-valid"
                           id="validationServer02"
                           value="Otto"
                           required>
                    <div class="valid-feedback">Looks good!
                    </div>
                </div>
                <div class="col-md-4"><label
                           for="validationServerUsername"
                           class="form-label">Username</label>
                    <div class="input-group has-validation">
                        <span class="input-group-text"
                              id="inputGroupPrepend3">@</span>
                        <input type="text"
                               class="form-control is-invalid"
                               id="validationServerUsername"
                               aria-describedby="inputGroupPrepend3"
                               required>
                        <div class="invalid-feedback">Please
                            choose a username.</div>
                    </div>
                </div>
                <div class="col-md-6 input-group-lg"><label
                           for="validationServer03"
                           class="form-label">City</label>
                    <input type="text"
                           class="form-control is-invalid"
                           id="validationServer03"
                           required>
                    <div class="invalid-feedback">Please
                        provide a valid city.</div>
                </div>
                <div class="col-md-3"><label
                           for="validationServer04"
                           class="form-label">State</label>
                    <select class="form-select is-invalid"
                            id="validationServer04"
                            required>
                        <option selected
                                disabled
                                value="">Choose...</option>
                        <option>...</option>
                    </select>
                    <div class="invalid-feedback">Please
                        select a valid state.</div>
                </div>
                <div class="col-md-3"><label
                           for="validationServer05"
                           class="form-label">Zip</label>
                    <input type="text"
                           class="form-control is-invalid"
                           id="validationServer05"
                           required>
                    <div class="invalid-feedback">Please
                        provide a valid zip.</div>
                </div>
                <div class="col-12">
                    <div class="form-check"><input
                               class="form-check-input is-invalid"
                               type="checkbox"
                               value=""
                               id="invalidCheck3"
                               required> <label
                               class="form-check-label"
                               for="invalidCheck3">Agree to
                            terms and conditions</label>
                        <div class="invalid-feedback">You
                            must agree before submitting.
                        </div>
                    </div>
                </div>
                <div class="col-12"><button
                            class="btn btn-primary"
                            type="submit">Submit
                        form</button></div>
            </form>
        </div>
    </div>
</article>
Copy Code