Layouts

The IAPP website includes four main layouts: default, full open, narrow open and article. All four layouts have a header section at the top and the site footer at the bottom.

In addition to the header and footer, the default layout also includes a sidebar on the left and main content section on the right. As the name suggests, this is the layout that any page on our site will default to unless we specify otherwise.

Inside the header section we have a few important elements: (1) the main site navigation which includes our logo, search bar and login function; (2) the page title; (3) an optional tagline below the page title; and (4) an optional banner background image.

The footer section, like the main site navigation, remains constant throughout the website. Its content does not change from page to page, but instead provides a consistent set of content and links that we want on every page of the site.

The sidebar is where we include sectional navigation links. Unlike the main site navigation at the top of the page, the sidebar navigation links to various key pages and subsections within one section of the site. This is also where we sometimes place links to related content that exists in other sections of the site.

The two open layouts have no sidebar and the main content block is centered in the viewport of the user’s monitor. This layout is optimal for landing pages, squeeze pages and subscription pages because it removes the distraction of unnecessary navigation and sidebar content. It allows you to better focus the message of the page, usually culminating in some sort of call-to-action. Examples include the IAPP Membership (Join) page and the Daily Dashboard subscription page.

Whether you choose the full open or narrow open layouts is largely determined by the amount of information you need to include on the page. The IAPP Membership page uses the full open layout because there is a good deal of content and sections. Using the wider layout keeps the page from becoming unnecessarily long. The content of the Daily Dashboard subscription page, however, consists of one short form, making the narrow open layout the better option.

Finally, the article layout, also known as the "single" layout, is used for news and resource articles. Like the default layout, it has a sidebar, but the sidebar appears on the right rather than the left.

The main reason for this is that the article layout is optimized for lengthier reading sessions. Because we read from left to right in English, having the main content block on the left makes for a more natural reading experience for the user.

Note: We include the sidebar on the left in the default layout because it's more likely the user will be browsing for content on these pages and we want to make the sectional navigation easy to find.

Default Layout

Display

Notes

This is the default layout for any page on the website. This includes landing and static pages.

Click here to see default styling for static pages.

Full Open Layout

Display

Notes

The Full Open Layout is used predominantly for pages where there is one particular action we would like the user to take.

Example: The Join page.

Narrow Open Layout

Display

Notes

Similar to the Full Open Layout, the Narrow Open Layout is used predominantly for pages where there is one particular action we would like the user to take, but where the content of the page is minimal—such as a simple form.

Example: The Daily Dashboard Subscribe page.

Article Layout

Display

Notes

This is the layout for single article pages on the website.

Type Styles

The IAPP website uses two premium web fonts: Tabac Sans and Tabac G3. Tabac G3 is used for news and resource articles, while Tabac Sans is used for everything else on the site. There are color, size, weight and spacing styles associated with page and section headings, section headings, page text, links and pull quotes, and examples of these may be seen below.

Exception: Article headlines use Tabac Sans rather than Tabac G3.

Note: When using Tabac G3 in an article, link color is Main Green. When using Tabac Sans in all other parts of the site, links should be Link Color, which is a shade of blue. (See the Colors section for details.)

Colors

The colors listed below are the official palette of the IAPP website. But it is important to note that text and other elements should not be arbitrarily assigned any of these colors. These are assigned programmatically to headings, buttons, icons, callouts and other elements of the site to ensure consistency. To see these assignments, please refer to the sections of this guide that contain the elements in question.

Image Styles

We have numerous image assets throughout the website and you can see examples of these below. Nearly every design aspect of these images is assigned programmatically, so there is generally no need to resize, crop to circles, apply overlay gradients, etc. For specific requirements on each type of image, see the examples below.

Notes on page banners:

The green-to-blue gradient overlay on page banners is assigned programmatically. The original image used should be black and white.

If no background image is assigned to a banner, the background color will be gray.

Full Width Image Callout

Display

Specs

Image dimensions: 1000x500 px
Programmatic resize: 788x394 px

HTML

<div class="img-tz"> <a href="/connect/chapters"> <img src="https://iapp.org/wp-content/themes/iapp/static/img/knet-ad.png" alt=""> </a> </div>

Rectangular Image Callout

Display

KnowledgeNet chapters

