CSS Components and Styleguide

Lists

Example

Unordered list

  • Aw, you're all Mr. Grumpy Face today.
  • You hit me with a cricket bat.
  • Insistently Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!
  • Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?

Ordered list

  1. Aw, you're all Mr. Grumpy Face today.
  2. You hit me with a cricket bat.

Unordered list with a nested unordered list

  • Aw, you're all Mr. Grumpy Face today.
  • You hit me with a cricket bat.
  • Insistently Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!
  • Insistently Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!
    • I'm the Doctor! catches himself
    • Stop talking, brain thinking. Hush.

Orderd list with a nested ordered list

  1. Aw, you're all Mr. Grumpy Face today.
  2. You hit me with a cricket bat.
  3. I am the Doctor, and you are the Daleks!
    1. I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like jumping out of a spaceship.
    2. You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to make you feel better?
    3. I am the last of my species, and I know how that weighs on the heart so don't lie to me!
    4. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?!

Ordered list with a nested unordered list

  1. Aw, you're all Mr. Grumpy Face today.
  2. You hit me with a cricket bat.
  3. Insistently Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!
    • I'm the Doctor! catches himself
    • Stop talking, brain thinking. Hush.

Unordered list with a nested ordered list

  • Aw, you're all Mr. Grumpy Face today.
  • You hit me with a cricket bat.
  • I am the Doctor, and you are the Daleks!
    1. I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like jumping out of a spaceship.
    2. You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to make you feel better?
    3. I am the last of my species, and I know how that weighs on the heart so don't lie to me!
    4. Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?!
Markup: typography/typography-lists.html
                    <h2>Unordered list</h2>
<ul>
    <li>Aw, you're all Mr. Grumpy Face today.</li>
    <li>You hit me with a cricket bat.</li>
    <li><b>Insistently</b> Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!</li>
    <li>Annihilate? No. <i>No violence.</i> I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you?</li>
</ul>

<h2>Ordered list</h2>
<ol>
    <li>Aw, you're all Mr. Grumpy Face today.</li>
    <li>You hit me with a cricket bat.</li>
</ol>

<h2>Unordered list with a nested unordered list</h2>
<ul>
    <li>Aw, you're all Mr. Grumpy Face today.</li>
    <li>You hit me with a cricket bat.</li>
    <li>
        <b>Insistently</b> Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!</li>
    <li>
        <b>Insistently</b> Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!
        <ul>
            <li>I'm the Doctor! <strong>catches himself</strong>
            <li>Stop talking, brain thinking. Hush.</li>
        </ul>
    </li>
</ul>

<h2> Orderd list with a nested ordered list</h2>
<ol>
    <li>Aw, you're all Mr. Grumpy Face today.</li>
    <li>You hit me with a cricket bat.</li>
    <li>I am the Doctor, and you are the Daleks!
        <ol>
            <li>I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like jumping out of a spaceship.</li>
            <li>You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to make you feel better?</li>
            <li>I am the last of my species, and I know how that weighs on the heart so don't lie to me!</li>
            <li>
                Annihilate? No. <i>No violence.</i> I won't stand for it.
                Not now, not ever, do you understand me?!
            </li>
        </ol>
    </li>
</ol>

<h2>Ordered list with a nested unordered list</h2>
<ol>
    <li>Aw, you're all Mr. Grumpy Face today.</li>
    <li>You hit me with a cricket bat.</li>
    <li>
        <b>Insistently</b> Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!
        <ul>
            <li>I'm the Doctor! <strong>catches himself</strong>
            <li>Stop talking, brain thinking. Hush.</li>
        </ul>
    </li>
</ol>

<h2> Unordered list with a nested ordered list</h2>
<ul>
    <li>Aw, you're all Mr. Grumpy Face today.</li>
    <li>You hit me with a cricket bat.</li>
    <li>I am the Doctor, and you are the Daleks!
        <ol>
            <li>I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like jumping out of a spaceship.</li>
            <li>You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to make you feel better?</li>
            <li>I am the last of my species, and I know how that weighs on the heart so don't lie to me!</li>
            <li>
                Annihilate? No. <i>No violence.</i> I won't stand for it.
                Not now, not ever, do you understand me?!
            </li>
        </ol>
    </li>
</ul>
                  
Source: typography/_typography.scss, line 7