Example

Job Summary

New

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago

How do I build this example for myself?

Designs like this are rarely built top-to-bottom in a single pass. Instead, they typically start very simple, with further details and refinements added in layers.
To give you a sense of what this looks like, the following tutorial will guide you through the design process that you might go through when using Playroom.
At any stage you can click the “Open in Playroom” button under the examples to view the design across themes and viewports.

1. Create card with basic content

Adding the basic content up front is a great place to start, allowing us to consider the hierarchy of information as we iterate. We’ll nest this content inside a Card and apply some basic formatting using Heading and Text.

Product Designer

Braid Design Pty LtdMelbourneInformation Technology150k+Long description of card details providing more information.2d ago
<Card>
  <Heading level="3">Product Designer</Heading>
  <Text>Braid Design Pty Ltd</Text>
  <Text>Melbourne</Text>
  <Text>Information Technology</Text>
  <Text>150k+</Text>
  <Text>Long description of card details providing more information.</Text>
  <Text>2d ago</Text>
</Card>

2. Space out the content

You’ll notice that there is no space between components by default. This is actually a good thing! We now get to decide exactly how spaced out we want the content to be. To achieve this, we’ll use a Stack component which applies space evenly between its child elements.

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Stack space="gutter">
    <Heading level="3">Product Designer</Heading>
    <Text>Braid Design Pty Ltd</Text>
    <Text>Melbourne</Text>
    <Text>Information Technology</Text>
    <Text>150k+</Text>
    <Text>Long description of card details providing more information.</Text>
    <Text>2d ago</Text>
  </Stack>
</Card>

3. Group content

Grouping the content into sections can help provide structure to the information, and in turn, make it easier to digest. Let’s divide the information into four descrete sections — the header, metadata, body and footer. For this, we’ll start nesting new Stack components within our existing Stack. (Yeah, we realise this is a little mind bending at first!)

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Stack space="gutter">
    <Stack space="small">
      <Heading level="3">Product Designer</Heading>
      <Text>Braid Design Pty Ltd</Text>
    </Stack>
    <Stack space="small">
      <Text>Melbourne</Text>
      <Text>Information Technology</Text>
      <Text>150k+</Text>
    </Stack>
    <Text>Long description of card details providing more information.</Text>
    <Text>2d ago</Text>
  </Stack>
</Card>

4. Use size and tone to provide hierarchy

Not all the information presented has the same priority. To improve readability, we can adjust the tone and/or the size of the information. In this case, pushing some details back to “secondary” and/or reducing their size can help focus the user’s attention.

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Stack space="gutter">
    <Stack space="small">
      <Heading level="3">Product Designer</Heading>
      <Text tone="secondary">Braid Design Pty Ltd</Text>
    </Stack>
    <Stack space="small">
      <Text size="small" tone="secondary">
        Melbourne
      </Text>
      <Text size="small" tone="secondary">
        Information Technology
      </Text>
      <Text size="small" tone="secondary">
        150k+
      </Text>
    </Stack>
    <Text>Long description of card details providing more information.</Text>
    <Text size="xsmall" tone="secondary">
      2d ago
    </Text>
  </Stack>
</Card>

5. Add icons

Icons can be used to serve as visual cues to complement data and introduce some more visual interest. Let’s add icons to our list of metadata.

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Stack space="gutter">
    <Stack space="small">
      <Heading level="3">Product Designer</Heading>
      <Text tone="secondary">Braid Design Pty Ltd</Text>
    </Stack>
    <Stack space="xsmall">
      <Text size="small" tone="secondary">
        <IconLocation /> Melbourne
      </Text>
      <Text size="small" tone="secondary">
        <IconTag />
        Information Technology
      </Text>
      <Text size="small" tone="secondary">
        <IconMoney /> 150k+
      </Text>
    </Stack>
    <Text>Long description of card details providing more information.</Text>
    <Text size="xsmall" tone="secondary">
      2d ago
    </Text>
  </Stack>
</Card>

6. Add a splash of colour

Let’s look at adding a visual cue to indicate that this job is new. To do this, we’ll add a Badge component to the top of our card.
New

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Stack space="gutter">
    <Stack space="small">
      <Badge tone="positive">New</Badge>
      <Heading level="3">Product Designer</Heading>
      <Text tone="secondary">Braid Design Pty Ltd</Text>
    </Stack>
    <Stack space="xsmall">
      <Text size="small" tone="secondary">
        <IconLocation /> Melbourne
      </Text>
      <Text size="small" tone="secondary">
        <IconTag />
        Information Technology
      </Text>
      <Text size="small" tone="secondary">
        <IconMoney /> 150k+
      </Text>
    </Stack>
    <Text>Long description of card details providing more information.</Text>
    <Text size="xsmall" tone="secondary">
      2d ago
    </Text>
  </Stack>
