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: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

News Articles

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

10 News Articles

The science and discoveries are always evolving and the news articles are a way for a user to keep up with the latest science.

Example

Quality Comes First in Carbs vs. Fats Debate

CardioSmart News
<header class="p-x_5">
	<h1 data-attr="title" class="">Quality Comes First in Carbs vs. Fats Debate</h1>
	<div
		data-attr="authors"
		class="flex_wrap flex flex_row m-t_n3 m-b_3 p-l_3 font_0 font_ui"
	>
		<span class="flex_shrink p-r_2" data-attr="publish-date">
			<time
				datetime="1963-11-23"
				data-attr="article-published-date"
				class="c_accent-1 font_bold"
				>Nov 23, 1963</time
			>
		</span>
		<span class="flex_shrink p-x_2" data-attr="author">
			<a class="c_primary-2 font_bold link"
				>CardioSmart News</a
			>
		</span>
	</div>
</header>
Copy Code

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

10.1.2 Author & Article Tag Block

information about the article, author and taxonomy. Meta Data of an article may include: Author, Photo/Avatar of Author, Date Published, Tags & Topics of the Article, And last edited. (Secondary Level Item)

<aside class="bg_white bg_white-0 br_1 br_shade-3 br_solid m-b_4 p_3">
	<img src="https://i.pravatar.cc/300?img=25 alt="Author Name" class="br_round max-w_10 m_auto m-t_3 br_shade-4 br_2 br_solid shadow_overlap-light block">
	<section data-attr="author" class="font_0 m-x_4 lh_1 br-t_1 br_solid br_primary-3 m-t_4 p-t_3 font_copy">
		<span data-attr="author-name" class="block font_1 font_display font_bold"><a class="c_primary-2 font_bold link"
		>Wendy Vasquez</a
	></span>
		<span data-attr="associated" class="block font_n1">George Mason, Medical</span>
		<span data-attr="address-city-state" class="block font_n1">Washington, DC</span>
	</section>
	<section data-attr="article" class="font_n1 m-x_4 font_ui">
		<ul data-attr="taxonomy" class="flex_wrap flex flex_row ul_none">
			<li data-attr="topic " class="flex_shrink p-r_2 font_bold c_accent-n1 uppercase">
				tags
			</li>
			<li data-attr="topic " class="flex_shrink p-x_2">
				<a class="link c_shade-n2">AFIB</a>
			</li>
			<li data-attr="topic" class="flex_shrink p-x_2">
				<a class="link c_shade-n2">Endocarditis</a>
			</li>
			<li data-attr="tag" class="flex_shrink p-x_2">
				<a class="link c_shade-n2">Living With</a>
			</li>
			<li data-attr="tag" class="flex_shrink p-x_2">
				<a class="link c_shade-n2">New Science</a>
			</li>
		</ul>
	</section>
</aside>
Copy Code

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

10.1.3 Author & Article Tag Block CardioSmart.

information about the article, author and taxonomy. Meta Data of an article may include: Author, Photo/Avatar of Author, Date Published, Tags & Topics of the Article, And last edited. (Secondary Level Item)

<aside class="bg_white bg_white-0 br_1 br_shade-3 br_solid m-b_4 p_3">
	<div style="height: 10rem; width:10rem" class="seal_normal-alt bg_contain br_round max-w_10 m_auto m-t_3 br_shade-4 br_2 br_solid shadow_overlap-light block bg_acc">&nbsp;</div>
	<section data-attr="author" class="font_0 m-x_4 lh_1 br-t_1 br_solid br_primary-3 m-t_4 p-t_3 font_copy">
		<span data-attr="author-name" class="block font_1 font_display font_bold"><a class="c_primary-2 font_bold link"
		>CardioSmart News</a
	></span>
		<span data-attr="associated" class="block font_n1">American College of Cardiology</span>
		<span data-attr="address-city-state" class="block font_n1">Washington, DC</span>
	</section>
	<section data-attr="article" class="font_n1 m-x_4 font_ui">
		<ul data-attr="taxonomy" class="flex_wrap flex flex_row ul_none">
			<li data-attr="topic " class="flex_shrink p-r_2 font_bold c_accent-n1 uppercase">
				tags
			</li>
			<li data-attr="topic " class="flex_shrink p-x_2">
				<a class="link c_shade-n2">AFIB</a>
			</li>
			<li data-attr="topic" class="flex_shrink p-x_2">
				<a class="link c_shade-n2">Endocarditis</a>
			</li>
			<li data-attr="tag" class="flex_shrink p-x_2">
				<a class="link c_shade-n2">Living With</a>
			</li>
			<li data-attr="tag" class="flex_shrink p-x_2">
				<a class="link c_shade-n2">New Science</a>
			</li>
		</ul>
	</section>
