The cover gets the height of the viewport.
This document will be built from sections wrapped in Cover components.
This block is above the main content
The main content of a Cover is the element with a main class. It will be placed so that it has equal space above and below it.
Go to cover 2 to verify the page transitions work with covers.
This block is below the main content
This block is below another block that is not the main content. Therefore there will be no space between them.
If the content of the Cover is too large to fit in the viewport, the Cover will scroll.
To demonstrate this, we will add a long story below this paragraph.
Jump to cover A, and test anchor functionality.
Once upon a time, in a land far away, there was a Cover that was too small for its content. The content was so large that it could not fit in the viewport. The Cover had to scroll to show all of its content.
The words went on and on, and there was no way the viewport could contain them all. The Cover had to scroll, and the user had to scroll with it. There was no other way. Even the wizard, in its shiny white tower with the golden roof, could not make the Cover grow to fit the content. And the knight, the mighty knight, sat on his horse and rode away, for he could not fit in the Cover either.
The wise men of the country, and the wise women too, gathered in the town square to discuss the problem. They talked and talked, and they couldn’t find a solution. The Cover had to scroll, and the user had to scroll with it. There was no other way. And they began to sing.
The women:
Oh Cover, oh Cover, why are you so small?
Why can’t you grow to fit us all?
The men:
Oh Cover, oh Cover, why are you so small?
Why can’t you grow to fit us all?
All:
Oh Cover, oh Cover, why are you so small?
Why can’t you grow to fit us all?
We will sing and we will dance
Until you give us a chance
To grow and to show
All the content we know
And the Cover grew, and the content fit. The knight rode back, and the wizard came down from his tower. The people danced and sang, and the Cover was happy. Because, you see, the Cover was not just a Cover. It was a Cover with a story. And the story was told, and the story was heard, and the story was loved.
Sticky covers stick to the top, and let the content after them scroll above them, for a nice effect.
It adds a drop shadow to the element after it, and its content scrolls.
To make sure it’s possible to scroll its content we will now add a lot of extra text.
Once upon a time, in a land far away, there was a Cover that was too small for its content. The content was so large that it could not fit in the viewport. The Cover had to scroll to show all of its content.
The words went on and on, and there was no way the viewport could contain them all. The Cover had to scroll, and the user had to scroll with it. There was no other way. Even the wizard, in its shiny white tower with the golden roof, could not make the Cover grow to fit the content. And the knight, the mighty knight, sat on his horse and rode away, for he could not fit in the Cover either.
The wise men of the country, and the wise women too, gathered in the town square to discuss the problem. They talked and talked, and they couldn’t find a solution. The Cover had to scroll, and the user had to scroll with it. There was no other way. And they began to sing.
The women:
Oh Cover, oh Cover, why are you so small?
Why can’t you grow to fit us all?
The men:
Oh Cover, oh Cover, why are you so small?
Why can’t you grow to fit us all?
All:
Oh Cover, oh Cover, why are you so small?
Why can’t you grow to fit us all?
We will sing and we will dance
Until you give us a chance
To grow and to show
All the content we know
And the Cover grew, and the content fit. The knight rode back, and the wizard came down from his tower. The people danced and sang, and the Cover was happy. Because, you see, the Cover was not just a Cover. It was a Cover with a story. And the story was told, and the story was heard, and the story was loved.
Jump to sticky cover