README
Text and Content
Text section accompanied by either an image, a code block or a logo grid.
Props
enableLogoGridIntegrationLinks
(boolean) [optional] - If true, logo-grid items will link to integration pagesbrand
(string, ["hashicorp","terraform","vault","consul","nomad","packer","vagrant"]) [optional] - Controls link and button colorationlinkStyle
(string, ["link","button"]) [optional] - Controls the appearance of linksdata
- (arr) - Array of objects from the CMS, object props belowreverseDirection
(string)) - reverses the item order on desktop, placing text on the righttext
(string) A markdown string of the text to be displayedcontent
(object) - either an image object, a code-block object or a logo-grid object from Datolinks
(array) [optional] - An array of { title, url, external } to be rendered below text content.hasShadow
(bool) [optional] - when used with an image block type, adds a drop shadow to the imagehasBorder
(bool) [optional] - when used with an image block type, adds a border to the image
headingClassNames
(object) [optional] - className strings to add to markdown Headings by level. customizes the Headings oftext
, see MarkedJS Renderer
MarkedJS Renderer
To temporarily alleviate some styling debt issues TextAndContent can dynamically mutate the markdown of the text
prop. This is achieved by extending the renderer
of MarkedJS.
Our customizations occur within the temporary_generateMarkedOptions
function on index.js
Customizations:
- All
<p>
,<ul>
, and<ol>
tags will by default include a hardcoded body text class of.g-type-body
for consistency - All heading tags can be customized via the
headingClassNames
prop.text
, for example{ 2: 'g-type-section-1' }
outputs allh2
tags as<h2 class='g-type-section-1'>
we filter out anything with a non-numeric key, and of course only options1
thru6
will work ;) - All
<a>
tags will include a brand class to match the providedbrand
prop. If nobrand
prop is provided, no class will be added.