This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Basic HTML

Source: dist/css/virtual_boot.css, line 19157

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/virtual_boot.css, line 19291

2.1 Basic Typography

Basic Typography is unstyled and relys on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves the reading of content text lacking. The overriding styles that are applied to Basic typography is a consistent font treatment (font sizing, font family, and font-weight) and what comes from the baseline frameworks that build the brand.

Example

Basic Typography: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor aenean massa

Cut sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus

Donec quam felis ultricies nec pellentesque eu pretium quis sem nlla consequat massa quis enim

Donec pede justo fringilla vel aliquet nec vulputate eget arcu
In enim justo rhoncus ut imperdiet a venenatis vitae justo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define deleted text which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags.

<section class="max-w_65">
<h1>Basic Typography: <small>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.</small></h1>
<h2>Aenean commodo ligula eget dolor aenean massa</h2>
<h3>Cut sociis natoque penatibus et magnis dis
parturient montes nascetur ridiculus mus</h3>
<h4>Donec quam felis ultricies nec pellentesque eu
pretium quis sem nlla consequat massa quis enim</h4>
<h5>Donec pede justo fringilla vel aliquet nec vulputate
eget arcu</h5>
<h6>In enim justo rhoncus ut imperdiet a venenatis vitae
justo</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.</p>
<article><p>This paragraph is nested inside an article. It contains many different, sometimes useful, <a href="https://www.w3schools.com/tags/">HTML5 tags</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small> but there are many others as well. Hover the following text for abbreviation tag: <abbr title="abbreviation">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title="For The Win">ftw</acronym>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p><p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags.</p></article>
</section>
Copy Code

Source: dist/css/virtual_boot.css, line 19167

2.2 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.

Example

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

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.

<section class="max-w_65 reading-typography">
  <h1>This is the primary heading and there should only be one of these per page</h1>
    <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>
Copy Code

Source: dist/css/virtual_boot.css, line 19263

2.2.1 Sample Typography

This text is used as a lorem content in many of our containers.

Example

HTML Ipsum Presents

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. 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.
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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>
Copy Code

Source: dist/css/virtual_boot.css, line 14335

2.3 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/virtual_boot.css, line 14243

2.4 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/virtual_boot.css, line 14275

2.4.1 Inputs UC

Utility Class only build inputs

Example

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/virtual_boot.css, line 14252

2.4.2 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

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
<a href="" class="btn br_radius max-w_30 m_auto m-b_3 block shadow_overlap-light btn-primary c_white h:undecorated" target="_blank">Button</a>
<a href="https://www.facebook.com/AmericanCollegeofCardiology/" class="btn br_radius max-w_30 m_auto m-b_3 block shadow_overlap-light btn-primary c_white h:undecorated" target="_blank">Button</a>
<a href="" class="link" target="_blank">Text Link</a>
<a href="https://www.facebook.com/AmericanCollegeofCardiology/" class="link" target="_blank">Text Link</a>
Copy Code

Example

Contribution To Literature:

The HOME-PE trial showed that risk stratification can identify approximately one-third of PE patients who can be safely treated at home.

Description:

The goal of the trial was to evaluate two risk stratification tools among patients diagnosed with pulmonary embolism (PE).

Study Design

  • Randomized
  • Parallel
  • Open-label

Eligible patients were randomized to risk stratification with the HESTIA rule (n = 984) versus the simplified Pulmonary Embolism Severity Index (PESI) score (n = 986). Low-risk patients were discharged home, while > low-risk patients were admitted to the hospital.

The HESTIA rule is considered low-risk if none of the following apply: hemodynamic instability, thrombolysis or embolectomy, active bleeding or high-risk of bleeding, supplemental oxygen, PE diagnosed during anticoagulation treatment, severe pain requiring intravenous medication, medical or social reason for hospitalization, severe renal or hepatic impairment, or pregnancy.