</Card>
Let’s also add a Rating alongside the company name. Ideally we want this to sit on the same line, but if it does not fit due to the length of the name or the size of the screen we want it to wrap below. For this we can use the Inline component.
NOTE: Click through to the Playroom to see how this behaves across screen sizes.
New

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Stack space="gutter">
    <Stack space="small">
      <Badge tone="positive">New</Badge>
      <Heading level="3">Product Designer</Heading>
      <Inline space="small">
        <Text tone="secondary">Braid Design Pty Ltd</Text>
        <Rating rating={4.5} />
      </Inline>
    </Stack>
    <Stack space="xsmall">
      <Text size="small" tone="secondary">
        <IconLocation /> Melbourne
      </Text>
      <Text size="small" tone="secondary">
        <IconTag />
        Information Technology
      </Text>
      <Text size="small" tone="secondary">
        <IconMoney /> 150k+
      </Text>
    </Stack>
    <Text>Long description of card details providing more information.</Text>
    <Text size="xsmall" tone="secondary">
      2d ago
    </Text>
  </Stack>
</Card>

7. Add an action to the corner of the card

Sometimes adding new features can necessitate changing the layout. First, we’ll use a Columns component to break up our card into two columns.
NOTE: To make this easier to follow, we’ve replaced the job content with a Placeholder.
Job content
Save action
<Card>
  <Columns space="gutter">
    <Column>
      <Placeholder height={80} label="Job content" />
    </Column>
    <Column>
      <Placeholder height={80} label="Save action" />
    </Column>
  </Columns>
</Card>
In the second column we’ll use the IconBookmark as the save action. By default, `Columns` are of equal width. In this design however, the second column should only we as wide as the save action itself. This can be controlled by setting the `Column` to have a “width” of “content”.
Job content
<Card>
  <Columns space="gutter">
    <Column>
      <Placeholder height={80} label="Job content" />
    </Column>
    <Column width="content">
      <IconBookmark />
    </Column>
  </Columns>
</Card>
Now that we’ve adjusted the layout, let’s reinstate our job content in the main column.
New

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Columns space="gutter">
    <Column>
      <Stack space="gutter">
        <Stack space="small">
          <Badge tone="positive">New</Badge>
          <Heading level="3">Product Designer</Heading>
          <Inline space="small">
            <Text tone="secondary">Braid Design Pty Ltd</Text>
            <Rating rating={4.5} />
          </Inline>
        </Stack>
        <Stack space="xsmall">
          <Text size="small" tone="secondary">
            <IconLocation /> Melbourne
          </Text>
          <Text size="small" tone="secondary">
            <IconTag />
            Information Technology
          </Text>
          <Text size="small" tone="secondary">
            <IconMoney /> 150k+
          </Text>
        </Stack>
        <Text>
          Long description of card details providing more information.
        </Text>
        <Text size="xsmall" tone="secondary">
          2d ago
        </Text>
      </Stack>
    </Column>
    <Column width="content">
      <IconBookmark />
    </Column>
  </Columns>
</Card>

8. Polish!

Now that we have all our elements in place we can polish until we are happy. Adjusting white space between elements, or even responsively, to achieve the desired goal.
In this case, we might loosen up the metadata section by increasing the space to “small”.
New

Product Designer

Braid Design Pty Ltd
Melbourne
Information Technology
150k+
Long description of card details providing more information.
2d ago
<Card>
  <Stack space="gutter">
    <Columns space="gutter">
      <Column>
        <Stack space="small">
          <Badge tone="positive">New</Badge>
          <Heading level="3">Product Designer</Heading>
          <Inline space="small">
            <Text tone="secondary">Braid Design Pty Ltd</Text>
            <Rating rating={4.5} />
          </Inline>
        </Stack>
      </Column>
      <Column width="content">
        <IconBookmark />
      </Column>
    </Columns>
    <Stack space="small">
      <Text size="small" tone="secondary">
        <IconLocation /> Melbourne
      </Text>
      <Text size="small" tone="secondary">
        <IconTag />
        Information Technology
      </Text>
      <Text size="small" tone="secondary">
        <IconMoney /> 150k+
      </Text>
    </Stack>
    <Text>Long description of card details providing more information.</Text>
    <Text size="xsmall" tone="secondary">
      2d ago
    </Text>
  </Stack>
</Card>

Next steps

Now that you are familiar with the code we have just written, this is a good chance to head over to Playroom and continue refining this design.
You may want to consider:
  • Using Hidden to reduce the amount of data shown on mobile,
  • Specifying different spacing responsively using Stack,
  • Adding a company logo. You can use Placeholder component if you don’t have hosted imagery to work with.