Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Before I create my accordion menu, I’ll create a block of introductory text using the Card Component, with instructions on getting help using a non-partisan voter rights hotline. This information would be a good addition to the downloadable PDF as well. I’ll copy and paste the Accordion Component, focusing at the moment on the collapsed version. We’ll design an expanded panel once we finish creating our list of questions users might have about their voting rights.
Before I create my Accordion Menu,
0:00
I'll start with a block of introductory
text using the Card component,
0:03
with instructions on getting help using
a nonpartisan voter rights hotline.
0:09
This information would be a good addition
to the downloadable PDF as well.
0:27
I'll copy and
paste the Accordion component,
1:00
focusing at the moment on
the collapsed version.
1:03
We'll design an expanded panel once
we finish creating our list of
1:17
questions users might have
about their voting rights.
1:21
I'm going to start with
a question that isn't obvious on
1:28
the American Civil Liberties Union
voting rights page,
1:32
but one that matters very much to
Construction Cal. Am I eligible to vote?
1:36
I'd like the question to
be accompanied by an icon.
1:48
Since the United States Web Design System
limits my choices to what's available at
1:52
Font Awesome, I'll need to be
a bit creative in searching for
1:58
an icon that suggests voting eligibility.
2:03
The icon called user-check
looks pretty good to me,
2:07
although I'd want to test my choice
on users to make sure it's understood.
2:12
Once I've created my first Accordion item,
2:53
I can turn on Repeat
Grid to create eight more.
2:56
For the most part, editing the remaining
eight questions will be straightforward,
3:18
although aligning the icons
might prove tricky
3:23
since I'm working with
different symbols in a font.
3:26
I'll draw out guides to help
me align everything properly.
3:30
My third question,
can I check if I'm registered,
3:51
was inspired by vote.org and isn't
found on the ACLU voting rights page.
4:01
But Dispatcher Dulcea
might ask this question.
4:08
Have I registered to vote already?
4:11
Once I fill out the registration form,
how do I know I'm officially registered?
4:13
My last two questions, what if
I need help understanding English
4:59
and what if my name is not on
the list of registered voters,
5:13
don't fit on a single line,
but that's okay.
5:28
I'll ungroup my grid and enlarge
the rectangles vertically to make room.
5:32
I'd rather make the messaging understood
than force the wording to fit my design.
5:38
Now I'm ready to
replace my icons.
6:27
Once I finish styling
my nine questions,
7:56
I'm going to copy a Return To Top
link from the components document,
7:58
since my page is fairly tall.
8:04
I could copy and
paste a footer as well, but
8:07
I haven't given any thought yet
what goes into my footer.
8:10
Feel free to explore this
area of the page on your own.
8:15
In our final video, we'll expand one
of the Accordion panels, to make
8:30
sure we've made our body copy easy to
understand and easy to parse visually.
8:35
You need to sign up for Treehouse in order to download course files.
Sign up