Examples

Last updated November 12, 2020 at 2:39 PM

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H3=5 Heading

TOC list

Top of page anchor links, they are linked to H2 sections on this page. These can be applied on “what’s on this page” anchor links navigation. Simply add toc class your list.

Buttons

Action buttons links

link
link
link
link

UI buttons with .bd-4px class

Buttons with icons

Arrow
Arrow
Arrow
Arrow

Toggles

Large Tabs

Small tabs

List links with arrows

Arrow list is unordered ul list with class arrow-links. Inside of the list items use a links with class link-arrow-blue on light background, or white a links with class link-arrow-white on dark backgrounds. See examples below:

Blue arrow list links

White arrow list links:

External links

External Links are hyperlinks that point outside of current domain. To indicate external link you can add class external to your hyperlink, or if you familiar with HTML, in your HTML mode you can add span with  ca-gov-icon-external-link icon class with a disclaimer for the screen reader users that this hyperlink opens in new window will open in the new window. See code example below:

<a href="https://ca.gov">anchor link <span class="ca-gov-icon-external-link link-icon" aria-hidden="true"></span><span class="sr-only">opens in new window</span></a>

PDF links

PDF icons with all the necessary screen reader markup will be added automatically to all the links that have .pdf file extension in their address.

Link with .pdf file extension in the href

Accordions

How to create accordion in WordPress post:

  • Create an ordinary Paragraph block for the question, and a Paragraph or List block for the answer.
  • Give the question block the CSS class wp-accordion (in the Advance drop-down on the block).
  • Give the answer block the CSS class wp-accordion-content.
  • You can have multiple Paragraph or List answer blocks that roll up to one question – basically, every block with wp-accordion-content will be contained in the wp-accordion above it. If you leave off the CSS class, it will appear outside the accordion.

San José State University Online Teacher Academy
Apple logo

Apple provides a variety of programs to support education, such as Apple Teacher, a self-paced online professional learning program to support and celebrate educators using Apple products for teaching and learning. To support the transition to an online learning environment, Apple Education created the Apple Education Learning Series (AELS) on-demand videos, as well as weekly virtual conferences led by Apple Professional Learning Specialists to discuss the video content with educators. Apple Professional Learning Specialists can also provide a one-to-one, 30 minute, virtual coaching session to support personal learning.

Build skills on iPad and Mac that directly apply to activities with students

Dark accordion example

This is dark accordion that has turned to dark side. However, text is still white, which is a good sign.

This is next dark accordion title

If you would like to add dark accordion to your WP post you need to add dark-accordion class to your h4 header in advanced section of the WP post editor. And then give your answer block dark-accordion-content CSS class.

One more dark accordion title

You can have multiple Paragraph or List answer blocks that roll up to one question – basically, every block with dark-accordion-content will be contained in the dark-accordion above it. If you leave off the CSS class, it will appear outside the accordion.

Some title between dark accordion sections

One more dark accordion title (stand alone)

Some more dark accordion content. this is stand alone accordion to show that margin and paddings are working when it’s stand alone.

Highlights

How to create highlight box in WordPress use div container with class highlight or highlight-lightblue:

Highlight with centered text

Due to Election Day, the Tuesday, November 3 Blueprint tier assignment has been moved to Wednesday, November 4.

The data used for this week’s tier assignments is from the usual 7-day time period.

Light blue highlight with left aligned text

Johnson & Johnson COVID-19 vaccine administration paused

California is pausing the administration of the Johnson & Johnson (Janssen) vaccine immediately as recommended by the U.S. CDC and FDA out of an abundance of caution. State is working with vaccine providers to prioritize vaccine appointments for the affected individuals.

Highlight with image and left aligned text:

Sign up for COVID-19 exposure notifications

Add CA Notify to your phone and get notified if you were near someone with COVID-19.

Find out more
CA Notify logo

Highlight with image on the right side and left aligned text

CA Notify logo

Sign up for COVID-19 exposure notifications

Add CA Notify to your phone and get notified if you were near someone with COVID-19.

Find out more

Image Caption

To have image with caption to the left or right of the text use HTML block with 2 columns such as col-md-8. Number 8 means that this column will occupy 8 out of 12 grid columns (or 2/3 of the page width). If fist column has number 8 in it that means that second column for the image needs to be with number 4 col-md-4 (becasue 8 + 4 = 12). In the image columns right under the image you can insert the paragraph text with class caption 

<p class="caption">Caption text</p>

Contact tracing works when you answer the call or text.

All you have to do is answer the phone call or respond to the text message survey sent by your local health department.

Contact tracing is an anonymous way to do your part. The more people answer the call or text, the more lives and jobs California will save and the faster we can re-open schools and businesses and keep them open. Your information is always kept confidential.

illustration of man on phone

Image caption could be really long. And if the caption is longer than this one, it pushes the image and body text within that paragraph weirdly left, creating empty space on the right.

We’d like the caption text to be smaller, italicized, and wrap under the image without creating empty space.

Layouts with images

Use following code blocks for layouts with images.

Image is placed in the right column. Make sure you add class mx-auto and d-block for the image to fit correctly in the mobile, as well as some image description in the alt attribute.

Medical masks (also called surgical masks) include many types of loose-fitting disposable masks. The fit of a medical mask can be improved with a simple modification or by using a mask brace.

Buy medical masks with:

  • Three layers of non-woven material
  • An adjustable nose bridge

Surgical masks with ties may provide a closer fit than ear loops.

Woman wearing a medical mask.

Image is placed in the left column.

Woman wearing an ill-fitting mask that gaps and lets unfiltered air in and out.

