Creating the Accordion Menu

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