Section groups are panels that help organize information into consumable chunks. GitHub does a great job of using section groups to help maintain user profiles. In this example we'll look at creating a similar profile section using only Kabu.

1. Create a container

Start by creating a container for our section. Let's use box for our basic container. The round class takes care of rounding corners and softening the edges.

container
<div class='box round'>
  container
</div>

2. Create a title

Section groups normally have a title to help distinguish them from other sections on the page. We're going to give our title a darker background so it stands out by using a fill-darken helper from the colors section. We'll also use padding helpers to create space around the title.

Basic Information

content goes here...
<div class='box round'>
  <header class='pad1y pad2x keyline-bottom fill-darken0'>
    <h3>Basic Information</h3>
  </header>
  content goes here...
</div>

3. Create body and footer sections

Now that we have a header let's create space for the body and footer sections using padding helpers. A keyline is used to create a border between both sections.

Basic Information

body goes here...
footer goes here...
<div class='box round'>
  <header class='pad1y pad2x keyline-bottom fill-darken0'>
    <h3>Basic Information</h3>
  </header>
  <div class='pad2 keyline-bottom'>
    body goes here...
  </div>
  <div class='pad2'>
    footer goes here...
  </div>
</div>

4. Add body elements

Next we need to add some form elements so users can update profile name and email. We'll use standard text controls and the stretch option to make sure they're full width.

Basic Information

footer goes here...
<div class='box round'>
  <header class='pad1y pad2x keyline-bottom fill-darken0'>
    <h3>Basic Information</h3>
  </header>
  <div class='pad2 keyline-bottom'>
    <form>
      <fieldset>
        <label for='name'>Name</label>
        <input id='name' type='text' class='stretch' value='Rigby'>
      </fieldset>
      <fieldset>
        <label for='email'>Email</label>
        <input id='email' type='text' class='stretch' value='rigby@gmail.com'>
      </fieldset>                      
    </form>
  </div>
  <div class='pad2'>
    footer goes here...
  </div>
</div>

5. Add profile picture

Users need to be able to edit profile picture and it would be helpful if they could see the picture that's currently being used. There are several layout options we could use but we're going to use a media component since it already provides most of the styling we need. We'll also add some help text using small & quiet helpers.

Basic Information

Upload new picture

You can also drag and drop a picture from your computer.

footer goes here...
<div class='box round'>
  <header class='pad1y pad2x keyline-bottom fill-darken0'>
    <h3>Basic Information</h3>
  </header>
  <div class='pad2 keyline-bottom'>
    <form>
      <fieldset>
        <div class='media'>
          <a class='media-left pad1r' href='#fakelink'>
            <img src='../img/regularshow.jpg' class='img-rounded' width='70'>
          </a>
          <div class='media-body pad1l'>
            <a href='#fakelink' class='btn btn-default'>Upload new picture</a>
            <p class='small quiet pad0y'>
              You can also drag and drop a picture from your computer.
            </p>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <label for='name'>Name</label>
        <input id='name' type='text' class='stretch' value='Rigby'>
      </fieldset>
      <fieldset>
        <label for='email'>Email</label>
        <input id='email' type='text' class='stretch' value='rigby@gmail.com'>
      </fieldset>                      
    </form>
  </div>
  <div class='pad2'>
    footer goes here...
  </div>
</div>

6. Add save button to footer

We're almost there! All we need is a save button. Let's use a primary button to draw attention to Save and create visual heirarchy. We'll also align the button on the right with text-right.

Basic Information

Upload new picture

You can also drag and drop a picture from your computer.

<div class='box round'>
  <header class='pad1y pad2x keyline-bottom fill-darken0'>
    <h3>Basic Information</h3>
  </header>
  <div class='pad2 keyline-bottom'>
    <form>
      <fieldset>
        <div class='media'>
          <a class='media-left pad1r' href='#fakelink'>
            <img src='../img/regularshow.jpg' class='img-rounded' width='70'>
          </a>
          <div class='media-body pad1l'>
            <a href='#fakelink' class='btn btn-default'>Upload new picture</a>
            <p class='small quiet pad0y'>
              You can also drag and drop a picture from your computer.
            </p>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <label for='name'>Name</label>
        <input id='name' type='text' class='stretch' value='Rigby'>
      </fieldset>
      <fieldset>
        <label for='email'>Email</label>
        <input id='email' type='text' class='stretch' value='rigby@gmail.com'>
      </fieldset>                      
    </form>
  </div>
  <div class='pad2 text-right'>
    <a href='#fakelink' class='btn btn-primary'>Save changes</a>
  </div>
</div>
Made with in Norcross by the UX Team.