Sample Web Page

H2 Test

You can add an automatically generated table of contents to your page. Each Section Title will have its own entry, and H3s in the WYSIWYG editor and accordion items will be subheadings. If you do not see something in the table of contents, check to make sure the "Section Title" for each component has been filled in.

H1 Test

Heading 2

More content

Testing more content

Image Gallery

With the Image Gallery page component, you'll be able to: navigate through the image gallery using a keyboard, scroll through the top image the highlight on the bottom film strip will change, and clicking on an image on the bottom film strip will make that image show up in the top space.

Students wearing goggles
Caption #1
Student pouring from a graduated cylinder to a beaker
Caption #2
2 students eating a snack outside
Caption #3
Student writing in a book
Caption #4
A teacher speakers to a room full of students
Caption #5
Student pointing at a globe.
Caption #6
Student and counselor
Caption #7
SFUSD approved stock photo, students overhead
Caption #8
Three students, one with glasses, one with a pencil in hand, and another waving, work on their laptops and smile at the camera.
Caption #9
Smiling children
Caption #10
Students wearing goggles
Caption #1
Student pouring from a graduated cylinder to a beaker
Caption #2
2 students eating a snack outside
Caption #3
Student writing in a book
Caption #4
A teacher speakers to a room full of students
Caption #5
Student pointing at a globe.
Caption #6
Student and counselor
Caption #7
SFUSD approved stock photo, students overhead
Caption #8
Three students, one with glasses, one with a pencil in hand, and another waving, work on their laptops and smile at the camera.
Caption #9
Smiling children
Caption #10

Calendars

You can add up to four Google calendars using Section Calendar.

All Calendars

Academic

District and school

Community

Optional card title

SFUSD schools and departments, nonprofit organizations with an MOU with SFUSD, or government organizations can submit events to our public calendars.
Test link

Another card

Explanation here
Test link

Basic Page Template

This is the most common webpage template in the Content Management System CMS. The building blocks on this page are the same components that can be found on School Sub-Pages and Department pages.

 

Testing the Accordion Link to this item

High school students in classroom

Postcard Carousel Component

Sample: Postcard 1

Multiple postcards can be added to this component. A user clicks on the left and right arrows to see the next postcard.

Component Options:

Title, Media Type (Video or Image), Links (Internal or External), Link Text, Header Position (Left or Right).

Test linkLink 2Link 3
Elementary school student in computer lab

Postcard Carousel Component

Sample: Postcard 2

Multiple postcards can be added to this component. A user clicks on the left and right arrows to see the next postcard.

Component Options:

Title, Media Type (Video or Image), Links (Internal or External), Link Text, Header Position (Left or Right).

Test linkTest

Video postcard

This is a postcard with a video.

Add another button.

Test link

No image postcard

Testing a postcard with no image

Section Text Component

Use this component to display text.

Section Text Component includes  WYSIWYG options for:

  • Block Quote
  • Numbered List
  • Bulleted List
  • Links
  • Bold
  • Italic
  • HTML source code

Headers

Use headers by highlighting text and selecting a heading style from the dropdown labeled "Normal." Using heading styles instead of bolding text is helpful for people using screenreaders and for search engine optimization.

Header 3

Headers in the WYSIWYG section should start with H3, as H1 is the page title and H2 is the blue section title.

Header 4

H4s go under H3s.

Header 5

And H5s are the smallest headers we have.

Sample of a Block Quote. Content is automatically wrapped and indented using this component. 

Centered Section Cards Component

Each Section Card displays its own container of information, including an images, text, and a link. The maximum number of Section Cards displayed in a column is 4. You can include an optional footer link.
High school students framed in heart

Section Card 1

These section cards are in landscape, but you can also select square images or portrait.
External link
Elementary school student in garden

Section Card 2

Component Options: Title, Media Type (Video or Image), Links (Internal or External), Link Text
Link
Superintendent Matthews talking with a teacher in class

Section Card 3

Component Options: Title, Media Type (Video or Image), Links (Internal or External), Link Text
Link
Screen shot of televised Board of Education meeting

Section Card 4

Component Options: Title, Media Type (Video or Image), Links (Internal or External), Link Text
Link
External link

Section Card Icon Variant

To achieve this look, select image style "icons," card text alignment "center," and check "has borders."
Icon of a phone and an envelope

Help Desk

Submit a help desk ticket to report a bug or request a feature.
Icon of a headset

Virtual Office Hours

Need help? Join our Google Meet every Monday (2:00-3:30 p.m.) and Thursday (3:00-4:30 p.m.).
Icon that depicts training or trainer

Sign Up for Training

Complete this Google Form to indicate your interest in training.

Accordions

Use accordions for content such as FAQs or to shorten long content.

What is Lorem Ipsum?

Pretend this is Spanish

Link to this item

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Link to this item

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

Link to this item

Testing email links and footer button with 1 section card

Contact us

Email us
website@sfusd.edu

Call us

tel:4152716000
Sample Web Page

Raw HTML Embed Test

Test whether the Raw HTML text format works for adding a donation form to the page.

This page was last updated on November 11, 2024