Want some in-person networking? We’ve got locations—everywhere. Boston, Brussels, Bangalore (and that’s just the Bs). KnowledgeNet chapter meetings are free for members, and they’re priceless face time with fellow privacy pros. Speakers, discussions and contacts—and we’re adding chapters all the time.

Specs

Image dimensions: 750x417 px
Programmatic resize: 300x167 px

HTML

<article class="l-pair-2"> <div class="art-bd"> <a href="/connect/chapters"> <div class="img-tz"> <img src="https://iapp.org/media/images/about_iapp/Wb_connect_KnetChpt-01.png" alt=""> </div> <!-- /img-tz --> </a> </div> <!-- /art-bd --> <div class="txt-bd"> <h3 class="tz-head-med"><a href="/connect/chapters" class="tz-head-link">KnowledgeNet chapters</a></h3> <p class="tz-text-med">Want some in-person networking? We’ve got locations—everywhere. Boston, Brussels, Bangalore (and that’s just the Bs). KnowledgeNet chapter meetings are free for members, and they’re priceless face time with fellow privacy pros. Speakers, discussions and contacts—and we’re adding chapters all the time.</p> </div> <!-- /txt-bd --> </article>

Circular Image Callout - Vertical

Display

Meetings

We’re constantly adding new meetings. See the current schedule to find one near you.
RSVP now

Notes

Images are rounded programatically.

Specs

Image dimensions: 256x256 px
Programmatic resize: 175x175 px

HTML

<div class="grid-3"> <div class="media-block text-centered"> <div class="art-bd"> <div class="img-rounded"> <img src="https://iapp.org/wp-content/themes/iapp/static/img/knet-meetings.png" alt=""> </div> <!-- /img-rounded --> </div> <!-- /art-bd --> <div class="txt-bd"> <h4 class="page-head-sm"> <a href="#meetings" class="head-link">Meetings</a> </h4> <p class="page-text-sm">We’re constantly adding new meetings. See the current schedule to find one near you.<br><a href="#meetings" class="alternate-link--underline">RSVP now</a></p> </div> </div><a> <!-- /media-block --> </div>

Circular Image Callout - Horizontal

Display

Privacy List

Crowdsourcing at its best. Tap in to the IAPP listserve to get the answers you need from the privacy community.

Notes

Images are rounded programatically.

Specs

Image dimensions: 256x256 px
Programmatic resize: 150x150 px

HTML

<article class="tz l-pair-tz-sm"> <div class="art-bd"> <a href="/connect/privacy-list"> <div class="img-rounded"> <img src="/wp-content/themes/iapp/static/img/Connect_LISTSERVE_256x256-01.png" alt=""> </div> <!-- /img-tz --> </a> </div> <!-- /art-bd --> <div class="txt-bd"> <h3 class="tz-head-med"><a class="head-link" href="/connect/privacy-list">Privacy List</a></h3> <p class="tz-text-med">Crowdsourcing at its best. Tap in to the IAPP listserve to get the answers you need from the privacy community.</p> </div> <!-- /txt-bd --> </article>

Resource Center Issues

Display

How To Build a Privacy Program

Notes

Upload the image as "Featured Image" for an "Issue" in the WordPress admin. The white padlock and green arrow icons, as well as the Issue title are assigned programmatically.

Specs

Image dimensions: 360x200 px
Programmatic resize: 221x123 px

HTML

<div class="grid-3 issues-grid"> <article class="media-block resource-tease"> <div class="art-bd"> <a href="https://iapp.org/resources/issue/close-up-how-to-build-a-privacy-program-2/"> <div class="img-tz"> <img src="https://iapp.org/media/uploads/2014/07/How-to-Build-a-Privacy-Program_360x200.jpg" alt=""> </div> <!-- /img-tz --> </a> </div> <!-- /art-bd --> <div class="txt-bd head-item-split"> <h3 class="tz-head-sm"><a class="head-link" href="https://iapp.org/resources/issue/close-up-how-to-build-a-privacy-program-2/">How To Build a Privacy Program</a></h3> <a class="button-pill icon-arrow-next page-item-right" href="https://iapp.org/resources/issue/close-up-how-to-build-a-privacy-program-2/"><span class="icon icon-pill"></span></a> </div> <!-- txt-bd --> <div class="overlay-icon icon-lock"> <span class="icon icon-lg"></span> </div> <!-- /overlay-icon --> </article> <!-- /media-block --> </div>

