Show more

example

Use the easings as classes on elements.

Vivamus ac faucibus nisl. Proin et facilisis est. Ut posuere urna sed vulputate pharetra. Sed cursus at sem vitae ornare. Nam vehicula pretium sapien, sit amet aliquam turpis mattis sit amet. Morbi ante felis, dignissim in tortor ut, porta accumsan magna. Duis vehicula ex at dapibus gravida. Duis hendrerit erat elit, et posuere elit venenatis et. Aenean lobortis lacus vel iaculis mollis.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque non lectus sit amet suscipit. Aenean maximus sagittis augue eu scelerisque. Proin egestas rhoncus nunc nec iaculis. Donec et sem justo. Aliquam ultricies maximus felis ut accumsan. Proin sed nunc a sapien dapibus scelerisque. Curabitur at lectus lorem. Suspendisse ac malesuada nibh. Fusce in dignissim tortor.

Fusce leo purus, imperdiet non ultrices nec, blandit sed nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer nec fringilla eros. Vivamus ac ligula at augue molestie tincidunt. Donec in consequat lacus. Suspendisse potenti. Integer venenatis sit amet enim id tincidunt. Phasellus eget justo tellus. Proin viverra, nibh quis tristique finibus, velit elit molestie nulla, ut mattis magna turpis vitae purus. Nullam velit ipsum, lobortis quis odio convallis, rutrum hendrerit sapien. Cras libero ligula, bibendum in dui non, sollicitudin pellentesque dolor. Nam ornare magna purus. Nullam lacinia, sapien id viverra pharetra, orci risus congue sapien, ac dignissim nulla lacus a dolor. Integer volutpat tortor lectus.

Quisque quis nunc massa. Nam quis tortor sem. Pellentesque euismod id nunc ac facilisis. Nam rhoncus orci lectus, at iaculis mauris efficitur sollicitudin. Nulla id dolor placerat, eleifend metus et, vestibulum orci. In viverra tristique est id scelerisque. Duis feugiat ut neque ac hendrerit. Mauris lacinia lectus metus, at ultrices diam molestie pellentesque. Aenean eu facilisis sapien.

Morbi scelerisque, mi non porta semper, eros lectus fermentum libero, vitae suscipit lectus orci rutrum orci. In cursus gravida diam, in tempus nisi semper a. In hac habitasse platea dictumst. Phasellus a faucibus diam. Curabitur rutrum, quam non vulputate ultricies, tellus lacus viverra turpis, in pharetra lacus enim at eros. Duis eu ipsum eget neque ullamcorper sodales. Praesent eget nibh semper, sollicitudin purus in, consequat arcu. Integer nunc nibh, ultrices quis augue a, vulputate faucibus nulla. Sed non ornare nisl, at pellentesque arcu. Maecenas dui felis, lobortis ut arcu tempus, feugiat facilisis dui. Vivamus sed accumsan enim, eu volutpat tellus. Sed molestie finibus urna vulputate elementum. Nulla rutrum nulla et sodales imperdiet. Duis a nisl ultrices, consequat lectus laoreet, vulputate nibh.

Settings

As the section above here, with the easing. We don't want to show all because that would take too much of the page. This section has a "Show more component". The settings and their defaults here:

--shadow-heightdefault: 200px
--shadow-colordefault: white
--shadow-color-transparentdefault: rgba(255,255,255,0)
--show-moredefault: 'show more'
--show-lessdefault: 'show less'
--expanded-heightdefault: '500vh'
--max-heightdefault: '50vh'