</aside>
Copy Code

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

10.1.4 Article Content

Content Item of a news article. The Content of the article. Rich text area allowing for all standard Word Like typography definitions. (Primary Level Item)

Example

Quality counts. And this may be especially true when it comes to what you eat.

When talking about diets these days, a lot of discussion seems to come down to carbohydrates vs. fats. Is eating fewer carbohydrates or less fat better for your health? To help shed light on this debate, a study recently published in JAMA Internal Medicine focused on how low-carbohydrate diets and low-fat diets are linked to deaths.

Study authors found that healthy low-carb diets and healthy low-fat diets were associated with decreased mortality. A healthy low-carb diet limited low-quality carbs—refined and added sugars—while incorporating more plant protein and unsaturated fat. A healthy low-fat diet had limited saturated fat and included plant protein and more high-quality carbs—whole grains, non-starchy vegetables, whole fruits.

"Our study extended the previous evidence and suggests that the health benefits of [a low-carbohydrate diet] or [low-fat diet] may depend not only on the types of protein and fat or carbohydrate but also on the quality of carbohydrate or fat remaining in the diet," the authors state.

In a similar way, unhealthy low-carb and unhealthy low-fat diets were linked to increased mortality. Low-carb and low-fat diets overall were not associated with total mortality, according to the study.  

Researchers examined information about the dietary intake of 37,233 adults (20 years old or older) reported to the U.S. National Health and Nutrition Examination Survey from 1999 to 2014. The average age of the group was 50, and more than half were women. When conducting the analysis, they adjusted for factors including age, sex, race or ethnicity, as well as educational level, family income, smoking, and family history of diabetes, heart disease or cancer.

What is at work with low-quality diets and mortality? The authors suggest that diets high in saturated fat lead to overeating and obesity. Saturated fats are tasty to many people but have a low-satiety effect. In terms of low-quality carbs, refined grains and added sugars have limited nutritional value but can lead to high blood sugar and insulin in the body after eating, and in turn this can cause inflammation, insulin resistance, and dyslipidemia.

It’s important to note that the diets in this study don’t correspond to any specific popular diet. The study broke down a day’s worth of dietary intake in terms of percentage of energy from fat, protein and carbohydrates. Interestingly, a moderate low-carb diet still has about 40% of energy coming from carbs, and a low-fat diet still has about 30% energy from fat (20% for a very low-fat diet), according to authors.

Participants reported what they ate based on their memory, which could mean food intake was underreported or overreported. Another significant limitation: People were designated as eating a low-carb or low-fat diet based on an initial assessment. However, over time people may change the way they eat, so information about dietary intake may have been misclassified. Finally, as with other nutritional studies, this was based on observations, and therefore no conclusions about causes could be determined.

Low-fat diets have beenrecommended since the late 1970s to prevent chronic diseases. But recent research about the links between total fat intake and health outcomes have been inconsistent, the authors write. Meanwhile, low-carb diets have become a popular way to lose weight, but the long-term health effects of those diets remain unclear. This issue is more complex than looking just at fats or carbohydrates or proteins. More research is needed into the types of food as well as the quality of each component in a healthy diet.

This study strengthens the idea that the quality of food you eat matters to your overall health. Whatever eating pattern you follow, it’s a good idea to eat quality carbs and fats. That means avoiding refined carbohydrates, added sugars, and saturated fats. Instead, focus on whole grains, non-starchy vegetables, whole fruits, and unsaturated fats.