Sponsor/Exhibitor Logos

Display

Platinum Sponsor

Gold Sponsors

Silver Sponsors

Notes

Sponsor and exhibitor logos are placed within a media grid. These can be three or four across.

HTML

<div class="compound-block"> <div class="inner l-12--center"> <h4 class="subsection-hdr-centered">Platinum Sponsor</h4> <div class="logo-grid-1"> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="http://www.microsoft.com/en/us/default.aspx" rel="external"> <img src="https://iapp.org/media/images/logos/microsoft.png" alt=""> </a></div> </div> </div> <h4 class="subsection-hdr-centered">Gold Sponsors</h4> <div class="logo-grid-3"> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="https://www.backupify.com/" rel="external"><img src="https://iapp.org/media/images/logos/Backupify_07-14_web.png" alt=""> </a></div> </div> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="http://www.bakermckenzie.com/" rel="external"><img src="https://iapp.org/media/images/logos/BakerMcKenzie_08-13_web.jpg" alt=""></a></div> </div> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="https://www.beazley.com/" rel="external"> <img src="https://iapp.org/media/images/logos/Beazley_logo_web.png" alt=""> </a></div> </div> </div> <h4 class="subsection-hdr-centered">Silver Sponsors</h4> <div class="logo-grid-4"> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="http://adallom.com/" rel="external"> <img src="https://iapp.org/media/images/logos/Adallom_07-14_web.png" alt=""> </a></div> </div> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="http://avepoint.com/" rel="external"> <img src="https://iapp.org/media/images/logos/AvePoint_01-31-13_Web.jpg" alt=""> </a></div> </div> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="http://www.brainloop.com/en/" rel="external"> <img src="https://iapp.org/media/images/logos/Brainloop_06-14_web.png" alt=""> </a></div> </div> <div class="media-block text-centered"> <div class="art-bd"><a class="img-link el-pad--sm" href="http://www.bsigroup.com/" rel="external"> <img src="https://iapp.org/media/images/logos/BSI_05-14_web.png" alt=""> </a></div> </div> </div> </div> </div>

Headshots

Display

J. Trevor Hughes, CIPP

President & CEO at IAPP

J. Trevor Hughes, CIPP

President & CEO at IAPP

J. Trevor Hughes, CIPP

President & CEO at IAPP

J. Trevor Hughes, CIPP

J. Trevor Hughes, CIPP

Notes

For use in a media grid or on authored articles. Rounded edges and resize happen programmatically.

Specs

Image dimensions: 256x256 px
Programmatic resizes: 316x316 px, 175x175 px, 125x125 px, 100x100 px, 52x52 px

HTML

