Long Description with Sidebar

The Long Description with Sidebar is designed to hold a lot of content to the left side and some nifty designs to draw in audiences on the right side. You can add images, pull quotes, links, and more to the left side within the text area as a way to express a detailed description of your initiative.

Sometimes you can keep it just at that, but if you have especially long content, we recommend adding a sidebar. There are currently 3 options for sidebar content, and you can see an example of all three to the right. In order: 

  1. Call to Action - describe and draw in any user on your page to a link of your choosing through the title, description, and button text; comes with a cute graphic design
  2. Resource Download - select and feature a file that you'd like visitors to this page to download; you can specify the description, resource, and button text.
  3. Featured Partner - ideal for when you have a funding partner on your project who needs high visibility of their logo on the page

Dummy text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu dolor eget elit gravida blandit ac id dui. Aliquam erat volutpat. Nunc nec lorem mollis, scelerisque orci eget, scelerisque leo. In vitae sem maximus, ultrices orci vitae, sollicitudin ligula. Curabitur euismod feugiat elit, ac molestie velit molestie vitae. Praesent hendrerit et quam nec rhoncus. Donec posuere aliquam nunc at dignissim. Duis velit tellus, cursus sed rhoncus eget, dapibus mattis ante.

Example of a Pull Quote. Suspendisse potenti. Morbi et diam id risus eleifend sagittis quis eget risus. Ut aliquet aliquet porta.

Donec rhoncus mattis est ut lacinia. Aenean a mauris convallis, porta lacus ac, tempus sem. Curabitur maximus, leo ut varius hendrerit, dui dolor pharetra lacus, vel condimentum ante ipsum a ligula. Aenean vitae dapibus sem. Aenean cursus elementum erat sed tristique. Cras vel felis a augue scelerisque consequat. Pellentesque molestie ex quis nisi eleifend, quis feugiat ligula semper. Suspendisse potenti.

Example of Block Quote. Phasellus libero sapien, venenatis et porttitor ut, mattis sed tellus. Fusce vel vulputate leo, et placerat mauris. Nulla in pharetra nibh. In efficitur nibh eu eros pulvinar venenatis. Vestibulum blandit velit vel condimentum sagittis. Maecenas consequat in ipsum at ultrices. Pellentesque eleifend massa sed eleifend pulvinar. Ut semper volutpat leo, vitae lacinia odio tempor ac. Quisque pellentesque aliquet molestie. Mauris at convallis lectus, ut vestibulum lacus. Praesent tempor ultrices urna, sit amet porta odio rutrum sit amet.

Aenean et laoreet nisi, a tempus neque. Proin quis nulla ultrices, suscipit velit ac, vehicula nulla. Etiam ornare ipsum hendrerit dui porta tincidunt. Donec pharetra ornare imperdiet. Ut quis convallis metus, eu dictum justo. Praesent porttitor, neque vel pulvinar faucibus, elit tellus finibus felis, vel laoreet libero ex eu odio. Nulla volutpat dui quis risus ultricies congue. Praesent vel viverra sem, et mattis sem. In vel tristique neque. Donec scelerisque sapien id elit euismod lacinia sed non nunc.

Curabitur ipsum augue, maximus eu lorem ac, posuere lacinia magna. Maecenas tempor sagittis lacus quis sodales. Nulla facilisi. Nullam finibus, ex sit amet fermentum rhoncus, massa ante accumsan leo, nec lobortis nisi magna eget nisl. Nam blandit sagittis eros nec laoreet. Nulla iaculis laoreet justo id pulvinar. Curabitur viverra justo mauris, quis maximus nisi tincidunt quis. Donec pellentesque ultrices tellus, sit amet bibendum turpis scelerisque eu. Nunc mattis enim ac orci consequat rhoncus. Praesent justo risus, molestie a suscipit ac, interdum et mauris. Donec convallis dui dui, id placerat mi laoreet nec. Quisque eu neque eu nibh laoreet efficitur. Sed mi eros, aliquam ut semper nec, dapibus vel leo. Aliquam ac bibendum risus, sed venenatis lorem. Duis dolor tortor, malesuada in mi ac, gravida interdum lacus. Mauris sed egestas augue.

Suspendisse finibus risus nisi, nec gravida sem maximus non. Sed faucibus non sapien eget rutrum. Vivamus in purus venenatis, vulputate orci euismod, fermentum enim. In hac habitasse platea dictumst. Curabitur mauris magna, eleifend id turpis id, fringilla vehicula libero. Fusce dapibus maximus mi. Donec ut ullamcorper turpis, vitae viverra turpis.

