# Part 2: Advanced Structures & Elements Explore more powerful DML capabilities for building complex, responsive email blocks with advanced layout patterns and components. This section focuses on extending basic structures into more flexible and customizable designs. # Structures In [Part 1](/dml_101/part1_basics), we discussed the basic structural elements of a DML block and some of their default settings and behaviors. In this part, we will cover ways to modify that default behavior, so that you can take more direct control over the layout of your email. ## dys-divider & dys-spacer Use these to create a divider line or add extra vertical space to your layout. Check the DML Documentation, linked above, for details on which attributes are available to be modified.
``` Top Text Bottom Text Top Text Bottom Text ``` Example block using dys-divider and dys-spacer View in DML Playground
## Grouping Columns with dys-group By default, columns will stack vertically in mobile view. If you would like to change this behavior, wrap your columns in `` to keep them next to each other.
``` Column 1 Column 2 Column 3 - Group Column 4 - Group ``` Desktop: In desktop view, all columns will display in a horizontal row Mobile: In mobile view, columns wrapped in dys-group will remain in a horizontal row View in DML Playground
## dys-mobile & dys-desktop These tags allow you to take direct control over your desktop and mobile views. Content wrapped in `` will only display on large screens, and content inside `` will only display on small screens. This comes in handy for situations like using different images for desktop and mobile, or having a shorter title for smaller screens to avoid a line break.
``` Desktop Content Mobile Content ``` Desktop: In desktop view, dys-desktop content will be displayed Mobile: In mobile view, dys-mobile content will be displayed View in DML Playground
# Elements In this section, we will give a quick overview of the remaining DML elements, as well as examples in the DML Playground, so that you can see them in action. ## dys-hero - Used in place of dys-row - Allows you to set a background image which can have editable text on top - Great way to draw attention to the most important part of your email - Fluid height vs fixed height determines image display on smaller screens - Setting a fallback background-color will help your content stand out if the user's email client has images turned off by default
``` Your Title Your title and text will sit on top of the background image ``` DML block using dys-hero View in DML Playground
## dys-table - Creates an HTML table in your email - Specific cells can be marked as editable - Can be used dynamically — more on that in [Part 3](/dml_101/part3_templating/#loops--a-hrefhttpsdocsdyspatchiodmldys-fordys-fora)!
``` Item Price Apples $1.00/lb Oranges $1.22/lb ``` DML block using dys-table View in DML Playground
## dys-social - Built-in social media icons — full list available in our DML Documentation - Default icons available in color, black, or white - Defaults include circle, square, or default icon shapes - Ability to upload and use custom icons in dys-social
``` Follow us! Facebook Twitter Linkedin ``` DML block using dys-social View in DML Playground
## dys-carousel - Carousel display of multiple images - Click arrows or thumbnail images to change view - In email clients where it’s not supported (like Outlook), dys-carousel will automatically fallback to hide arrows and display the first image only
``` ``` DML block using dys-carousel View in DML Playground
## Practice Now that we’ve covered the building blocks of DML, it’s time to create your own DML block from scratch. Here’s a block created using ``/``, ``, ``, and some of the basic elements from [Part 1](/dml_101/part1_basics/). Try to re-create this as accurately as possible in the DML Playground. When you’re ready, check out the solution. When you’ve finished, feel free to try styling the block using attributes!
Desktop: Practice block in desktop view Mobile: Practice block in mobile view

Desktop:

Practice block in desktop view

Mobile:

Practice block in mobile view