Accordion Block

The accordion block allows child panels to be added as needed. The accordion has options of showing the first panel as open on page load (recommended). In addition you can select if multiple panels are allowed to be open at the same time (recommended) or if opening one panel will close the others.

---

Arrow Button Block

The arrow button allows you to create a link to a new page or to file. Files have the option of opening in the same page, a new tab or to trigger a download.

All options for this block are updated in the inspector controls (the right column), including link text, link accessibility text, color, link or download and more.

The link accessibility text field allows for additional text to announced to users with assistive technology. We recommend adding more descriptive text when the link text is generic such as the default “Learn More”

---

Card Block

The card block is generally included as part of a larger block such as the Card Section or Content and Card blocks.

The card block allows for the use of an image, icons are recommended (all approved icons have been loaded into the media library for use), a title, optional paragraph text and the button arrow for a link or media file.

---

File List Card Block

The file list card block is generally included as part of a larger block such as the Card Section or Content and Card blocks. This is an alternate card block that allows for a list of files to be added to the page

---

Card Section Block

The card section block is made up of a collection of child blocks. The title and optional paragraph of text are the Section Heading block. The card or file card list blocks are contained in the Card Grid block. The card grid allows you to select if you want to show 2 or 3 cards in a row.

Example Title

Optional Intro paragraph. The title and intro paragraph are actually part of the Section Heading block. The text alignment can be set to left aligned by updating a style in that block.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Example Title

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

File List Card

• Headshot
• Featured Resource

Certification Process Block

The certification process block allows you to create a grid of Certification Process Cards, four across or three across, that shows the certification process.

It is possible to show different processes in a single block. When this happens we will show a dropdown menu under the main title that allows the user to select which process to show.

To add an addition process select the Certification Process block in Gutenberg. A menu of options will appear on the upper left, there is a plus arrow, when hovered will read, Add Process. Click that button and we add a new grid of Certification Process Cards. All options set in the inspector controls, such as the number of cards across and the process title (displayed in the dropdown) relate to the current process grid.

When there are multiple process grids you can do the following:

• Switch between processes, either by using the left and right arrows in the block controls or by using the dropdown.
• Reorder the process by using the up and down arrows on the Certification Process Section block.
• Delete a process

The Certification Process

Request

Manufacturer submits a request for certification via the certification database — located on the PTCRB website.

Select

Manufacturer selects a primary lab.

Determine Test Required

Primary lab determines testing required for device based upon individual device capabilities.

Submit

Primary lab submits the required documentation to the certification database upon completion of testing.

Document

Manufacturer submits the necessary documentation required to the PTCRB certification database.

Pay

Manufacturer makes payment for certification to CTIA

Confirm

CTIA ensures all requirements have been met.

Notify

PTCRB certification notice is issued to the manufacturer.

Title

Text

Title

Text

Title

Text

Title

Text

Title

Text

Title

Text

---

Certification Programs Block

The certification programs block allows you to show multiple Certification Programs (Program post type) in a single space. Only one program is shown at a time and the user can use the dropdown to switch between.

To add an addition program select the Certification Programs block in Gutenberg. A menu of options will appear on the upper left, there is a plus arrow, when hovered will read, Add Program. You can also add a new program in the program selection dropdown.

When the program block loads you will see an input with the text Search for Programs… click into that and start to type the name of the program. Select the one you want and we will auto populate the title and excerpt from the post type. The related resources slider will also auto-populate.

