Summary
Table of Contents
Anatomy
- Facts
- Content
- Button (optional)
Usage Guidelines
This component is useful for showing some free-form overview content along with a few key highlighted facts.
WordPress
This component can be added to post content with the Summary or Program Tabs blocks in the Gutenberg editor.
Specifications
Properties
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| facts | array | List of fact objects | Yes | - |
| └ item | object | - | - | - |
| content | string | Inner HTML markup (raw HTML or other template includes) | Yes | - |
| button | object | If provided, shows up under the facts in the first section | No | - |
| side_class | string | list of additional classes to apply to inner side element | No | - |
| class | string | list of additional classes to apply to main element | No | - |
Styling
Custom Properties
| Name | Default | Resets | Description |
|---|---|---|---|
--tux-comp-summary--side-bg-color | rgba(136, 136, 136, 0.2) | Yes | - |
Changelog
1.14.0
- summary added
Related
Contains
Other core components embedded within this template.
Examples
Default
100% Online
2 Year Duration
36 Credits
Gain the knowledge and skills you need to maximize your accountancy potential with an MBA specializing in Accounting from our university.
- Vestibulum id ligula porta felis euismod semper.
- Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
- Donec id elit non mi porta gravida at eget metus.
{{ include( 'components/summary.twig', {
facts: {...}
content: "<p>Gain the knowledge and skills you need to maximize your accountancy potential with an MBA specializing in Accounting from our university.</p><ul><li>Vestibulum id ligula porta felis euismod semper.</li><li>Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.</li><li>Donec id elit non mi porta gravida at eget metus.</li></ul> <a class='tux-c-button tux-c-button--tertiary' href=''>Read More <span class='tux-c-icon'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'></path></svg></span></a>"
cta: {...}
} ) }}More Icons
100% Online
2 Year Duration
36 Credits
100% Online
2 Year Duration
Gain the knowledge and skills you need to maximize your accountancy potential with an MBA specializing in Accounting from our university.
- Vestibulum id ligula porta felis euismod semper.
- Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
- Donec id elit non mi porta gravida at eget metus.
{{ include( 'components/summary.twig', {
facts: {...}
content: "<p>Gain the knowledge and skills you need to maximize your accountancy potential with an MBA specializing in Accounting from our university.</p><ul><li>Vestibulum id ligula porta felis euismod semper.</li><li>Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.</li><li>Donec id elit non mi porta gravida at eget metus.</li></ul>"
cta: {...}
} ) }}A lot of content
100% Online
2 Year Duration
36 Credits
Cursus Fringilla Pharetra Quam
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.
{{ include( 'components/summary.twig', {
facts: {...}
content: {...}
cta: {...}
} ) }}