<!-- Media Grid 2 --> <div class="grid-2"> <div class="media-block text-centered conf-speaker"> <div class="art-bd"> <div class="img-rounded"> <img src="https://iapp.org/media/headshots/00330000015867gAAA.png" alt="J. Trevor Hughes"> </div> </div> <div class="txt-bd"> <h4 class="mug-head"><a class="tz-head-link" href="/conference/iapp-privacy-academy-2014/keynote-speakers-a14/#hughes">J. Trevor Hughes, CIPP</a></h4> <p class="mug-text">President & CEO at IAPP</p> </div> </div> </div> <!-- Media Grid 3 --> <div class="grid-3"> <div class="media-block text-centered"> <div class="art-bd"> <a href="/about/person/00330000015867gAAA" class="img-link"> <div class="img-rounded"> <img src="https://iapp.org/media/headshots/00330000015867gAAA.png" alt="J. Trevor Hughes" /> </div> <!-- /img-rounded --> </a> <!-- /img-link --> </div> <!-- /art-bd --> <div class="txt-bd"> <h4 class="mug-head"> <a href="/about/person/00330000015867gAAA" class="tz-head-link">J. Trevor Hughes, CIPP</a> </h4> <p class="mug-text"> President & CEO at IAPP </p> </div> <!-- /text-block --> </div> <!-- /media-block --> </div> <!-- Media Grid 4 --> <div class="grid-4"> <div class="media-block text-centered"> <div class="art-bd"> <a href="/about/person/00330000015867gAAA" class="img-link"> <div class="img-rounded"> <img src="https://iapp.org/media/headshots/00330000015867gAAA.png" alt="J. Trevor Hughes" /> </div> <!-- /img-rounded --> </a> <!-- /img-link --> </div> <!-- /art-bd --> <div class="txt-bd"> <h4 class="mug-head"> <a href="/about/person/00330000015867gAAA" class="tz-head-link">J. Trevor Hughes, CIPP</a> </h4> <p class="mug-text"> President & CEO at IAPP </p> </div> <!-- /text-block --> </div> <!-- /media-block --> </div> <!-- Author Headshot - Bottom --> <section class="article-bio-mod"> <div class="person-content-block"> <div class="l-person"> <a class="art-bd" href="/about/person/00330000015867gAAA"> <div class="img-rounded"> <img src="https://iapp.org/media/headshots/00330000015867gAAA.png"> </div> <!-- /img-rounded --> </a> <!-- /art-bd --> <div class="txt-bd"> <a class="person-name-lg" href="/about/person/00330000015867gAAA">J. Trevor Hughes, CIPP</a> </div> <!-- /txt-bd --> </div> <!-- /l-person --> </div> <!-- /person-content-block --> </section> <!-- /article-bio-mod --> <!-- Author Headshot - Top --> <div class="article-meta-block"> <div class="img-rounded article-meta-img"> <img src="https://iapp.org/media/headshots/00330000015867gAAA.png" alt="J. Trevor Hughes"> </div> <p class="article-meta-text"> <span class="article-meta-author"><a href="/about/person/00330000015867gAAA" class="article-author-link--bold">J. Trevor Hughes, CIPP</a></span> </p> <!-- article-meta-text --> </div>

Article Featured Images

Display

Notes

Added as "Featured Image" in the WordPress News admin.

Specs

Image should be at least 725px wide.

HTML

<div class="tz-art art-bd"> <img src="/media/uploads/publications/blogPic_6-20.jpg" alt="Privacy Policies Are Not Enough: We Need Software Transparency"> </div>

Inline Captioned Images

Display

Healthcare Privacy

Notes

To insert a captioned image into an article, click the "Add Media" button, select an image, and then enter a caption in the sidebar "Caption" field. These can be aligned left, right or center.

HTML

<div id="attachment_38558" style="width: 370px" class="wp-caption alignleft"> <img src="/media/uploads/2014/07/HIPAA_360x200.jpg" alt="Healthcare Privacy" width="360" height="200" class="size-full wp-image-38558"> <p class="wp-caption-text">Healthcare Privacy</p> </div>

Ad Styles

We insert third-party and in-house ads programmatically in a few key places on the website. These placements are strategic and have been negotiated to allow maximum exposure while affecting the user’s reading experience minimally and preserving the integrity of the IAPP brand.

The primary location of third-party ads is our news feeds and articles, but we also include third-party ads on the Career Central page and in our conference mobile app.

The only ads we include elsewhere on the site are in-house ads. These appear in various strategic locations throughout the site, such as at the top of the Certify landing page and in the sidebars of the Certify and Conferences sections.

Full Ads

Display

Notes

We use these for in-house ads in the Certify section. These ads rotate randomly on page load. To create a new certification ad, create an Ad post in WordPress and tag it as "Certification Ad."

Specs

Original dimensions: 1000x461 px
Programmatic resize: 788x396 px

HTML

<div class="iapp-ad-certification"> <div> <div class="dfad dfad_pos_1 dfad_first" id="_ad_135287"> <img src="https://iapp.org/media/uploads/2014/07/word-of-the-year.png" alt="word-of-the-year" class="alignnone size-full wp-image-135289"> </div> </div> </div>

Leaderboard Ads

Display

Notes

These ads appear after the top story tease on any news feed page. These ads rotate randomly on page load. To create a new leaderboard ad, create an Ad post in WordPress and tag it as "Leaderboard."

Specs

Image dimensions: 728x90 px

HTML

<div class="dfad dfad_pos_1 dfad_first" id="_ad_135388" style="display: block;"> <a href=" https://www.allclearid.com/business/breach-response/"> <img src="https://iapp.org/media/uploads/2014/07/all-clear-leaderboard.png" alt="all-clear-leaderboard" class="alignnone size-full wp-image-135389"> </a> </div>

