Explanation

Expanse has two states. On load the Stack will be condensed into a “Card”. When a user clicks the open button it will animate open into an expanded state. By default the expanded state will fill the entire screen unless margin has been added in the settings panel. Set up is simple and you only need to add your desired content to the Stack. You can use the settings panel to customize the appearance of the Card when it is condensed and when it is expanded.

Settings

Animation

Animation – Choose from 11 different options that change how the Stack expands.

Speed – Adjust the speed of the expand animation in milliseconds.

Card Layout

Card Type – Choose from 3 options. “Template | Icon Button” is a preset layout with an image and an overlapping round button. “Hover & Click” will make the Stack expand when any part of the card has been clicked on. “Button” will add a button to the Stack that can be clicked to make it expand. These last 2 options do not have a template and will allow you to set up your own layout.

Card Width – Adjust the width of the Stack when it is condensed or in it’s “Card” state. If this width value is more than the value of it’s container, the Stack will scale it’s entire size to fit inside. This will cause the contents and text to shrink. If you do not want the contents to shrink, you will need to adjust this value so that it is equal to or less than the width of the container.

Card Height – Adjust the height of the Stack when it is condensed or in it’s “Card” state.

Margin T/B – Adjust the space below and above the Stack when it is condensed or in it’s “Card” state.

Card Styles

Header Image (“Template | Icon Button” Card Type) – Add an image to display at the top of the the template. The image will automatically scale to fill the entire height and width of the Header. The aspect ratio of this image is 21:9.

Card & Button Colors – BG = Background, Cls = Close

Button Icons (“Template | Icon Button” Card Type) – Choose from 4 different sets of expand and condense icons for the template’s round button.

Border Radius – Add/Adjust the round corners of the Card.

Shadow – Enable/Disable a subtle shadow around the Card.

Title Font – Optionally declare a custom font for the Header Titles in the Card and in the expanded content.

Text Font – Optionally declare a custom font for the text in the Card and in the expanded content.

Hover Animation – Choose from 3 different options that add hover animations to the entire Card. “Overlay & Message” will display a message when the Card is hovered. “Shadow” will add a shadow when the card is hovered. “Opacity” will make the card slightly transparent and opaque when hovered.

Truncate Type – Choose from 3 different options for how the Card handles overflowing content. “Text Ellipsis” will add “…” to any text that overflows at the bottom of the card. This option only works if the content at the bottom of the card is text. “Gradient Fade” will make the content fade out at the bottom of the card. “Clip” will not apply any effect and the content will simply not overflow past the bottom of the card.

Expanded Layout

Content Width – Adjust the width of the expanded content. This option will not effect the width of the stack when it is expanded but rather the content inside of the Stack.

Margin – This will add space around the edges of the expanded Stack equal to the value you set.

Padding T/B – Adjust the top and bottom padding of the expanded Stack’s content.

Padding L/R – Adjust the left and right padding of the expanded Stack’s content.