Example of a poorly-fit mask

A well-fitted mask has no gaps between the face and mask, which can allow virus particles to leak in or out.

Good fit forces the air that you breathe out and breathe in to go through the mask and be filtered.

Matrix table

Widespread

More than 7.0 daily new cases (per 100k)*

More than 8.0% positive test for entire county

Widespread

4.0 – 7.0 daily new cases (per 100k)*

5.0 – 8.0% positive tests for entire county

5.3 – 8.0% positive tests for healthy equity quartile**

Widespread

4.0 – 7.0 daily new cases (per 100k)*

5.0 – 8.0% positive tests for entire county

5.3 – 8.0% positive tests for healthy equity quartile**

Widespread

Less than 1.0 daily new cases (per 100k)*

Less than 2.0% positive tests for entire county

Less than 2.2% positive tests for healthy equity quartile**

Vaccine table

Healthcare workers and long-term care residents (Phase 1A)

NOW VACCINATING

People with a high chance of exposure and those 65 or older (Phase 1B)

Sector populations with high chance of exposure:

  • Agriculture and food
  • Education and childcare
  • Emergency services

NOW VACCINATING

Individuals age 16 or older at higher risk

People with certain significant high-risk:

  • Medical conditions
  • Disabilities
  • Illnesses
  • Living spaces
  • Work environments

NOW VACCINATING

Individuals 50 or older

STARTS APRIL 1, 2021

Every Californian 16 or older

Vaccination of people younger than 16 will start as soon as the COVID-19 vaccines are approved for them

STARTS APRIL 15, 2021

How can I make a vaccine appointment?

How do I get a vaccine appointment?

My Turn

Check myturn.ca.gov or call (833) 422-4255 to get a COVID-19 vaccine appointment. If appointments are not available, you can sign up to be notified when they are.

Go to My Turn

VaccineFinder

Some local health authorities have additional vaccination appointments. Use the CDC’s VaccineFinder to find an appointment near you.

Go to VaccineFinder

You can also check with your healthcare provider or local pharmacy.

Sections Separator

Using native WordPress separator block. it is black, taking full width of the page and has 5rem of vertical margin as default. If you would like to change the horizontal rule’s color you can apply following classes to it in advanced options: bd-top-blue, bd-top-darkblue, bd-top-lightblue.

When you are fully vaccinated

You can:

  • Spend time with other fully vaccinated people, including indoors, without wearing masks or physical distancing
  • Spend time indoors without wearing masks or physical distancing with unvaccinated people from a single household who are at low risk for severe COVID-19 disease

You should not:

  • Visit indoors, without a mask, with people at increased risk for severe illness from COVID-19
  • Attend medium or large gatherings
  • Avoid isolation or testing if symptomatic

See the CDPH’s Travel Advisory and COVID-19 Public Health Recommendations for Fully Vaccinated People for complete details.

Lists

list-can

  • You can do it we can help
  • You can do all things
  • You can do it but think twice

list-should

  • You should stay home
  • You should wear mask
  • You should sleep well

list-check

  • List check item 1
  • List check item 2
  • List check item 3

list-not

  • Do not overeat
  • Do not overreact
  • You should not judge others by their appearance

list-noun

  • List item 1
  • List item 2
  • List item 3

What you can do once fully vaccinated

You can:

  • Spend time with other fully-vaccinated people, even indoors, without wearing masks or physical distancing

  • Spend time indoors without masks or physical distancing with unvaccinated people from a single household who are at low risk for severe COVID-19 disease
  • Travel domestically without a pre- or post-travel test and without quarantining after travel

  • Travel internationally without a pre-travel test (depending on destination) and without quarantining after travel
  • Take part in outdoor activities and recreation without a mask, except in certain crowded settings and venues

  • Return to work following an exposure as long as you have no COVID-19 symptoms
  • Skip testing if asymptomatic


  • Skip quarantining following a known exposure if asymptomatic

You should:

  • Continue to follow the mandatory CDPH face coverings guidance, including wearing a mask and physically distancing in indoor public settings
  • Get tested and isolate if experiencing COVID-19 symptoms


  • Continue to follow the mandatory CDPH gathering guidance. Avoid large indoor gatherings, especially when they include those who are not fully vaccinated
  • Avoid being indoors unmasked with people at increased risk for severe illness from COVID-19
  • Wear well-fitted masks when visiting indoors with unvaccinated people from multiple households as permitted by the gathering guidance
  • Follow COVID-19 guidance issued by your employer
  • Continue to follow the Cal/OSHA COVID-19 Emergency Temporary Standards (ETS), if they apply at your workplace
  • Follow CDC and health department travel requirements and recommendations

See the CDPH’s Travel Advisory and COVID-19 Public Health Recommendations for Fully Vaccinated People for complete details.

Blue text highlight

  • Wear well-fitted masks when visiting indoors with unvaccinated people from multiple households as permitted by the gathering guidance
  • Follow COVID-19 guidance issued by your employer
  • Continue to follow the Cal/OSHA COVID-19 Emergency Temporary Standards (ETS), if they apply at your workplace
  • Follow CDC and health department travel requirements and recommendations

The Governor’s Task Force on Business & Jobs Recovery identified support for educators as a critical factor for California’s recovery from the COVID-19 pandemic. For schools that have not reopened for in-person instruction, educators continue to navigate the challenges of providing high quality distance learning. There are many distance learning resources available and the following list was selected based on quality and scope.

Find your area’s COVID-19 website

Use our lookup tool to find COVID-19 text alerts you can get from your county