Mobile App Ads

Display

Notes

These ads are used for sponsors of the IAPP Events app. These ads must both be created in WordPress (tagged as an App ad) and uploaded to Eventsential.

Specs

Image dimensions: 300x50 px

HTML

<div class="iapp-ad-app"> <div> <div class="dfad dfad_pos_1 dfad_first" id="_ad_137553"> <a href="#"> <img src="https://iapp.org/media/uploads/2014/08/sample-ad.png" alt="sample-ad" width="300" height="50" class="alignnone size-full wp-image-137554"> </a> </div> </div> </div>

Tease Styles

A tease is excerpt or abstract for a full piece of content. These appear on the homepage, landing pages and feed pages of the website. The text tease is the default for most teases on the site, especially news article teases.

If the piece of content you’re linking to includes a featured image, an image tease will be programmatically assigned. The size and placement of the image is also assigned programmatically.

If you tag a piece of content as a “Resource,” the icon tease will be assigned, and the icon itself will be assigned based on the “Resource Type” you selected.

Note: Every conference must have an image associated with it. The four types of conference teases are generated programmatically when a conference is added in WordPress. However, since each image currently has a graphic overlay, the Web Services team must code the positioning of these images whenever a banner changes (from one year to the next) to ensure the branded overlay is visible.

Image Tease

Display

The Chinese Hacking Indictments and Why Economic Espionage Is Different

By Peter Swire

(May 21, 2014) On Monday, the Justice Department announced indictments against five named members of China’s People’s Liberation Army for hacking and theft of trade secrets. In reaction, the Chinese government denied the attacks and essentially said the U.S. spies, so the U.S. has no basis for complaining. I think the Chinese government is wrong on both counts. Read More

Privacy Perspectives

★

Notes

Similar to the text tease, these image teases are generated automatically when a post is created in WordPress. The only difference is that it will display a photo that you select to be the "Featured Image" in the WordPress admin.

By default, it takes the first few lines from the post content and trucates as neccessary. To override this behavior, you may enter content in the "Excerpt" field in the WordPress admin. This is especially useful if you need italics tags or other special HTML characters to be included in the tease (the default truncation treatment removes any HTML tags).

Specs

Sizing occurs programmatically.

HTML

<article class="tz tz-iapp_news l-pair-tz tz--has-img" id="tz-115547"> <!-- This checks if the thumbnail exists and makes the markup appear --> <div class="tz-art art-bd"> <a href="https://iapp.org/news/a/the-chinese-hacking-indictments-and-why-economic-espionage-is-different/"> <img src="/media/uploads/publications/cybersecurity.jpg" alt="The Chinese Hacking Indictments and Why Economic Espionage Is Different"> </a> <!-- /tz-art --> </div> <div class="txt-bd"> <h3 class="tz-head-med"> <a href="https://iapp.org/news/a/the-chinese-hacking-indictments-and-why-economic-espionage-is-different/" class="tz-head-link">The Chinese Hacking Indictments and Why Economic Espionage Is Different</a> </h3> <div class="tz-meta-block"> <p class="tz-meta-text"> <span class="tz-meta-author">By <a href="https://iapp.org/about/person/003a000001Qp3AGAAZ" class="tz-author-link">Peter Swire</a></span> </p> <!-- tz-meta-text --> </div> <!-- /tz-meta-block --> <div class="tz-text-block"> <p class="tz-bd-text"> (May 21, 2014) On Monday, the Justice Department announced indictments against five named members of China’s People’s Liberation Army for hacking and theft of trade secrets. In reaction, the Chinese government denied the attacks and essentially said the U.S. spies, so the U.S. has no basis for complaining. I think the Chinese government is wrong on both counts. <a class="tz-bd-link" href="https://iapp.org/news/a/the-chinese-hacking-indictments-and-why-economic-espionage-is-different/">Read More</a> </p> <p class="tz-bd-text"><a href="/news/privacy-perspectives" class="tz-author-link">Privacy Perspectives</a></p> </div> <!-- /tz-text-block --> </div> <!-- /txt-bd --> <div id="iapp_post_115547" class="tz-saveable-block"> <a class="tz-saveable tz-saveable-trigger" data-iapp-post-id="115547" href="#"> <span title="Read later in MyIAPP" class="saveable-icon">★</span> </a> </div> </article>