<div class="br-b_1 br_secondary-2 br_solid p-b_3 m-b_2 lh_4">
	<img class="br_2 br_radius br_solid br_white-5 float_left m-b_4 m-r_5 max-w_10 max-w_25:lg shadow_bevel-light w-grid_4" src="https://picsum.photos/400" alt="">
	<p>
		Quality counts. And this may be especially true
			when it comes to what you eat.
	</p>
	<p>
		When talking about diets these days, a lot of
			discussion seems to come down to carbohydrates vs.
			fats. Is eating fewer carbohydrates or less fat
			better for your health? To help shed light on this
			debate, a
			<a href="https://jamanetwork.com/journals/jamainternalmedicine/article-abstract/2759134" class="link c_secondary-n2">study recently published in
				<em>JAMA Internal Medicine</em></a>
			focused on how low-carbohydrate diets and low-fat
			diets are linked to deaths.
	</p>
	<p>
		Study authors found that healthy low-carb diets and
			healthy low-fat diets were associated with decreased
			mortality. A healthy low-carb diet limited
			low-quality carbs—refined and added sugars—while
			incorporating more plant protein and unsaturated
			fat. A healthy low-fat diet had limited saturated
			fat and included plant protein and more high-quality
			carbs—whole grains, non-starchy vegetables, whole
			fruits.
	</p>
	<p>
		"Our study extended the previous evidence and
			suggests that the health benefits of [a
			low-carbohydrate diet] or [low-fat diet] may depend
			not only on the types of protein and fat or
			carbohydrate but also on the quality of carbohydrate
			or fat remaining in the diet," the authors state.
	</p>
	<p>
		In a similar way, unhealthy low-carb and unhealthy
			low-fat diets were linked to increased mortality.
			Low-carb and low-fat diets overall were not
			associated with total mortality, according to the
			study. &nbsp;</span>
	</p>
	<p>
		Researchers examined information about the dietary
			intake of 37,233 adults (20 years old or older)
			reported to the U.S. National Health and Nutrition
			Examination Survey from 1999 to 2014. The average
			age of the group was 50, and more than half were
			women. When conducting the analysis, they adjusted
			for factors including age, sex, race or ethnicity,
			as well as educational level, family income,
			smoking, and family history of diabetes, heart
			disease or cancer.
	</p>
	<p>
		What is at work with low-quality diets and
			mortality? The authors suggest that diets high in
			saturated fat lead to overeating and obesity.
			Saturated fats are tasty to many people but have a
			low-satiety effect. In terms of low-quality carbs,
			refined grains and added sugars have limited
			nutritional value but can lead to high blood sugar
			and insulin in the body after eating, and in turn
			this can cause inflammation, insulin resistance, and
			dyslipidemia.
	</p>
	<p>
		It’s important to note that the diets in this study
			don’t correspond to any specific popular diet. The
			study broke down a day’s worth of dietary intake in
			terms of percentage of energy from fat, protein and
			carbohydrates. Interestingly, a moderate low-carb
			diet still has about 40% of energy coming from
			carbs, and a low-fat diet still has about 30% energy
			from fat (20% for a very low-fat diet), according to
			authors.
	</p>
	<p>
		Participants reported what they ate based on their
			memory, which could mean food intake was
			underreported or overreported. Another significant
			limitation: People were designated as eating a
			low-carb or low-fat diet based on an initial
			assessment. However, over time people may change the
			way they eat, so information about dietary intake
			may have been misclassified. Finally, as with other
			nutritional studies, this was based on observations,
			and therefore no conclusions about causes could be
			determined.
	</p>
	<p>
		Low-fat diets have been<a href="https://health.gov/dietaryguidelines/dga2005/report/HTML/G5_History.htm" class="link c_secondary-n2">recommended since the late 1970s</a>
			to prevent chronic diseases. But recent research
			about the links between total fat intake and health
			outcomes have been inconsistent, the authors write.
			Meanwhile, low-carb diets have become a popular way
			to lose weight, but the long-term health effects of
			those diets remain unclear. This issue is more
			complex than looking just at fats or carbohydrates
			or proteins. More research is needed into the types
			of food as well as the quality of each component in
			a healthy diet.
	</p>
	<p>
		This study strengthens the idea that the quality of
			food you eat matters to your overall health.
			Whatever eating pattern you follow, it’s a good idea
			to eat quality carbs and fats. That means avoiding
			refined carbohydrates, added sugars, and saturated
			fats. Instead, focus on whole grains, non-starchy
			vegetables, whole fruits, and unsaturated
			fats.
	</p>
</div>
Copy Code

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

10.1.5 Article Footer Data

Information about the original article, author and disclaimer. (Secondary Level Item)

<div class="font_n2 lh_3 font_ui" data-attr="article-cite">
	<span class="font_bold">Read the full text:</span>
	<a class="link c_secondary-n2" href="https://google.com">Association of Low-Carbohydrate and Low-Fat Diets With
		Mortality Among U.S. Adults</a>,
	<span class="font_italic">
		Journal of the American Medical Association (JAMA)
		Internal Medicine</span>, Jan. 21, 2020.
	<br>
	<span data-attr="editor-author"><a href="#" class="link c_secondary-n2"><i class="fas fa-user p-r_3"></i>Martha Gulati, MD,
			FACC, is the editor-in-chief of CardioSmart.</a></span>
	<section data-attr="boilerplate">
		Learn about CardioSmart’s editorial process. Information
		provided for educational purposes only. Please talk to
		your health care professional about your specific needs.
	</section>