The Related Links have text but need to have the links manually populated. When creating the links you’ll need to remember to add the hash to the HTML anchor for that section (/page-url/#section-hash).

You have the ability to:

• Switch between programs, either by using the left and right arrows in the block controls or by using the dropdown.
• Reorder the process by using the up and down arrows on the Certification Program block.
• Delete a program.

Choose a Device Certification Program

Sample Text

Program Details

Related Links

• Device Certification Resources
• Test Labs
• Test Plans

Download Documents

Battery Compliance Certification

The CTIA Certification program for battery compliance is at the forefront of ensuring mobile device batteries are high quality and reliable. The program permits operators and their suppliers to validate a lithium ion battery’s compliance with the IEEE Standard for Rechargeable Batteries for Cellular Telephones (IEEE Std 1725™) and the IEEE Standard for Rechargeable Batteries for Multi-Cell Mobile Computing Devices (IEEE Std 1625™).

Program Details

Related Links

• Device Certification Resources
• Test Labs
• Test Plans

Download Documents

---

Content and Card Block

The content and card block examples below. The first example shows the default settings when the block is added.

The second example shows the block with the style of Single Column set, it is intended to not have a card when used. Simply delete the card block.

The third example shows the use of the File Card List block. Delete the default card block that is added and then click the plus button to add the File Card List.

---

Content Post Slider

The content post slider allows you to manually select items for the slider or to show the latest of a single post type. Your post type options are News or Resources (defaults to news). You can then drill down to only show content from a particular taxonomy that is related to that post type.

---

Call to Action Block

The Call to Action Block is designed to be the last element on the page and it will sit over the footer and larger screens. This block is able to be converted to a Reusable Block. This means that you are able to use the same block on multiple pages and when the content is updated it will update on all pages where it is used.

---

Data Grid Block

The data grid block allows for two or three data cards to be displayed. You can switch between the two by updating the style in the inspector controls.

The blue background and image overlay are from the design but can be updated in the inspector controls.

---

FAQs Block

---

Feature Block

---

---

File List Block

• test-news-resource
• icon-excel-document
• Updated Display Name

---

In-page Navigation Block

The in-page navigation block is just a styled list that you add in-page links to. In order to make an in-page link select the block you want to link to. In the inspector controls look for the Advanced panel. Enter text into the HTML anchor field, note any space is converted into a dash. Copy the text that you entered into that field and go back to the in-page navigation block. Type the name of the link and then highlight it and click the link icon. For the link put a hashtag followed by the text you entered in the HTML anchor field.

An example in-page link might be #featured-block, #certification-program or #card-section.

---

Narrative Block

The narrative block is used to create a slider of Narrative Cards which are created directly in this block. A few important things to note:

• The slider only works on the front-end of the website. In the Gutenberg Editor this section will simply scroll horizontally.
• The gray background will be full width on the front-end of the website
• Narrative Cards can have full card image by selecting the Full Image style.
• On the front-end of the website the cards will all be the same height regardless of content.

Additional Brand Story Narrative

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus.

Previous Slide Previous Slide

A Why? Headline

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

A Why? Headline

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

A Why? Headline with a Very Long Description lorem

A Why? Headline

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.

---

Columned Navigation and Files

This block is used on the Certification Programs and Single Program designs. It was designed to allow for a title and columns of either in-page links or files. The example below shows one column of each.

To create the links simply use the paragraph block (default block) for each line and add your link. Remember that in-page links need to have HTML anchor found in the Advanced panel in the inspector controls filled out. The link will be the same text that is entered there with the addition a hash before it, #html-anchor-text.

For the file list click the plus button in the column and add the file list block.

---

Participating Companies Block

• The tab content is pre-defined
• Tab names can be updated through the Inspector controls
• The Working Group Leadership consists of accordion panels.
• The Participating Companies is a styled list. These can be links if desired.

Participating Companies

Example Text

• Working Group Leadership
• All Participating Companies

+ –

+ – Audio Working Group

+ – Panel 2

+ –

---

---

---

Team Grid Block

YouTubeFeature

The YouTube Feature block has the following fields:

• Poster Image (required) – Image Size 1430 x 804
• YouTube Video ID – this is the id of the video which is found in the YouTube URL (required)
• Title – sits over the video until the video is played
• Text – sits over the video until the video is played
• Button Text
• Button Link – the default is the CTIA YouTube channel.

---

Featured Post Slider

• Block was designed for use on the homepage
• This section can auto-populate the latest news or resources and also by taxonomies
• The content from this section can be manually selected
• If the featured post is manually selected and the slider content is auto-populated the featured post will be excluded from auto-populating.

---

Featured Resource Header

• This block allows for a relationship with a single resource
• The title & featured image are pulled in automatically and a link is added to both

Featured Resource

Individual Featured Resource Title That is Very Long Lorem Ipsum Dolor

---