Top Story Tease

Display

Start-Ups, Data Privacy and Disruption

By Daragh O Brien

★

(Aug 21, 2014) The Globe and Mail ran a story recently where they claimed that “start-ups don’t care about privacy,” even in this post-Snowden era. I was bemused by that statement. I’ve advised start-ups even in the pre-Snowden era, and smart ones took privacy seriously because they realised that getting it wrong could damage their brand or affect their ability to deliver a return to their investors. Really smart ones tried to figure out how to make it part of their USP (unique selling proposition). The arti... Read More

Privacy Perspectives

Notes

These are generated automatically when a post is created in WordPress and either falls be default at the top of the news stream or is selected to appear first. The main difference from a standard text or image tease is that the headline is much larger. These top story teases may either consist of plain text or may contain a featured image.

By default, it takes the first few lines from the post content and trucates as neccessary. To override this behavior, you may enter content in the "Excerpt" field in the WordPress admin. This is especially useful if you need italics tags or other special HTML characters to be included in the tease (the default truncation treatment removes any HTML tags).

HTML

<div class="top-story"> <h3 class="tz-head-xlg"> <a href="https://iapp.org/news/a/start-ups-data-privacy-and-disruption/" class="tz-head-link">Start-Ups, Data Privacy and Disruption</a> </h3> <div class="tz-meta-block"> <p class="tz-meta-text"> <span class="tz-meta-author">By <a href="https://iapp.org/about/person/003a000001VG0BFAA1" class="tz-author-link">Daragh O Brien</a></span> </p> <!-- tz-meta-text --> </div> <!-- /tz-meta-block --> <div id="iapp_post_137200" class="tz-saveable-block"> <a class="tz-saveable tz-saveable-trigger" data-iapp-post-id="137200" href="#"> <span title="Read later in MyIAPP" class="saveable-icon">★</span> </a> </div> </div> <article class="tz tz-iapp_news l-pair-tz tz--has-img" id="tz-137200"> <!-- This checks if the thumbnail exists and makes the markup appear --> <div class="tz-art art-bd"> <a href="https://iapp.org/news/a/start-ups-data-privacy-and-disruption/"> <img src="/media/uploads/publications/blogPic_6-20.jpg" alt="Start-Ups, Data Privacy and Disruption"> </a> <!-- /tz-art --> </div> <div class="txt-bd"> <div class="tz-text-block"> <p class="tz-bd-text"> (Aug 21, 2014) The Globe and Mail ran a story recently where they claimed that “start-ups don’t care about privacy,” even in this post-Snowden era. I was bemused by that statement. I’ve advised start-ups even in the pre-Snowden era, and smart ones took privacy seriously because they realised that getting it wrong could damage their brand or affect their ability to deliver a return to their investors. Really smart ones tried to figure out how to make it part of their USP (unique selling proposition). The arti... <a class="tz-bd-link" href="https://iapp.org/news/a/start-ups-data-privacy-and-disruption/">Read More</a> </p> <p class="tz-bd-text"><a href="/news/privacy-perspectives" class="tz-author-link">Privacy Perspectives</a></p> </div> <!-- /tz-text-block --> </div> </article>

Icon Styles

We use a lot of icons on the website. These can be divided by type (image-based and font-based) and by style (hex, circle, etc.). Image-based fonts are what we use for creating hex icons, circle icons and social icons, while we use the font-based icon set Font Awesome for additional icons.

Megamenu Styles

Button Styles

We use three types of buttons on our website—basic, secondary and ghost. The basic button is green and is used primarily for marketing CTAs and submit functions. There isn’t a hard, fast rule here. But you generally do not want a lot of green buttons on one webpage as they command a lot of attention. If you need a lot of buttons on one page, it’s better to use the secondary button style, which is gray.

Ghost buttons are a more modern style than our basic and secondary buttons. We currently use these on the homepage of the site, but eventually they will likely be used on other parts of the site. For more on ghost buttons, including examples and guidelines for when to use or not use them, go here.

Form Styles

Table Styles

Static Page Defaults