Colors

JDRF websites are primarily white and blue to reinforce the brand and create a bright, fresh atmosphere. Program and accent colors should be used with restraint.

Primary Colors

JDRF Blue and JDRF Dark Blue are the colors used in the JDRF logo.

Blue
#0073cf
$jdrf-blue
Dark Blue
#002855
$jdrf-dark-blue

Button Colors

Green
#00a862
$jdrf-green
Purple
#a75ccc
$jdrf-purple
Magenta
#e01279
$jdrf-magenta
Orange
#fa6323
$jdrf-orange
Blue
#0073cf
$jdrf-blue

Choosing a Button Color

Only one button color is used per website. Most JDRF programs align with a button color. If not, use the default button color $jdrf-blue.

The color white $jdrf-white (hex value: #ffffff) is used for the outline button and a variant of the primary button style. White buttons can be used in combination with other button colors on the same site.

For a review on how to include the Design System, refer to our Download page.

Accent Colors

Accent colors must comprise 10% or less of your design.

Accent Blue
#09bcef
$accent-blue
Accent Green
#8cd600
#accent-green
Accent Orange
#fcd116
$accent-orange

Program Colors

Only one program color can be used per website.

Walk
#fa6323
$pro-walk
Ride
#00a862
$pro-ride
DIY
#e01279
$pro-diy
Gala
#6e267b
$pro-gala
Peak
#aa72bf
$pro-peak
Golf
#5b6334
$pro-golf
Voice
#fdb823
$pro-voice

Grey Palette

Grey 1
#fafafa
$grey-1
Grey 2
#f5f5f5
$grey-2
Grey 3
#eeeeee
$grey-3
Grey 4
#e0e0e0
$grey-4
Grey 5
#bdbdbd
$grey-5
Grey 6
#9e9e9e
$grey-6
Grey 7
#757575
$grey-7

Text Colors

Primary
#212121
$text-primary
Secondary
#757575
$text-secondary
Disabled
9e9e9e
$text-disabled
Dividers
e0e0e0
$text-dividers

The reverse of these colors (white text on a darker color) is as follows:

  • Primary at 100% white: $text-reverse-primary (hex value: #ffffff)
  • Secondary at 76% white: $text-reverse-secondary (rgba value: rgba(255, 255, 255, 0.76))
  • Disabled at 50% white: $text-reverse-disabled (rgba value: rgba(255, 255, 255, 0.5))
<h3 class="f-example-title">Primary Colors</h3>
<p>JDRF Blue and JDRF Dark Blue are the colors used in the JDRF logo.</p>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Blue</div>
		<div class="f-color-chip__hex">#0073cf</div>
		<div class="f-color-chip__var">$jdrf-blue</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Dark Blue</div>
		<div class="f-color-chip__hex">#002855</div>
		<div class="f-color-chip__var">$jdrf-dark-blue</div>
	</div>
</div>

<h3 class="f-example-title">Button Colors</h3>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Green</div>
		<div class="f-color-chip__hex">#00a862</div>
		<div class="f-color-chip__var">$jdrf-green</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Purple</div>
		<div class="f-color-chip__hex">#a75ccc</div>
		<div class="f-color-chip__var">$jdrf-purple</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Magenta</div>
		<div class="f-color-chip__hex">#e01279</div>
		<div class="f-color-chip__var">$jdrf-magenta</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Orange</div>
		<div class="f-color-chip__hex">#fa6323</div>
		<div class="f-color-chip__var">$jdrf-orange</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Blue</div>
		<div class="f-color-chip__hex">#0073cf</div>
		<div class="f-color-chip__var">$jdrf-blue</div>
	</div>
</div>

<div class="f-example">
	<h4>Choosing a Button Color</h4>
	<p>Only one button color is used per website. Most JDRF programs align with a button color. If not, use the default button color <code class="language-markup">$jdrf-blue</code>.</p>

	<p>The color white <code class="language-markup">$jdrf-white (hex value: #ffffff)</code> is used for the outline button and a variant of the primary <a href="./components.html#buttons">button style</a>. White buttons can be used in combination with other
		button colors on the same site.</a>

		<p>For a review on how to include the Design System, refer to our <a href="./getting-started.html#download">Download page</a>.</p>
</div>


<h3 class="f-example-title">Accent Colors</h3>
<p>Accent colors must comprise 10% or less of your design.</p>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Accent Blue</div>
		<div class="f-color-chip__hex">#09bcef</div>
		<div class="f-color-chip__var">$accent-blue</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Accent Green</div>
		<div class="f-color-chip__hex">#8cd600</div>
		<div class="f-color-chip__var">#accent-green</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Accent Orange</div>
		<div class="f-color-chip__hex">#fcd116</div>
		<div class="f-color-chip__var">$accent-orange</div>
	</div>
</div>

<h3 class="f-example-title">Program Colors</h3>
<p>Only one program color can be used per website.</p>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Walk</div>
		<div class="f-color-chip__hex">#fa6323</div>
		<div class="f-color-chip__var">$pro-walk</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Ride</div>
		<div class="f-color-chip__hex">#00a862</div>
		<div class="f-color-chip__var">$pro-ride</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">DIY</div>
		<div class="f-color-chip__hex">#e01279</div>
		<div class="f-color-chip__var">$pro-diy</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Gala</div>
		<div class="f-color-chip__hex">#6e267b</div>
		<div class="f-color-chip__var">$pro-gala</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Peak</div>
		<div class="f-color-chip__hex">#aa72bf</div>
		<div class="f-color-chip__var">$pro-peak</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Golf</div>
		<div class="f-color-chip__hex">#5b6334</div>
		<div class="f-color-chip__var">$pro-golf</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Voice</div>
		<div class="f-color-chip__hex">#fdb823</div>
		<div class="f-color-chip__var">$pro-voice</div>
	</div>
</div>

<h3 class="f-example-title">Grey Palette</h3>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Grey 1</div>
		<div class="f-color-chip__hex">#fafafa</div>
		<div class="f-color-chip__var">$grey-1</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Grey 2</div>
		<div class="f-color-chip__hex">#f5f5f5</div>
		<div class="f-color-chip__var">$grey-2</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Grey 3</div>
		<div class="f-color-chip__hex">#eeeeee</div>
		<div class="f-color-chip__var">$grey-3</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Grey 4</div>
		<div class="f-color-chip__hex">#e0e0e0</div>
		<div class="f-color-chip__var">$grey-4</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Grey 5</div>
		<div class="f-color-chip__hex">#bdbdbd</div>
		<div class="f-color-chip__var">$grey-5</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Grey 6</div>
		<div class="f-color-chip__hex">#9e9e9e</div>
		<div class="f-color-chip__var">$grey-6</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Grey 7</div>
		<div class="f-color-chip__hex">#757575</div>
		<div class="f-color-chip__var">$grey-7</div>
	</div>
</div>

<h3 class="f-example-title">Text Colors</h3>
<div class="f-color-chips">
	<div class="f-color-chip">
		<div class="f-color-chip__name">Primary</div>
		<div class="f-color-chip__hex">#212121</div>
		<div class="f-color-chip__var">$text-primary</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Secondary</div>
		<div class="f-color-chip__hex">#757575</div>
		<div class="f-color-chip__var">$text-secondary</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Disabled</div>
		<div class="f-color-chip__hex">9e9e9e</div>
		<div class="f-color-chip__var">$text-disabled</div>
	</div>
	<div class="f-color-chip">
		<div class="f-color-chip__name">Dividers</div>
		<div class="f-color-chip__hex">e0e0e0</div>
		<div class="f-color-chip__var">$text-dividers</div>
	</div>
</div>

<p>The reverse of these colors (white text on a darker color) is as follows:</p>

<ul class="f-item-scroll">
	<li>Primary at 100% white: <code class="language-markup">$text-reverse-primary (hex value: #ffffff)</code></li>
	<li>Secondary at 76% white: <code class="language-markup">$text-reverse-secondary (rgba value: rgba(255, 255, 255, 0.76))</code></li>
	<li>Disabled at 50% white: <code class="language-markup">$text-reverse-disabled (rgba value: rgba(255, 255, 255, 0.5))</code></li>
</ul>

Typography

When using font families, all font weights are at normal or 400. The font families themselves will take care of the visual weight.

Some styles change sizes depending on the breakpoint. The Design System's breakpoints are based on Bootstrap's default breakpoints except for the small size at 360px. All breakpoints are using the mobile first approach where mobile is the default.

Font Families

Gotham Book

Gotham Book Italic

Gotham Light

Gotham Light Italic

Gotham Medium

Gotham Medium Italic

Gotham Bold

Gotham Bold Italic

/* Gotham Book */
font-family: $font-regular;

/* Gotham Book Italic */
font-family: $font-italic;

/* Gotham Light */
font-family: $font-light;

/* Gotham Light Italic */
font-family: $font-light-italic;

/* Gotham Medium */
font-family: $font-medium;

/* Gotham Medium Italic */
font-family: $font-medium-italic;

/* Gotham Bold */
font-family: $font-bold;

Italic fonts will apply normally to any elements that are naturally italic such as the <i> and <em> tags. For other elements not normally italic by default, such as a heading, a style should be applied to ensure it is italic. If this is not set, the fonts will not render properly in Safari/IOS. 

h2.my-custom-heading {
	font-family: "Gotham Book Italic";
	font-style: italic;
}

Spacing

All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed. Headings have a margin-bottom equal to half their line-height. Paragraphs have a margin-bottom equal to their line-height.

Headings

Heading styles apply by default when using them (pictured below) or when using the corresponding Heading classes: .h1, .h2, .h3, .h4, .h5, .h6.

Headings three through six use the `Gotham Medium` font family. Heading three changes to `Gotham Book` on the smallest breakpoint.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>

The Heading sizes below differ depending on the breakpoint:

  • Heading One
    • Extra Small: Gotham Book, 32px/36px
    • Small: Gotham Book, 36px/40px
    • Medium: Gotham Book, 48px/56px
  • Heading Two
    • Extra Small: Gotham Book, 24px/28px
    • Small: Gotham Book, 28px/32px
    • Medium: Gotham Book, 36px/40px
  • Heading Three
    • Extra Small: Gotham Book, 20px/28px
    • Small: Gotham Medium, 24px/28px

Display

Display One

Display Two

<h2 class="ds-display-1">Display 1</h2>
<h2 class="ds-display-2">Display 2</h2>

Display sizes differ depending on the breakpoint:

  • Display One
    • Extra Small: Gotham Light, 56px/56px
    • Small: Gotham Light, 60px/60px
    • Medium: Gotham Light, 72px/72px
  • Display Two
    • Extra Small: Gotham Light, 48px/48px
    • Small: Gotham Light, 56px/56px
    • Medium: Gotham Light, 60px/60px

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 

<p class="ds-lead">
	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

The lead size differs depending on the breakpoint:

  • Extra Small: Gotham Light, 16px/24px
  • Small: Gotham Book, 18px/24px
  • Medium: Gotham Light, 20px/28px

Paragraph

JDRF’s mission is to accelerate life-changing breakthroughs to cure, prevent and treat T1D and its complications

<p>JDRF’s mission is to accelerate life-changing breakthroughs to cure, prevent and treat T1D and its complications.</p>

The paragraph size differs depending on the breakpoint:

  • Extra Small: Gotham Book, 14px/20px
  • Small: Gotham Book, 16px/24px

Inline Text Elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="ds-blockquote">
	<p class="ds-m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Anchor Links

Jump down to our JDRF section for details!
Here are the details to JDRF. 
Jump down to our <a href="#jdrf-section">JDRF section</a> for details!
<div id="jdrf-section">
	Here are the details to JDRF.
</div>
<section class="f-section">
	<h3 class="f-example-title">Font Families</h3>
	<div class="f-example" id="phantom-ds-font-families">
		<p class="f-family-book">Gotham Book</p>
		<p class="f-family-book-italic">Gotham Book Italic</p>
		<p class="f-family-light">Gotham Light</p>
		<p class="f-family-light-italic">Gotham Light Italic</p>
		<p class="f-family-medium">Gotham Medium</p>
		<p class="f-family-medium-italic">Gotham Medium Italic</p>
		<p class="f-family-bold">Gotham Bold</p>
		<p class="f-family-bold-italic">Gotham Bold Italic</p>
	</div>

	<pre class="language-markup"><code class="language-markup">/* Gotham Book */
font-family: $font-regular;

/* Gotham Book Italic */
font-family: $font-italic;

/* Gotham Light */
font-family: $font-light;

/* Gotham Light Italic */
font-family: $font-light-italic;

/* Gotham Medium */
font-family: $font-medium;

/* Gotham Medium Italic */
font-family: $font-medium-italic;

/* Gotham Bold */
font-family: $font-bold;</code></pre>

	<p>Italic fonts will apply normally to any elements that are naturally italic such as the <code class="language-markup">&lt;i&gt;</code> and <code class="language-markup">&lt;em&gt;</code> tags. For other elements not normally italic by default, such as
		a heading, a style should be applied to ensure it is italic. If this is not set, the fonts will not render properly in Safari/IOS.

		<pre class="language-markup"><code class="language-markup">h2.my-custom-heading {
	font-family: &quot;Gotham Book Italic&quot;;
	font-style: italic;
}
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Spacing</h3>
	<p>All heading elements—e.g., <code class="language-markup">&lt;h1&gt;</code>—and <code class="language-markup">&lt;p&gt;</code> are reset to have their margin-top removed. Headings have a margin-bottom equal to half their line-height. Paragraphs have a
		margin-bottom equal to their line-height.</p>
</section>

<section class="f-section">
	<h3 class="f-example-title">Headings</h3>
	<p>Heading styles apply by default when using them (pictured below) or when using the corresponding Heading classes: <code class="language-markup">.h1, .h2, .h3, .h4, .h5, .h6</code>.</p>
	<p>Headings three through six use the `Gotham Medium` font family. Heading three changes to `Gotham Book` on the smallest breakpoint.</p>
	<div class="f-example">
		<h1 id="phantom-ds-heading-1">Heading One</h1>
		<h2 id="phantom-ds-heading-2">Heading Two</h2>
		<h3 id="phantom-ds-heading-3">Heading Three</h3>
		<h4 id="phantom-ds-heading-4">Heading Four</h4>
		<h5 id="phantom-ds-heading-5">Heading Five</h5>
		<h6 id="phantom-ds-heading-6">Heading Six</h6>
	</div>

	<pre class="language-markup"><code class="language-markup">&lt;h1>Heading One&lt;/h1>
&lt;h2>Heading Two&lt;/h2>
&lt;h3>Heading Three&lt;/h3>
&lt;h4>Heading Four&lt;/h4>
&lt;h5>Heading Five&lt;/h5>
&lt;h6>Heading Six&lt;/h6></code></pre>

	<p>The Heading sizes below differ depending on the breakpoint:</p>

	<ul>
		<li><strong>Heading One</strong>
			<ul>
				<li><strong>Extra Small:</strong> Gotham Book, 32px/36px</li>
				<li><strong>Small:</strong> Gotham Book, 36px/40px</li>
				<li><strong>Medium:</strong> Gotham Book, 48px/56px</li>
			</ul>
		</li>
		<li><strong>Heading Two</strong>
			<ul>
				<li><strong>Extra Small:</strong> Gotham Book, 24px/28px</li>
				<li><strong>Small:</strong> Gotham Book, 28px/32px</li>
				<li><strong>Medium:</strong> Gotham Book, 36px/40px</li>
			</ul>
		</li>
		<li><strong>Heading Three</strong>
			<ul>
				<li><strong>Extra Small:</strong> Gotham Book, 20px/28px</li>
				<li><strong>Small:</strong> Gotham Medium, 24px/28px</li>
			</ul>
		</li>
	</ul>
</section>

<section class="f-section">
	<h3 class="f-example-title">Display</h3>
	<div class="f-example">
		<h2 class="ds-display-1" id="phantom-ds-display-1">Display One</h2>
		<h2 class="ds-display-2" id="phantom-ds-display-2">Display Two</h2>
	</div>

	<pre class="language-markup"><code class="language-markup">&lt;h2 class=&quot;ds-display-1&quot;>Display 1&lt;/h2>
&lt;h2 class=&quot;ds-display-2&quot;>Display 2&lt;/h2>
</code></pre>

	<p>Display sizes differ depending on the breakpoint:</p>

	<ul>
		<li><strong>Display One</strong>
			<ul>
				<li><strong>Extra Small:</strong> Gotham Light, 56px/56px</li>
				<li><strong>Small:</strong> Gotham Light, 60px/60px</li>
				<li><strong>Medium:</strong> Gotham Light, 72px/72px</li>
			</ul>
		</li>
		<li><strong>Display Two</strong>
			<ul>
				<li><strong>Extra Small:</strong> Gotham Light, 48px/48px</li>
				<li><strong>Small:</strong> Gotham Light, 56px/56px</li>
				<li><strong>Medium:</strong> Gotham Light, 60px/60px</li>
			</ul>
		</li>
	</ul>
</section>

<section class="f-section">
	<h3 class="f-example-title">Lead</h3>
	<div class="f-example">
		<p class="ds-lead" id="phantom-ds-lead">
			Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
		</p>
	</div>

	<pre class="language-markup"><code class="language-markup">&lt;p class=&quot;ds-lead&quot;>
	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
&lt;/p>
</code></pre>

	<p>The lead size differs depending on the breakpoint:</p>

	<ul>
		<li><strong>Extra Small:</strong> Gotham Light, 16px/24px</li>
		<li><strong>Small:</strong> Gotham Book, 18px/24px</li>
		<li><strong>Medium:</strong> Gotham Light, 20px/28px</li>
	</ul>
</section>

<section class="f-section">
	<h3 class="f-example-title">Paragraph</h3>
	<div class="f-example">
		<p id="phantom-ds-paragraph">JDRF’s mission is to accelerate life-changing breakthroughs to cure, prevent and treat T1D and its complications</p>
	</div>

	<pre class="language-markup"><code class="language-markup">&lt;p>JDRF’s mission is to accelerate life-changing breakthroughs to cure, prevent and treat T1D and its complications.&lt;/p></code></pre>

	<p>The paragraph size differs depending on the breakpoint:</p>

	<ul>
		<li><strong>Extra Small:</strong> Gotham Book, 14px/20px</li>
		<li><strong>Small:</strong> Gotham Book, 16px/24px</li>
	</ul>
</section>

<section class="f-section">
	<h3 class="f-example-title">Inline Text Elements</h3>
	<div class="f-example" id="phantom-ds-inline-elements">
		<p>You can use the mark tag to <mark>highlight</mark> text.</p>
		<p><del>This line of text is meant to be treated as deleted text.</del></p>
		<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
		<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
		<p><u>This line of text will render as underlined</u></p>
		<p><small>This line of text is meant to be treated as fine print.</small></p>
		<p><strong>This line rendered as bold text.</strong></p>
		<p><em>This line rendered as italicized text.</em></p>
	</div>

	<pre class="language-markup"><code class="language-markup">&lt;p>You can use the mark tag to &lt;mark>highlight&lt;/mark> text.&lt;/p>
&lt;p>&lt;del>This line of text is meant to be treated as deleted text.&lt;/del>&lt;/p>
&lt;p>&lt;s>This line of text is meant to be treated as no longer accurate.&lt;/s>&lt;/p>
&lt;p>&lt;ins>This line of text is meant to be treated as an addition to the document.&lt;/ins>&lt;/p>
&lt;p>&lt;u>This line of text will render as underlined&lt;/u>&lt;/p>
&lt;p>&lt;small>This line of text is meant to be treated as fine print.&lt;/small>&lt;/p>
&lt;p>&lt;strong>This line rendered as bold text.&lt;/strong>&lt;/p>
&lt;p>&lt;em>This line rendered as italicized text.&lt;/em>&lt;/p></code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Blockquotes</h3>
	<div class="f-example">
		<blockquote class="ds-blockquote" id="phantom-ds-blockquote">
			<p class="ds-m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
		</blockquote>
	</div>

	<pre class="language-markup"><code class="language-markup">&lt;blockquote class=&quot;ds-blockquote&quot;>
	&lt;p class=&quot;ds-m-b-0&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p>
&lt;/blockquote>
</code></pre>
</section>

<section class="f-section">
	<h3 class="f-example-title">Anchor Links</h3>
	<div class="f-example" id="phantom-ds-anchors">
		Jump down to our <a href="#jdrf-section">JDRF section</a> for details!
		<div id="jdrf-section">
			Here are the details to JDRF.
		</div>
	</div>

	<pre class="language-markup"><code class="language-markup">Jump down to our &lt;a href=&quot;#jdrf-section&quot;>JDRF section&lt;/a> for details!
&lt;div id=&quot;jdrf-section&quot;>
	Here are the details to JDRF.
&lt;/div></code></pre>
</section>

Icons

We're using Material Icons for icons across the Design System. The Design System includes all the necessary styles to use Material Icons, there's some additional setup required to use them.

It is recommended to make use of the .ds-sr-only class to include screen-reader text that is visually hidden, but can help identify icons to screen reader users.

For more info on how to use Material Icons, review Google's documentation.