Scrollable view with sticky buttons
If you have one or 2 primary actions that you always want visible, use this template.
html
<div class="scrollable-example"> <h1 class="h1">Your long content here</h1> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> </ul> <div class="buttons"> <button type="button" class="button button-primary"> Primary action </button> </div> </div>
🏓 Interactive playground
css
.scrollable-example .buttons { position: sticky; bottom: 0; padding-block: var(--space-medium); background: #fff; }
🏓 Interactive playground