Scrollable view with sticky buttons

If you have one or 2 primary actions that you always want visible, use this template.

Your long content here

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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>

css

.scrollable-example .buttons {
  position: sticky;
  bottom: 0;
  padding-block: var(--space-medium);
  background: #fff;
 }