Text with two columns
Text with two columns provides divided sections for content. To assign content into main column or side column use slot="main" and slot="side". By default main column is on left side, use attributes reversed to switch the side.
# Examples
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit neque nec dolor porttitor lacinia. Mauris porta mi eget nibh rutrum gravida eu id nisl. Ut eget semper augue, sit amet rutrum enim. Nullam finibus iaculis magna, nec vulputate tellus accumsan non. Ut iaculis neque pulvinar, blandit lacus id, mollis justo. Praesent non mi ipsum. Ut consequat nibh a urna venenatis lobortis. Donec tempor erat non nisl bibendum, aliquet blandit dui lobortis. Maecenas elit tellus, porta ac commodo ac, porttitor eget mauris. Pellentesque tempus vulputate egestas.
<hy-two-columns reversed>
<hy-paragraph-text slot="main">
<hy-heading heading="h3">This is main column</hy-heading>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit neque nec dolor porttitor lacinia. Mauris porta mi eget nibh rutrum gravida eu id nisl. Ut eget semper augue, sit amet rutrum enim. Nullam finibus iaculis magna, nec vulputate tellus accumsan non. Ut iaculis neque pulvinar, blandit lacus id, mollis justo. Praesent non mi ipsum. Ut consequat nibh a urna venenatis lobortis. Donec tempor erat non nisl bibendum, aliquet blandit dui lobortis. Maecenas elit tellus, porta ac commodo ac, porttitor eget mauris. Pellentesque tempus vulputate egestas.</p>
</hy-paragraph-text>
<div slot="side">
<hy-image
image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
image-alt="Test image"
aspect-ratio-width=16
aspect-ratio-height=9
caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>
</div>
</hy-two-columns>
# Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
reversed | reversed | boolean | false |