{ "Name": "Semantic Segment", "Description": "A segment is used to create a grouping of related content.", "Definition": "Elements", "Types": { "Segment": ".ui.segment > .", "Vertical Segment": ".ui.vertical.segment > .", "Horizontal Segment": ".ui.horizontal.segment > .", "Piled": ".ui.piled.segment > .", "Stacked": ".ui.stacked.segment > ." }, "States": {}, "Variations": { "Inverted": [ "inverted" ], "Raised": [ "raised" ], "Colored": [ "blue", "orange", "green", "red", "purple", "teal" ], "Ordinality": [ "primary", "secondary", "tertiary" ], "Circular": [ "circular", "inverted circular" ], "Floated": [ "right floated", "left floated" ], "Basic": [ "basic" ], "Attached": [ "top attached", "attached", "bottom attached" ] }, "Definitions": { "Segment": "A segment of content", "Vertical Segment": "A vertical segment divides content vertically", "Horizontal Segment": "A horizontal segment divides content horizontally", "Piled": "A segment can be formatted to look like a pile of pages", "Stacked": "A segment can be formatted to show it contains multiple pages", "Disabled": "A segment may show its content is disabled\n \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n \n ", "Inverted": "A segment can have its colors inverted for contrast", "Raised": "A segment may be formatted to raise above the page.", "Colored": "A segment can be colored", "Ordinality": "A segment can be formatted to appear more or less noticeable", "Circular": "A segment can be circular", "Floated": "A segment cant sit to the left or right of other content", "Basic": "A basic segment has no special formatting", "Attached": "A segment can be attached to other content on a page" } }