Information Block with Background Image


The Info Block provides a basic block of text that can be formatted freely much like the Long Description with Sidebar. In this case though, you have the ability add a background image (with color overlay options of 'none,' 'white', 'dark blue,' 'light blue,' and 'black), two optional buttons, and you can align the entirety of the text to the left, right, and center.

If you find the background image is not big enough on your screen, you may have to add additional spaces into the description area. Feel free to add extra spaces by pressing enter, adding bigger font types, or adding extra information to help fill out the background image.

You can also select to have the text stretch the entire width of the page if you'd like. For purposes of an example, we have this one not using the full width.

 

Where there's a button, there's a way Don't feed the button

Impact Strip with Background (Image)


The Impact strip with a background (image) is essentially the same thing as an Information Block with a Background image (comes with an area for an intro, a description, two buttons, a background image and a background image color overlay), except you can add in an 'impact strip' that can show different numbers or stats.

If you find the background image is not big enough on your screen, you may have to add additional spaces into the description area. Feel free to add extra spaces by pressing enter, adding bigger font types, or adding extra information to help fill out the background image.

You can also select to have the text stretch the entire width of the page if you'd like. For purposes of an example, we have this one not using the full width.

 

You can add up to
0

numbers in the impact list

Fellows in
0 +

countries

I'd enjoy
0

pixie sticks please

Impact Strip | Legacy

The Impact Strip | Legacy is a trip down our site's history. Before we got all fancy with the background images (+ overlays), information blocks, and buttons, we kept the impact strip to what it did best: deliver the impact numbers in a strip across the page.

This page section is best used when you wish to have a simple set of impact figures with a white, light blue, or dark blue background. If you wish to have an introduction to the figures (like we are doing right now), it would be best to stick to the Impact Strip with a Background Image

You can still add up to
0

numbers in an Impact Strip!

AYCers in
0 +

Countries

Teachers gave "Apples" a
0 %

rating on Rotten Tomatoes

Term List

The Term List originated from Ashoka staff's desire to showcase impact numbers more efficiently and effectively with a bit more style than listing it out in a simple bullet point list.

Hearing the need, Ashoka.org's designers created a way for people to access a type of 'term' and 'description' list oriented in a two column format with a background image (+ overlay). That way, people could specify their impact figures and explain them in further detail (or, alternatively, present large level Ashoka concepts with ample space to break it down more – kind of like a, you guessed it, Term List).

At the end of each term's description, you have the option to add a link if you'd like to explain more about what you're describing as well. Not necessary to do always, but it's there should you desire it!

You can put as many terms as you'd like

But at the same time, keep in mind the number you put will make a user's eyes glaze over a bit. So our suggestion is to keep it to the 3-5 range!

Learn More

500+ higher education institutions

engaged in 50+ countries, with approximately 5,000 individuals engaged directly in AshokaU

2,000 parents

reached through our workshop on parenting changemakers, Your Kids

Accordion


Not to be confused with the German-created instrument that has been nicknamed a 'portable piano,' Ashoka.org's Accordion page section allows a person to apportion all that long text into some neatly expandable (and retractable) rows.

So long, long scrolling reads. Hello, dynamic way to make page space efficient.

From a user experience perspective, we recommend not going over 6 accordion rows. But there may be some instances where it is necessary to do so.

Feel free to click into the accordion rows below to find out the different features of an accordion page section!

What are the two parts of an Accordion?

  1. The information block: you can add a heading, text and optional buttons that introduce the topic of the accordion rows below it
  2. Accordion rows: each accordion row has a title and a text area field. The title will be the visible section of the accordion row and the text area field houses the content that can be hidden

What can you use an Accordion row for?

  • For FAQs
  • For repeating content under the same headers
  • For hiding or expanding videos
  • Can be used to section off a page into collapsible parts
  • Honestly: anything that fits a list format and requires more description than the list itself!

What colors can you make an Accordion row?

The accordion can be displayed in 3 colors: White background, light blue background and dark blue background. The dark blue background will have white font like the rest of the site.

The Accordion example that you're reading here is the Light Blue version of the Accordion page section.

How much wood could a woodchuck chuck if a woodchuck could chuck wood?

For more information, please consult your local Beaver-Woodchuck Labor Union