{"id":275,"date":"2020-04-22T06:24:32","date_gmt":"2020-04-22T06:24:32","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&#038;p=275"},"modified":"2021-07-06T09:51:14","modified_gmt":"2021-07-06T09:51:14","slug":"typography-control","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/typography-control\/","title":{"rendered":"Typography Control"},"content":{"rendered":"\n<p>The typography&nbsp;control provides the following CSS properties:<\/p>\n\n\n\n<ul><li>color<\/li><li>font-size<\/li><li>text-align<\/li><li>text-transform<\/li><li>font-family<\/li><li>font-weight<\/li><li>font-style<\/li><li>line-height<\/li><li>letter-spacing<\/li><li>text-shadow<\/li><li>text-decoration<\/li><\/ul>\n\n\n\n<p>Use the <code>exclude<\/code> parameter to hide specific typography properties. Set <code>popup<\/code> to false to show control inline.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>class Prefix_Element_Typography extends \\Bricks\\Element {\n  \/\/ Set builder controls\n  public function set_controls() {\n    $this->controls&#91;'exampleTypography'] = &#91;\n      'tab' => 'content',\n      'label' => esc_html__( 'Typography', 'bricks' ),\n      'type' => 'typography',\n      'css' => &#91;\n        &#91;\n          'property' => 'typography',\n          'selector' => '.prefix-typography',\n        ],\n      ],\n      'inline' => true,\n      \/\/ 'exclude' => &#91;\n      \/\/   'font-family',\n      \/\/   'font-weight',\n      \/\/   'text-align',\n      \/\/   'text-transform',\n      \/\/   'font-size',\n      \/\/   'line-height',\n      \/\/   'letter-spacing',\n      \/\/   'color',\n      \/\/   'text-shadow',\n      \/\/ ],\n      \/\/ 'popup' => false, \/\/ Default: true\n    ];\n  }\n\n  \/\/ Render element HTML\n  public function render() {\n    echo '&lt;h3 class=\"prefix-typography\">' . get_bloginfo( 'name' ) . '&lt;\/h3>';\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The typography&nbsp;control provides the following CSS properties: color font-size text-align text-transform font-family font-weight font-style line-height letter-spacing text-shadow text-decoration Use the exclude parameter to hide specific typography properties. Set popup to false to show control inline.<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":145,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/275"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/275\/revisions"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}