The PESI score assigns a score for each of the following: age >80 years, history of cancer, chronic cardiopulmonary disease, systolic blood pressure <100 mm Hg, heart rate ≥110 beats per minute, or oxygen saturation <90%. Low risk is considered a score of 0.

  • Total number of enrollees: 1,970
  • Duration of follow-up: 90 days
  • Mean patient age: 64 years
  • Percentage female:
    • Total number of enrollees: 1,970
    • Duration of follow-up: 90 days
    • Mean patient age: 64 years
    • Percentage female: 48%

Inclusion criteria:

  • Patients diagnosed with PE

Other salient features/characteristics:

  • In the HESTIA group, 62% were hospitalized, while 38% were managed at home.
  • In the PESI group, 64% were hospitalized, while 36% were managed at home.

Principal Findings:

The primary outcome, all-cause death, recurrent VTE, or major bleeding at 30 days, occurred in 3.8% of the HESTIA group compared with 3.6% of the PESI group (p for noninferiority = 0.005).

Secondary outcomes:

  • Proportion of patients actually treated as outpatients: 38.4% of the HESTIA group compared with 36.6% of the PESI group (p for superiority = 0.41)
  • Rate of low-risk patients eligible for outpatient care: 39.4% of the HESTIA group compared with 48.4% of the PESI group
  • Patients treated as outpatients among eligible patients: 88.4% of the HESTIA group compared with 64.8% of the PESI group

Interpretation:

Among patients with PE, risk stratification with the HESTIA rule was noninferior to the PESI score on all-cause death, recurrent VTE, or major bleeding. The two strategies were similar regarding the proportion of patients treated at home. By using risk stratification, approximately one-third of low-risk patients with PE could be safely managed at home.

References:

Presented by Dr. Pierre-Marie Roy at the European Society of Cardiology Virtual Congress, August 31, 2020.

Clinical Topics: Anticoagulation Management, Invasive Cardiovascular Angiography and Intervention, Prevention, Pulmonary Hypertension and Venous Thromboembolism, Vascular Medicine, Anticoagulation Management and Venothromboembolism, Interventions and Vascular Medicine

Keywords: ESC Congress, ESC20, Anticoagulants, Blood Pressure, Embolectomy, Hemorrhage, Neoplasms, Outpatients, Patient Discharge, Pulmonary Embolism, Primary Prevention, Risk Assessment, Thrombolytic Therapy, Thromboembolism, Vascular Diseases, Venous Thromboembolism

