Snippets Shared in UXP
This page is meant to demonstrate each snippet that we are building to share across channels. All snippets that should be shared will reside in the "UXP-shared" channel. Some of the snippets will be more configured than others. Beware of edits to grids and sections since that will propagate across all channels unless the snippet is setup with it's own grid or section. For example, a snippet with a background image will need it's own section so that each data source can be edited for each page (unless of course if you wanted to reuse the same background image in multiple snippets).
Editing Snippets
As of right now snippets cannot be edited within the experience editor of the page they are inside. To edit one, click on the snippet and find the icon dropdown to select "Edit Related Item". From there you can go into the experience editor for that snippet and edit its content.
Alternatively, find the snippet in the data folder for the individual page and edit its content from there however you seem fit. I say this because in the content editor you can edit the image or CTA or rich text components without opening the experience editor.
EDIT: actually I am editing this snippet from inside the experience editor for this page. It seems you can edit snippets within a page until you publish it and then it's locked down.
2 Column with Content - Standard Padding
Data Layout
Each grid starts with a folder with standard section padding and standard internal grid padding. For now, there is blank grids and ones with images, rich text, and CTAs on for both left and right. You can move the columns around in the experience editor to fix your needs. Just make sure that you have the correct mobile reverse grid selected.
In the future (once implemented), there will be sub folders with options for internal grid padding between columns (once the classes are implemented to be used in the grid 'extraClass' option).
2 Column - Neutral Light BG - No Padding Top Bottom
Add Some Content
Here a blank snippet was inserted with a primary light background. In each column, a rich-text component was inserted into the new snippets data folder.
2 Column Blank - Primary Light BG - Standard Padding
Background Image
A snippet with a background image is essentially the same as other snippets, except a new section is created in the new snippets data folder. Since it is there, the parent section can be edited where the changes will only effect that snippet. So we can change the padding, margins, background image, background color, etc.
I don't think adding a background image is functional besides for a hero section since it inserts the image at full width and the height resizes to match the images aspect ratio. I would've expected this to be a standard background image.
Column with Background Color
Here I have inserted a section into the column so that I can set the background color for the column. Note that on Friday D6 will be pushing to prod an update that fixes snippets from being wrapped in an outer wrapper so the background images and colors will extend to the full section at that point.
Section in Columns
Locally Shared Editable Section
Column 3
