Segment

A segment is used to create a grouping of related content.

[segment] shortcode arguments
classes:
Type -
[basic|raised|stacked|piled|vertical]
Emphasis -
[secondary|tertiary]
Color -
[red|green|blue|...]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Padding -
[padded|very padded]
Float -
[left floated|right floated]
Alignment -
[left aligned|center aligned|right aligned]
Attachment -
[top attached|attached|bottom attached]
Other -
[compact|circular|clearing|disabled|inverted|loading|fluid]
Segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<segment>...</segment>
Primary segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<segment primary>...</segment>
<segment inverted primary>...</segment>
Secondary and tertiary segments
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<segment secondary>...</segment>
<segment tertiary>...</segment>
Raised segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<segment raised>...</segment>
Stacked segment
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<segment stacked>...</segment>
<segment tall stacked>...</segment>
Piled segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
<segment piled>...</segment>
Inverted segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
<segment inverted>...</segment>
Circular segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
<segment circular>...</segment>
Loading segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
<segment loading>...</segment>
Basic segment
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
<segment basic>...</segment>
Notes
Basic segment has no special formatting.
Colored segments
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
<segment inverted red>...</segment>
<segment inverted green>...</segment>
<segment basic inverted blue>...</segment>
<segment basic inverted teal>...</segment>
Sizes
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare.
<segment mini>...</segment>
<segment tiny>...</segment>
<segment small>...</segment>
<segment>...</segment>
<segment large>...</segment>
<segment big>...</segment>
<segment huge>...</segment>
<segment massive>...</segment>
Group of segments
Top segment
Red segment
Center aligned segment
Padded segment
Very padded segment
Secondary segment
Tertiary segment
Disabled segment
Bottom segment
<segments>
  <segment>Top segment</segment>
  <segment red>Red segment</segment>
  <segment center aligned>Center aligned segment</segment>
  <segment padded>Padded segment</segment>
  <segment very padded>Very padded segment</segment>
  <segment secondary>Secondary segment</segment>
  <segment tertiary>Tertiary segment</segment>
  <segment disabled>Disabled segment</segment>
  <segment>Bottom segment</segment>
</segments>
Attached segment
Lorem ipsum dolor sit amet...
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
Nunc posuere, velit a tincidunt euismod, turpis sem viverra nisi, vel placerat quam metus at elit. Phasellus et enim urna. Quisque non metus metus. Nunc scelerisque et risus a ornare. Cras non velit molestie, vulputate elit vel, ullamcorper urna. Ut sit amet aliquam purus. Suspendisse facilisis tortor at elit accumsan, sed tristique augue placerat. Fusce ut velit pulvinar, aliquam ex et, facilisis felis.
<message top attached info><icon info>Lorem ipsum dolor sit amet...</message>
<segment attached>...</segment>
<segment attached>...</segment>
<button fluid bottom attached>Read more</button>
Example
Dogs Roles with Humans

Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.

The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.

<segment vertical stripe>
  <container raised very padded primary text segment>
    <header large>Dogs Roles with Humans</header>
    <p>Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.</p>
    <p>The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.</p>
  </container>
</segment>

Leave a comment

Your email address will not be published. Required fields are marked *