Expanded Content
As the previous tab already mentioned, an element <div class="x-content">
will house all the content that needs to display when the item is expanded. The content within this element can be any HTML markup but XPANDA also comes with predefined layout options.
These layout options either consists of an image, an image with related content or standalone content with no image present. The div elements used for the image and content are as follow:
x-asset
x-info
These options can now even be further customised by adding classes to the elements to assign the position of the asset and content relative to each other. If that doesn't make sense, please see below code examples:
Asset Only
Content consists only of an asset with an image that will be 100% wide:
<div class="x-content"> <div class="x-asset"> <img src="large-1.jpg"> </div> </div>
The following example consists only of an asset with an image but when the class x-asset-center
is added the image will be centered and have a width of 75% relative to the container:
<div class="x-content"> <div class="x-asset x-asset-center"> <img src="large-1.jpg"> </div> </div>
Asset and Content
The example to follow will show the asset to the left and the related content to the right:
<div class="x-content"> <div class="x-asset x-asset-left"> <img src="large-1.jpg"> </div> <div class="x-info x-info-right"> [ANY HTML CONTENT CAN BE DISPLAYED HERE] </div> </div>
Because of the order
property provided by flexbox there is no need to swop around the markup to have the image on the right and the info on the left, the classes will do the ordering automatically:
<div class="x-content"> <div class="x-asset x-asset-right"> <img src="large-1.jpg"> </div> <div class="x-info x-info-left"> [ANY HTML CONTENT CAN BE DISPLAYED HERE] </div> </div>
Content Only
The last example is when there is only content to be displayed with no asset present (please note that x-info
will not be styled correctly and x-info-center
needs to be added):
<div class="x-content"> <div class="x-info x-info-center"> [ANY HTML CONTENT CAN BE DISPLAYED HERE] </div> </div>
Asset Classes
Class | Description |
---|---|
x-asset | Default class. |
x-asset-left | Align left. |
x-asset-right | Align right. |
x-asset-center | Align center. |
x-is-loaded | This class is only used in conjunction with the large image lazyloader. To have this work please read more here. |
x-was-loaded | This class is only used in conjunction with the large image lazyloader. To have this work please read more here. |
Info Classes
Class | Description |
---|---|
x-info | Default class, but needs to be used in conjunction with one of the below classes. |
x-info-left | Align left. |
x-info-right | Align right. |
x-info-center | Full width. |