# Todo List

### Layout Variations

See how this plugin adapts across different mashup views. Each view shows a single instance to demonstrate how the layout responds to available space.

#### Full View

Done

1

Practice winking

2

Ask Pam to laugh louder at my jokes, people aren't getting them

3

Research options for a regional manager also being a talent agent

4

Ask Pam to make me a Wikipedia page

5

Check if David Wallace follows me back on TikTok

6

Look into what 'promise' means legally (Scott's Tots)

7

Make Dwight admit I could beat him in a fight

8

Update enemies list

9

Send Toby to Costa Rica for research

10

Google: how to tell if your employees love you

11

Buy more Serenity by Jan candles

12

Threat Level Midnight table read

13

Invent new catchphrase (bigger than that's what she said)

14

Send headshot to local news

15

Look into buying the building

16

Tell Dwight he's doing great (but not too great)

17

Find out who started rumor that I'm not funny

18

Ask Jim if he thinks I'm cool (be casual about it)

19

Dundies: add category for Best Boss

Doing

1

Cancel meeting with Toby (tell him I died)

2

Find out if 14 inches is big for a plasma TV

3

Check if Ryan saw my Facebook post

4

Ask IT to put virus on Toby's computer

5

Idea: what if I wrote a book

6

Google: how tall is Ryan

7

Get legal advice on how to fire someone from HR

Todo ListWork Tasks (Plain)

    <div class="layout layout--col layout--stretch gap">
      <div class="columns">
        <div class="column" data-overflow="true" data-overflow-counter="true">
          <span class="label label--medium lg:label--base group-header label--gray">Done</span>
          <div class="item">
            <div class="meta">
              <span class="index">1</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Practice winking</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">2</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Ask Pam to laugh louder at my jokes, people aren't getting them</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">3</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Research options for a regional manager also being a talent agent</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">4</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Ask Pam to make me a Wikipedia page</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">5</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Check if David Wallace follows me back on TikTok</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">6</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Look into what 'promise' means legally (Scott's Tots)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">7</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Make Dwight admit I could beat him in a fight</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">8</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Update enemies list</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">9</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Send Toby to Costa Rica for research</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">10</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Google: how to tell if your employees love you</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">11</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Buy more Serenity by Jan candles</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">12</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Threat Level Midnight table read</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">13</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Invent new catchphrase (bigger than that's what she said)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">14</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Send headshot to local news</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">15</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Look into buying the building</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">16</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Tell Dwight he's doing great (but not too great)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">17</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Find out who started rumor that I'm not funny</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">18</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Ask Jim if he thinks I'm cool (be casual about it)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">19</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Dundies: add category for Best Boss</p>
              </span>
            </div>
          </div>
        </div>
        <div class="column" data-overflow="true" data-overflow-counter="true">
          <span class="label label--medium lg:label--base group-header ">Doing</span>
          <div class="item">
            <div class="meta">
              <span class="index">1</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Cancel meeting with Toby (tell him I died)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">2</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Find out if 14 inches is big for a plasma TV</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">3</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Check if Ryan saw my Facebook post</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">4</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Ask IT to put virus on Toby's computer</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">5</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Idea: what if I wrote a book</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">6</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Google: how tall is Ryan</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">7</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Get legal advice on how to fire someone from HR</p>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title_bar">
      <img class="image" alt="" src="http://localhost:3000/images/plugins/todo_list--render.svg">
      <span class="title">Todo List</span>
      <span class="instance">Work Tasks (Plain)</span>
    </div>

#### Half Horizontal

Done

1

Practice winking

2

Ask Pam to laugh louder at my jokes, people aren't getting them

3

Research options for a regional manager also being a talent agent

4

Ask Pam to make me a Wikipedia page

5

Check if David Wallace follows me back on TikTok

6

Look into what 'promise' means legally (Scott's Tots)

7

Make Dwight admit I could beat him in a fight

8

Update enemies list

9

Send Toby to Costa Rica for research

10

Google: how to tell if your employees love you

11

Buy more Serenity by Jan candles

12

Threat Level Midnight table read

13

Invent new catchphrase (bigger than that's what she said)

14

Send headshot to local news

15

Look into buying the building

16

Tell Dwight he's doing great (but not too great)

17

Find out who started rumor that I'm not funny

18

Ask Jim if he thinks I'm cool (be casual about it)

19

Dundies: add category for Best Boss

Doing

1

Cancel meeting with Toby (tell him I died)

2

Find out if 14 inches is big for a plasma TV

3

Check if Ryan saw my Facebook post

4

Ask IT to put virus on Toby's computer

5

Idea: what if I wrote a book

6

Google: how tall is Ryan

7

Get legal advice on how to fire someone from HR

Todo ListWork Tasks (Plain)

    <div class="layout layout--col layout--stretch gap">
      <div class="columns">
        <div class="column" data-overflow="true" data-overflow-counter="true">
          <span class="label label--medium lg:label--base group-header label--gray">Done</span>
          <div class="item">
            <div class="meta">
              <span class="index">1</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Practice winking</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">2</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Ask Pam to laugh louder at my jokes, people aren't getting them</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">3</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Research options for a regional manager also being a talent agent</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">4</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Ask Pam to make me a Wikipedia page</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">5</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Check if David Wallace follows me back on TikTok</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">6</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Look into what 'promise' means legally (Scott's Tots)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">7</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Make Dwight admit I could beat him in a fight</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">8</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Update enemies list</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">9</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Send Toby to Costa Rica for research</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">10</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Google: how to tell if your employees love you</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">11</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Buy more Serenity by Jan candles</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">12</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Threat Level Midnight table read</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">13</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Invent new catchphrase (bigger than that's what she said)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">14</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Send headshot to local news</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">15</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Look into buying the building</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">16</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Tell Dwight he's doing great (but not too great)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">17</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Find out who started rumor that I'm not funny</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">18</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Ask Jim if he thinks I'm cool (be casual about it)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">19</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray">
                <p>Dundies: add category for Best Boss</p>
              </span>
            </div>
          </div>
        </div>
        <div class="column" data-overflow="true" data-overflow-counter="true">
          <span class="label label--medium lg:label--base group-header ">Doing</span>
          <div class="item">
            <div class="meta">
              <span class="index">1</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Cancel meeting with Toby (tell him I died)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">2</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Find out if 14 inches is big for a plasma TV</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">3</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Check if Ryan saw my Facebook post</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">4</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Ask IT to put virus on Toby's computer</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">5</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Idea: what if I wrote a book</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">6</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Google: how tall is Ryan</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">7</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base ">
                <p>Get legal advice on how to fire someone from HR</p>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title_bar">
      <img class="image" alt="" src="http://localhost:3000/images/plugins/todo_list--render.svg">
      <span class="title">Todo List</span>
      <span class="instance">Work Tasks (Plain)</span>
    </div>

#### Half Vertical

Doing

1

Cancel meeting with Toby (tell him I died)

2

Find out if 14 inches is big for a plasma TV

3

Check if Ryan saw my Facebook post

4

Ask IT to put virus on Toby's computer

5

Idea: what if I wrote a book

6

Google: how tall is Ryan

7

Get legal advice on how to fire someone from HR

Done

1

Practice winking

2

Ask Pam to laugh louder at my jokes, people aren't getting them

3

Research options for a regional manager also being a talent agent

4

Ask Pam to make me a Wikipedia page

5

Check if David Wallace follows me back on TikTok

6

Look into what 'promise' means legally (Scott's Tots)

7

Make Dwight admit I could beat him in a fight

8

Update enemies list

9

Send Toby to Costa Rica for research

10

Google: how to tell if your employees love you

11

Buy more Serenity by Jan candles

12

Threat Level Midnight table read

13

Invent new catchphrase (bigger than that's what she said)

14

Send headshot to local news

15

Look into buying the building

16

Tell Dwight he's doing great (but not too great)

17

Find out who started rumor that I'm not funny

18

Ask Jim if he thinks I'm cool (be casual about it)

19

Dundies: add category for Best Boss

Todo ListWork Tasks (Plain)

    <div class="layout layout--col layout--stretch gap">
      <div class="flex flex--col gap stretch-y" data-overflow="true" data-overflow-counter="true">
        <span class="label label--medium lg:label--base group-header ">Doing</span>
        <div class="item">
          <div class="meta">
            <span class="index">1</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base ">
              <p>Cancel meeting with Toby (tell him I died)</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">2</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base ">
              <p>Find out if 14 inches is big for a plasma TV</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">3</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base ">
              <p>Check if Ryan saw my Facebook post</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">4</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base ">
              <p>Ask IT to put virus on Toby's computer</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">5</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base ">
              <p>Idea: what if I wrote a book</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">6</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base ">
              <p>Google: how tall is Ryan</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">7</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base ">
              <p>Get legal advice on how to fire someone from HR</p>
            </span>
          </div>
        </div>
        <span class="label label--medium lg:label--base group-header label--gray">Done</span>
        <div class="item">
          <div class="meta">
            <span class="index">1</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Practice winking</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">2</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Ask Pam to laugh louder at my jokes, people aren't getting them</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">3</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Research options for a regional manager also being a talent agent</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">4</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Ask Pam to make me a Wikipedia page</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">5</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Check if David Wallace follows me back on TikTok</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">6</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Look into what 'promise' means legally (Scott's Tots)</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">7</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Make Dwight admit I could beat him in a fight</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">8</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Update enemies list</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">9</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Send Toby to Costa Rica for research</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">10</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Google: how to tell if your employees love you</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">11</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Buy more Serenity by Jan candles</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">12</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Threat Level Midnight table read</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">13</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Invent new catchphrase (bigger than that's what she said)</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">14</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Send headshot to local news</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">15</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Look into buying the building</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">16</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Tell Dwight he's doing great (but not too great)</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">17</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Find out who started rumor that I'm not funny</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">18</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Ask Jim if he thinks I'm cool (be casual about it)</p>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="meta">
            <span class="index">19</span>
          </div>
          <div class="content">
            <span class="title title--small lg:title--base label--gray">
              <p>Dundies: add category for Best Boss</p>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="title_bar">
      <img class="image" alt="" src="http://localhost:3000/images/plugins/todo_list--render.svg">
      <span class="title">Todo List</span>
      <span class="instance">Work Tasks (Plain)</span>
    </div>

#### Quadrant

Done

1

Practice winking

2

Ask Pam to laugh louder at my jokes, people aren't getting them

3

Research options for a regional manager also being a talent agent

4

Ask Pam to make me a Wikipedia page

5

Check if David Wallace follows me back on TikTok

6

Look into what 'promise' means legally (Scott's Tots)

7

Make Dwight admit I could beat him in a fight

8

Update enemies list

9

Send Toby to Costa Rica for research

10

Google: how to tell if your employees love you

11

Buy more Serenity by Jan candles

12

Threat Level Midnight table read

13

Invent new catchphrase (bigger than that's what she said)

14

Send headshot to local news

15

Look into buying the building

16

Tell Dwight he's doing great (but not too great)

17

Find out who started rumor that I'm not funny

18

Ask Jim if he thinks I'm cool (be casual about it)

19

Dundies: add category for Best Boss

Doing

1

Cancel meeting with Toby (tell him I died)

2

Find out if 14 inches is big for a plasma TV

3

Check if Ryan saw my Facebook post

4

Ask IT to put virus on Toby's computer

5

Idea: what if I wrote a book

6

Google: how tall is Ryan

7

Get legal advice on how to fire someone from HR

Todo ListWork Tasks (Plain)

    <div class="layout layout--col layout--stretch gap">
      <div class="columns">
        <div class="column" data-overflow="true" data-overflow-counter="true">
          <span class="label label--medium lg:label--base group-header label--gray">Done</span>
          <div class="item">
            <div class="meta">
              <span class="index">1</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Practice winking</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">2</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Ask Pam to laugh louder at my jokes, people aren't getting them</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">3</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Research options for a regional manager also being a talent agent</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">4</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Ask Pam to make me a Wikipedia page</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">5</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Check if David Wallace follows me back on TikTok</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">6</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Look into what 'promise' means legally (Scott's Tots)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">7</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Make Dwight admit I could beat him in a fight</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">8</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Update enemies list</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">9</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Send Toby to Costa Rica for research</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">10</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Google: how to tell if your employees love you</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">11</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Buy more Serenity by Jan candles</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">12</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Threat Level Midnight table read</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">13</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Invent new catchphrase (bigger than that's what she said)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">14</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Send headshot to local news</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">15</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Look into buying the building</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">16</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Tell Dwight he's doing great (but not too great)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">17</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Find out who started rumor that I'm not funny</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">18</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Ask Jim if he thinks I'm cool (be casual about it)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">19</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base label--gray" data-clamp="6">
                <p>Dundies: add category for Best Boss</p>
              </span>
            </div>
          </div>
        </div>
        <div class="column" data-overflow="true" data-overflow-counter="true">
          <span class="label label--medium lg:label--base group-header ">Doing</span>
          <div class="item">
            <div class="meta">
              <span class="index">1</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base " data-clamp="6">
                <p>Cancel meeting with Toby (tell him I died)</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">2</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base " data-clamp="6">
                <p>Find out if 14 inches is big for a plasma TV</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">3</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base " data-clamp="6">
                <p>Check if Ryan saw my Facebook post</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">4</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base " data-clamp="6">
                <p>Ask IT to put virus on Toby's computer</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">5</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base " data-clamp="6">
                <p>Idea: what if I wrote a book</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">6</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base " data-clamp="6">
                <p>Google: how tall is Ryan</p>
              </span>
            </div>
          </div>
          <div class="item">
            <div class="meta">
              <span class="index">7</span>
            </div>
            <div class="content">
              <span class="title title--small lg:title--base " data-clamp="6">
                <p>Get legal advice on how to fire someone from HR</p>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title_bar">
      <img class="image" alt="" src="http://localhost:3000/images/plugins/todo_list--render.svg">
      <span class="title">Todo List</span>
      <span class="instance">Work Tasks (Plain)</span>
    </div>

Previous

[RedditRedditReddit Top posts from favorite subreddits displayed across various layout sizes](/framework/examples/reddit)

Next

[Lunar CalendarLunar CalendarLunar Calendar Lunar phases and moon cycle information shown across different view sizes](/framework/examples/lunar_calendar)