< Back to Listings
<div class="reading-typography">
    <div class="the-text">
        <div class="contribution-to-literature">
            <h2>Contribution To Literature:</h2>
            <p></p>
            <p>The HOME-PE trial showed that risk stratification can identify approximately one-third of PE patients who can be safely treated at home.</p>
            <p></p>
        </div>
        <div class="description">
            <h2>Description:</h2>
            <p></p>
            <p>The goal of the trial was to evaluate two risk stratification tools among patients diagnosed with pulmonary embolism (PE).</p>
            <p></p>
        </div>
        <div class="study-design">
            <h2>Study Design</h2>
            <p></p>
            <ul>
                <li>Randomized</li>
                <li>Parallel</li>
                <li>Open-label</li>
            </ul>
            <p>Eligible patients were randomized to risk stratification with the HESTIA rule (n = 984) versus the simplified Pulmonary Embolism Severity Index (PESI) score (n = 986). Low-risk patients were discharged home, while &gt; low-risk patients were admitted to the hospital.</p>
            <p>The HESTIA rule is considered low-risk if none of the following apply: hemodynamic instability, thrombolysis or embolectomy, active bleeding or high-risk of bleeding, supplemental oxygen, PE diagnosed during anticoagulation treatment, severe pain requiring intravenous medication, medical or social reason for hospitalization, severe renal or hepatic impairment, or pregnancy.</p>
            <p>The PESI score assigns a score for each of the following: age &gt;80 years, history of cancer, chronic cardiopulmonary disease, systolic blood pressure &lt;100 mm Hg, heart rate ≥110 beats per minute, or oxygen saturation &lt;90%. Low risk is considered a score of 0. </p>
            <ul>
                <li>Total number of enrollees: 1,970</li>
                <li>Duration of follow-up: 90 days</li>
                <li>Mean patient age: 64 years</li>
                <li>Percentage female:
                <ul>
                <li>Total number of enrollees: 1,970</li>
                <li>Duration of follow-up: 90 days</li>
                <li>Mean patient age: 64 years</li>
                <li>Percentage female: 48%</li>
            </ul></li>
            </ul>
            <p>Inclusion criteria:</p>
            <ul>
                <li>Patients diagnosed with PE</li>
            </ul>
            <p>Other salient features/characteristics: </p>
            <ul>
                <li>In the HESTIA group, 62% were hospitalized, while 38% were managed at home.</li>
                <li>In the PESI group, 64% were hospitalized, while 36% were managed at home.</li>
            </ul>
            <p></p>
        </div>
        <div class="principal-findings">
            <h2>Principal Findings:</h2>
            <p></p>
            <p>The primary outcome, all-cause death, recurrent VTE, or major bleeding at 30 days, occurred in 3.8% of the HESTIA group compared with 3.6% of the PESI group (p for noninferiority = 0.005). </p>
            <p>Secondary outcomes:</p>
            <ul>
                <li>Proportion of patients actually treated as outpatients: 38.4% of the HESTIA group compared with 36.6% of the PESI group (p for superiority = 0.41)</li>
                <li>Rate of low-risk patients eligible for outpatient care: 39.4% of the HESTIA group compared with 48.4% of the PESI group</li>
                <li>Patients treated as outpatients among eligible patients: 88.4% of the HESTIA group compared with 64.8% of the PESI group</li>
            </ul>
            <p></p>
        </div>
        <div class="interpretation">
            <h2>Interpretation:</h2>
            <p>Among patients with PE, risk stratification with the HESTIA rule was noninferior to the PESI score on all-cause death, recurrent VTE, or major bleeding. The two strategies were similar regarding the proportion of patients treated at home. By using risk stratification, approximately one-third of low-risk patients with PE could be safely managed at home.<br></p>
        </div>
        <div class="legacy-references" id="references-for-article">
            <h2>References:</h2>
            <p></p>
            <p>Presented by Dr. Pierre-Marie Roy at the European Society of Cardiology Virtual Congress, August 31, 2020.</p>
            <p></p>
        </div>
        <p class="topics-list"><b>Clinical Topics:</b> <a href="http://www.acc.org/clinical-topics/anticoagulation-management">Anticoagulation Management, </a><a href="http://www.acc.org/clinical-topics/invasive-cardiovascular-angiography-and-intervention">Invasive Cardiovascular Angiography and Intervention, </a><a href="http://www.acc.org/clinical-topics/prevention">Prevention, </a><a href="http://www.acc.org/clinical-topics/pulmonary-hypertension-and-venous-thromboembolism">Pulmonary Hypertension and Venous Thromboembolism, </a><a href="http://www.acc.org/clinical-topics/vascular-medicine">Vascular Medicine, </a><a href="http://www.acc.org/clinical-topics/anticoagulation-management/anticoagulation-management-and-venothromboembolism">Anticoagulation Management and Venothromboembolism, </a><a href="http://www.acc.org/clinical-topics/invasive-cardiovascular-angiography-and-intervention/interventions-and-vascular-medicine">Interventions and Vascular Medicine</a> </p>
        <p class="keywords-list"><b>Keywords:</b> <i>ESC Congress, </i><i>ESC20, </i><i>Anticoagulants, </i><i>Blood Pressure, </i><i>Embolectomy, </i><i>Hemorrhage, </i><i>Neoplasms, </i><i>Outpatients, </i><i>Patient Discharge, </i><i>Pulmonary Embolism, </i><i>Primary Prevention, </i><i>Risk Assessment, </i><i>Thrombolytic Therapy, </i><i>Thromboembolism, </i><i>Vascular Diseases, </i><i>Venous Thromboembolism</i> </p>
        <a href="#" id="backToListings" class="parent back-to-listing">&lt; Back to Listings</a>
    </div>
</div>
Copy Code