</div>
Copy Code

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

10.1.6 Share Content

Widget to share to a social media. Shared Content clips url and pushes it to common platforms like facebook, twitter, instagram, etc. (Third Level)

Example

<nav>
	<ul class="flex m_0 social-bar ul_none font_2 lh_4">
	<li class="flex_shrink m-r_3">
		<a href="https://twitter.com/accintouch" target="_blank" class="bg_twitter block br_radius c_shade-5 h:bg_accent h:c_white m-b_0 p-y_1 p-x_4 social-bar--button text_center transition_0 twitter"><i class="fab fa-twitter-square"></i></a>
	</li>
	<li class="flex_shrink m-r_3">
		<a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook bg_facebook br_radius c_shade-5 block h:bg_accent h:c_white m-b_0 p-y_1 p-x_4 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a>
	</li>
	<li class="flex_shrink m-r_3">
		<a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin br_radius bg_linkedin  block  c_shade-5 h:bg_accent h:c_white m-b_0 p-y_1 p-x_4 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a>
	</li>
	<li class="flex_shrink m-r_3">
		<a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube bg_youtube br_radius c_shade-5  block h:bg_accent h:c_white m-b_0 p-y_1 p-x_4 social-bar--button text_center transition_0"><i class="fab fa-pinterest"></i></a>
	</li>
</ul>
<small class="c_accent-1">Please share to your networks</small>
</nav>
Copy Code

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

10.2.1 News Hero

Large Featured Rotating News Tiles and short synopsis (Emphasized Level Item)

Example

News Hero (Emphasized Level Item)

<div class="bg_cover bg_shade-5 font_1 p_4" style="background-image:url('https://picsum.photos/id/211//700/300');height: 300px;"><h1 class="c_white font_4">News Hero (Emphasized Level Item)</h1></div>
Copy Code

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

10.2.2 News List Item

A short synopsis of a news article that is used in a repeating list. (Primary Level Item)

<article class="br-t_1  br-b_1 br_black-2 br_dotted flex font_0 font_copy h:bg_secondary-5 m-b_3 m-t_2 p-b_4 p-t_4 p_4 relative">
	<aside class="block:md display_none flex_shrink p-t_3">
		<img class="block w_100" src="https://picsum.photos/100" alt="">
	</aside>
	<section class="flex_auto p-l_4:md">
		<header data-attr="article" class="c_primary  font_1 font_2:md font_3:lg font_bold font_display lh_1">
			Long Work Hours Linked to High Blood Pressure
		</header>
		<div data-attr="article-sample">
			Working more than 40 hours a week may increase risk of high
			blood pressure, finds study of white-collar workers.
		</div>
		<footer data-attr="metadata" class="align-middle br-t_1 br_secondary-3 br_solid flex flex_column flex_inline font_n1 font_ui m-t_2 p-t_2 text_left w_100 w_auto">
			<ul data-attr="authors" class="flex flex_row flex_wrap l_0 m-t_n2 r_0 t_0 ul_none">
				<li class="flex_shrink p-r_2" data-attr="publish-date">
					<time datetime="1963-11-23" data-attr="article-published-date" class="c_accent-1 font_bold">Nov 23, 1963</time>
				</li><li class="flex_shrink p-r_2" data-attr="author">
					<a class="c_primary-2 font_bold link">CardioSmart News</a>
				</li>
				</ul>
			<ul data-attr="authors" class="flex flex_row flex_wrap m-l_n2 ul_none">
				<li data-attr="topic" class="br-r_1 br_dotted br_white-7 flex_shrink h:bg_secondary-3 p-x_3 relative">
					<a class="c_shade-n4 font_bold  h:c_black expanded-click-area link uppercase">Endocarditis</a>
				</li><li data-attr="topic " class="br-r_1 br_dotted br_white-7 flex_shrink h:bg_secondary-3 p-x_3 relative">
					<a class="c_shade-n4 font_bold h:c_black expanded-click-area link uppercase">AFIB</a>
				</li><li data-attr="tag" class="br-r_1 br_dotted br_white-7 flex_shrink p-x_3 relative h:bg_secondary-3">
					<a class="c_shade-n2 h:c_black expanded-click-area link">Living With</a>
				</li><li data-attr="tag" class="br-r_1 br_dotted br_white-7 flex_shrink p-x_3 relative h:bg_secondary-3">
					<a class="c_shade-n2 h:c_black expanded-click-area link">New Science</a>
				</li>
			</ul>
		</footer>
	</section>
</article>
Copy Code