The Article block combines the Rich Text and Gallery blocks with additional layout options. It also automatically collapses to a vertical layout when viewed on smaller screens, meaning better-looking pages, whatever the screen size.
Click 'Edit' to open up the configuration:
Content Tab
This section is for populating the content on the page.
Content dropdown
This section is where you input the text and style it; this is exactly the same as the Rich text block, so you can either edit inline or use the content body text field, and use the WYSIWYG options to style the content.
Gallery dropdown
Similarly to the content, this section follows the exact set up as the Gallery block, so you can search for the assets you'd like to showcase, re-arrange the order the assets appear, and make them zoomable and/or downloadable.
Please note: 1. You'll need to know the name/title of the asset you're searching for. 2. Making the assets downloadable ignores users permissions - even if the asset being displayed is in a folder that the group doesn't have access to, is in a hidden folder, or in a folder where they don't have the download permissions.
To re-arrange the assets, click and drag the 6 dot icon next to the asset thumbnail.
Options Tab
This section lets you choose various options, including general and layout:
General Options
Here you can select the background colour of the block, make it full width, and now you can add padding to the container so that it adds gaps at the top, bottom, left and right of the block so it doesn't sit right at the edge of the screen/other blocks. If done in percentages, this will be responsive and change with the size of the screen, however, you can also do this in pixels for a set size regardless of screen size.
As you can see below, if full width isn't on (toggled off), and each container padding is set to 0, then it will take the content width set in the Layout options in properties of the page, or the global setting content width under Brand and Skinning > CMS Web Pages, should this be left empty in the page properties.
Toggling full width will make the page responsive, but as you can see below it takes up the entire screen:
By adding container padding, you can add white/empty space on each side of the content to centre the content. Using the information in the first screenshot in this section (top padding 2%, bottom padding 20%, left and right padding at 10%), you'll see that the white space is added and adjusts to the screen size.
Laptop:
Monitor:
Layout
This section allows you to configure the layout of the block - this includes the same settings as the Gallery block, but also some extra features such as the position of the gallery (left or right), the vertical alignment of the text (so whether it sits at the top, middle, or bottom), and the gallery width (how much space it takes up on the page compared to the text).
The above screenshots have the following settings:
For more information on how to configure the Gallery layout, see the Gallery Block help page