Description list add-on

Easily create nice looking description lists, which come in different styles.

  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit
  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit
  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit
  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit
  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit

02 Columns Grid with Grid Width

  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit
  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit
  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit
  • Title
    Meta
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed faucibus dignissim eu hendrerit quisque suscipit

02 Column Grid (Width Medium)

  • Title
    Meta
    Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore. Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr. Donec posuere vulputate arcu.
  • Title
    Meta
    Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore. Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr. Donec posuere vulputate arcu.
  • Title
    Meta
    Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore. Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr. Donec posuere vulputate arcu.

Striped Layout

  • Title
    Meta
    Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore. Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia consectetuer vestibulum elit.
  • Title
    Meta
    Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore. Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia consectetuer vestibulum elit.
  • Title
    Meta
    Lorem ipsum dolor sit amet, sed nonumy eirmod tempor invidunt labore. Phasellus accumsan cursus velit consetetur sadipscing elitr sed diam consetetur sadipscing elitr. Donec posuere vulputate arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia consectetuer vestibulum elit.

Content Fields

Here is a list of common content fields for Description add-on.

Setting Description
Title A text field used for title of the description
HTML Element Choose on of the elements to fit your semantic structure.
Title Style Heading styles differ in font-size but may also come with a predefined color, size and font
Title color Use one of these classes to apply a different color to title description.
Meta A text field used for meta text like the author or publication date.
Content A text field for the main text blocks.
Link Enter or pick a link, an image or a video file.

Style Settings

Style settings, The Style Settings contains all the specific settings for an add-on. Here is a short overview.

Setting Description
Style Select the list style and add larger padding between items.
Larger padding Add Larger padding between items.
Layout Define the layout of the title, meta and content.
Width Define the width of the title within the grid.
Gutter Select the gutter width between the title and content.
Breakpoint Set the breakpoint from which the layout will stack.

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.
Alignment This option specifies the alignment of an add-on according to the surrounding element
Text Breakpoint Define the device width from which the alignment will apply.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.

Information

2453 Koontz Lane, North Hollywood, CA, United States

Address