Skip to content

Instantly share code, notes, and snippets.

@mattdetails
Last active September 3, 2015 18:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattdetails/02c1027f0d0b6752d5dd to your computer and use it in GitHub Desktop.
Save mattdetails/02c1027f0d0b6752d5dd to your computer and use it in GitHub Desktop.
<div class="container">
<div class="main-content">
<div class="tc-panel promo-report is-collapsed">
<div class="tc-panel-header mod-promo-report">
<div class="tc-panel-header-info">
<h1 class="tc-panel-header-title mod-promo-report"><span class="icon-starter-report"></span> CERCA Starter Report</h1>
</div>
<div class="tc-panel-header-actions">
<div class="tc-panel-header-actions-item mod-minimize">
<a class="tc-btn mod-minimize" href="">Expand</a>
</div><!-- // tc-panel-header-actions-item -->
</div>
</div>
</div><!-- // tc-panel -->
<div class="tc-panel promo-report">
<div class="tc-panel-header mod-promo-report">
<div class="tc-panel-header-info">
<h1 class="tc-panel-header-title mod-promo-report"><span class="icon-starter-report"></span> CERCA Starter Report</h1>
</div>
<div class="tc-panel-header-actions">
<div class="tc-panel-header-actions-item mod-minimize">
<a class="tc-btn mod-minimize" href="">Minimize</a>
</div><!-- // tc-panel-header-actions-item -->
</div>
</div>
<div class="tc-panel-content">
<div class="promo-report-content">
<h3 class="promo-report-headline">Leveling Your Students</h3>
<p class="promo-report-summary">Analyze data to help place your students at a reading level that will challenge them appropriately.</p>
</div>
<div class="promo-report-actions">
<a class="tc-btn mod-primary mod-block" href="">See your data</a>
</div>
</div>
</div><!-- // tc-panel -->
</div>
<div class="side-content">
<div class="assignment-panel"></div>
</div>
</div>
@robinschaaf
Copy link

Just looking at it I would keep the tc-panel out of the descendents, since components should be standalone and not know anything about anything else, even including the tc-panel-content, and -header, etc.
For example you could have tc-header instead, and then mod it to be smaller, or whatever you need to change about it from a typical header?
If tc-panel-header-actions-item is, for example, something that does a float:right, and action items are always on the righthand side it might make sense to just factor that part out into it's own component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment